React tutorial
React
is a JAVASCRIPT library for building user interfaces.
React
is mainly used to build UI, and many people think React
isthe V (view) in MVC.
React
an internal project that originated from Facebook and was used to build Instagram
the website was launched in May 2013.
React
with high performance, the code logic is very simple, more and more people have begun to pay attention to and use it.
Characteristics of React
1.Declarative design
−React
by using the declaration paradigm, the application can be easily described.2.Efficient
−React
through the simulation of DOM, the interaction with DOM is minimized.3.flexible
−React
works well with known libraries or frameworks.4.JSX − JSX is an extension of JavaScript syntax.
React
developers don’t necessarily use JSX, but we recommend it.5.Component − passes through
React
building components makes the code easier to reuse and can be well applied in the development of large projects.6.Data flow − of one-way response
React
the data flow of one-way response is implemented, thus reducing repetitive code, which is why it is simpler than traditional data binding.
What you need to know before reading this tutorial:
At the beginning of learning React
before, you need to have the following basic knowledge:
HTML tutorial
CSS tutorial
JavaScript tutorial
ES6 tutorial
The first instance of React
In each chapter, you can edit the instance online and click the button to view the results.
This tutorial uses the React
version 16.4.0, you can download the latest version at https://reactjs.org/.
React instance
<divid="example"></div><scripttype="text/babel">ReactDOM.render(<h1>Hello,
world!</h1>, document.getElementById('example') );</script>
Or use the create-react-app
tools (described in the next chapter) react
development environment:
Example
import React from "react";
import ReactDOM from "react-dom";
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById("root"));
When the browser opens http://localhost:3000/, it will output:
Hello World!