react is a framework for building user pages, which consists of four major parts:
- react: core library,
- React dom: dom operation (using jsx to operate dom elements)
- React Router: route (similar to vueRouter)
- redux: centralized state management (similar to vuex)
react features:
1) Declarative creates user pages in a form similar to writing html tags. It drives view changes through data. If the data changes, it can quickly update the dom
2) Componentization (react core) Packaging components can realize reuse, make the business logic look clearer, and make the whole project more convenient to modify and save time
3) Learn once and use everywhere Three main directions of development:
Use react / rect DOM to develop Web applications Use react / react native to develop the mobile terminal native application RN Use react to develop VR (virtual reality) applications (react/react360)
Create react project mode 1
First install the scaffold kit Command: npm i -g create-react-app Use scaffolding tools to create projects Command: create-react-app Project name
Creation method 2
Direct use npx To create a project npx create-react-app Project name
Difference: the latter does not need to update the react version frequently. It gets the latest version
To use react
- Import package: React, ReactDOM
- Create react element
- Render elements to a dom
To create a react element
Format of React.createElement:
React.createElement('tag name ', {attribute 1 on tag: value 1}, child element 1, child element 2)
Precautions for JSX
- jsx must have a root node, which can write < > < / >
- Attribute names cannot use keywords in js. For example, class, for Class instead of className For instead of htmlFor
- Single label to be closed
- For line feed, it is recommended to use () package and render the contents in () as a whole
- The old version (16.8) introduced react before using jsx
Format of embedded expression
{JS expression} similar to vue interpolation expression {{}}
What can be written in single curly braces?
expression Definition: combination of data type and operator (data type can appear separately or data type+(combination of operators) Features: it has a value (or can calculate a value); Can be console.log() other jsx expression notes
Can't write
- object
- js statement: if statement / switch case statement / variable declaration statement
JSX conditional rendering
- if/else
- Ternary operator
- Logical and (& &) operators
- switch case
JSX list rendering
Generating HTML structures using the map method of arrays in JSX
// Normal rendering structure
// const element = (
// <div className="App">
// <div className="comment-container">
// {/ * comments * /}
// <div className="comment-head">
// <span>{state. List. Length} comments</span>
// </div>
// {/ * sort * /}
// <div className="tabs-order">
// <ul className="sort-container">
// {state.tabs.map((item) => (
// <li
// className={item.type === state.active ? 'on' : ''}
// key={item.id}>
// Sort by {item.name}
// </li>
// ))}
// {/ * < Li classname = "on" > sort by {heat} < / Li > * /}
// {/ * < li > sort by time < / Li > * /}
// </ul>
// </div>
// {/ * add comment * /}
// <div className="comment-send">
// <div className="user-face">
// <img className="user-head" src={avator} alt="" />
// </div>
// <div className="textarea-container">
// <textarea
// cols="80"
// rows="5"
// placeholder = "windup friendly comments"
// className="ipt-txt"
// />
// < button classname = "comment submit" > comment < / button >
// </div>
// <div className="comment-emoji">
// <i className="face" />
// < span classname = "text" > expression</span>
// </div>
// </div>
// {/ * comment list * /}
// {state.list.map((item) => (
// <div className="comment-list" key={item.id}>
// <div className="list-item">
// <div className="user-face">
// <img className="user-head" src={item.img} alt="" />
// </div>
// <div className="comment">
// <div className="user">{item.author}</div>
// <p className="text">{item.comment}</p>
// <div className="info">
// <span className="time">{item.time}</span>
// <span className={item.attitude === 1 ? 'like liked' : 'like'}>
// <i className="icon" />
// </span>
// <span className="hate hated">
// <i className="icon" />
// </span>
// < span classname = "reply BTN hover" > delete</span>
// </div>
// </div>
// </div>
// {/* <div className="list-item">
// <div className="user-face">
// <img className="user-head" src="./images/avatar.png" alt="" />
// </div>
// <div className="comment">
// <div className="user">Sisyphus watch < / div >
// <p className="text">This video is so funny</p>
// <div className="info">
// <span className="time">2021-10-08 09:05:00</span>
// <span className="like liked">
// <i className="icon" />
// </span>
// <span className="hate hated">
// <i className="icon" />
// </span>
// <span className="reply btn-hover">Delete</span>
// </div>
// </div>
// </div> */}
// </div>
// ))}
// </div>
// </div>
// )key in list rendering
It is a unique value (as long as it is not repeated). If there is id, use id, and if there is no id, use index instead
If there is a key, a dom will be added later. If there is no key, it will be compared one by one, which will consume performance
JSX style processing
Inline style writing:
< DOM element style = {{CSS attribute 1: value 1,css attribute 2: value 2} > < / DOM element >
main points:
- Why are there two {}}
- The {} of the outer layer indicates that you are going to start writing js
- The {} representation of the inner layer is an object
- The attribute name is in small hump format (background color = = = > backgroundColor)
- The attribute value is a string. If the unit is px, you can abbreviate the value
Use the className class name to write styles
- Define the class name with className (not class)
- Write the style in an additional. css file and then import it into the. css file
Import local pictures
If you find that it cannot be displayed, use import to use it
import avatar from './images/avatar.png'