1. Background introduction
1.1 What is React?
React originated as an internal project at Facebook. In 2013, it was made open source for everyone to use. Is a declarative , efficient and flexible JavaScript library for building user interfaces. Using React, you can combine some short, independent code snippets into complex UI interfaces. These code snippets are called "components".
The declarative features of React reduce the performance loss of operating DOM, and component-based development allows a large number of components to be reused. The internally implemented virtual DOM and DOM diff algorithm make DOM operations efficient.
1.2 React features
- Declarative design − React adopts a declarative paradigm, which makes it easy to describe applications.
- Efficient − React minimizes interaction with the DOM by simulating the DOM.
- Flexible − React plays well with known libraries or frameworks.
- JSX − JSX is an extension of JavaScript syntax. React development doesn't necessarily use JSX, but we recommend it.
- Component − Building components through React makes the code easier to reuse and can be well applied in the development of large projects.
- One-way response data flow − React implements one-way response data flow, thereby reducing duplicate code and maintaining data security.
1.3 Virtual DOM
Virtual DOM (Virtual DOM) mechanism: A set of DOM API is implemented on the browser side using Javascript. When React is developed, all DOM construction is done through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree. Then React compares the current entire DOM tree with the previous DOM tree to get the difference in DOM structure. , and then perform the actual browser DOM update only on the parts that need to be changed. Moreover, React can batch refresh the virtual DOM. For example, if you continuously change the node content from A to B, and then from B to A, React will think that the UI has not changed in any way.
1.4 CDN introduces React
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
When imported using CDN, the script fragment code needs to declare the type astext/babel
1.4 JSX syntax
The HTML language written directly in the JavaScript language is JSX. JSX is a JavaScript syntax extension that allows the mixing of HTML and JavaScript. JSX is a set of syntactic sugar developed by Facebook for the React framework
const dom = <h1>Hello, world!</h1>;
You can freely use JavaScript expressions in JSX. Expressions in JSX should be enclosed in curly braces.
const name = 'Tina';
const element = (
<div>
Hello, {
name}!
</div>
);
1.5 JS syntax
React provides a createElement method to create a virtual DOM. The method receives 3 parameters. The first parameter is the label name, the second is the label attribute, and the third is the label content.
const dom = React.createElement('h1','','hello,word!')
2. Project construction
Create a project using scaffolding
npx is the running tool for webpack
npx create-react-app my-app
cd my-app
npm start
Add routing library react-router-dom
npm i react-router-dom
3.Components
An application/section/page is used to implement a certain partial function (including html, js, css, etc.) and these partial functions are assembled together to form a component. In React, the smallest granularity of a component is a label element
3.1 Create components
-
Define components with functions
function HelloMessage(props) { return <h1>Hello World!</h1>; } -
Use Class to define components
class HelloMessage extends React.Component { render() { return <h1>Hello World!</h1>; } }
4.State state
React treats components as a state machine. By interacting with the user, different states are achieved, and then the UI is rendered to keep the user interface and data consistent.
In React, you only need to update the component's state, and then re-render the user interface based on the new state (without manipulating the DOM).
In React, we can add a class constructor to the component (component defined by Class) to initialize the state this.state. Class components should always use props to call the basic constructor.
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'World'};
}
render() {
return <h1>Hello {
this.state.name}!</h1>;
}
}
Changing the name attribute of the component can change the page rendering result
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'World'};
}
nameChange(){
this.setState({
name:'Tina'
})
}
render() {
return <div>
<h1>Hello {
this.state.name}!</h1>
<button onClick={
()=>{
this.nameChange()}}>变身</button>
</div>;
}
}