1. The basic use of react
Installation command (two packages)
: npm i react react-dom
React is the core, providing the function of creating element components.
The react-dom package provides dom-related functions, etc.
The first step is to introduce react and react-dom into the page.
The second step is to create a react element
Method 1 (not commonly used)
const react element title = react.createElement(' element name' 'h1', element attribute null/ {id: 'p1 '}, ' element's child node' 'Hello React')
Method 2 (commonly used)
ReactDOM.render()
The third step is to render the react element to the page
ReactDOM.render ( the title of the react element to be rendered , ' mount point ' document.getElementById('root'))
2. The use of react scaffolding
Initialize the project, command: npx create-react-app project name my-app
Project start, command: npm start
3. Use react in react scaffolding
Create in index.js
import react and react-dom two packages
import React from 'react'
import ReactDOM from 'react-dom'
create react element
const title = React.createElement('h1',null,'Hello React!!!')
Render the react element
ReactDOM.render(title,document.getElementById('root'))
4.jsx
Shorthand for javaScript XML, which means writing xml format code in JavaScript code
5. Basic use of jsx
const title = React.createElement('h1',null,'Hello React !!!')
就等于
const title = <h1>Hello React!!!</h1>
6. Precautions for jsx
The attribute name of the react element uses the hump naming method.
Special attribute names: class->className, for->htmlFor, tabindex->tabIndex
can use parentheses to wrap jsx.
If there is no child node, you can use a /> to end it directly. It is a single tag
If you want to embed a js expression in jsx, you can insert a single curly brace to insert
7. Conditional rendering of jsx
You can first create a function with js conditional statement in it, and then embed this method in jsx
8. jsx list rendering
First use curly braces to wrap the whole (so that native js can be written inside), then go to the loop, and then use an arrow function to write the looped content. When looping, there must be a key value, key value Who will facilitate who will add
9. JSX style processing
Add styles by class name. Give a className and write the style in the css file, and finally import the css file.
10. react component
Function components: components created using js functions (arrow functions)
Two conventions of function components
1: The function name must start with an uppercase letter
2: The function component must have a return value, indicating the structure of the component.
If the return value is null, it will be render nothing
11. Use functional components
Rendering function component: use the function name as the component tag name and put it in the first parameter of the rendering function step ( that is, write a tag ), which can be a single tag or a double tag ( just a single tag will do )
12. Class components
Components created using es6 classes
Four conventions for class components
1: The class name must start with a capital letter
2: The class component should inherit the React.Component parent class, so that methods or properties provided in the parent class can be used
3: The class component must provide the render() method
4: The render() method must have a return value, representing the structure of the component
13. Creation of react components
If there are too many components, put them in your own separate js file
1. Create Hello.js
2. Import React in Hello.js
3. Create a component ( function or class )
4. Export the component in Hello.js
5. In Import the Hello component in index.js
6. Render the component