1. JSX syntax
JSX adds HTML syntax directly to JavaScript code, and then converts it to pure JavaScript through a translator before being executed by the browser. In actual development, JSX has been compiled into pure JavaScript during the product packaging stage, which will not bring any side effects, but will make the code more intuitive and easy to maintain. The compilation process is implemented by Babel's JSX compiler.
The writing method before react18 is:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div>11111
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"))
But when we use the react18 version, we will be prompted for such an error
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
So we need to rewrite as:
import {
createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
class App extends React.Component {
render() {
return (
<div>11111
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
</div>
)
}
}
root.render(<App />)
Regarding how VScode can display html tags in jSX, we only need to configure (these five steps are enough):
2. Class components and function components
The addition of ES6 allows JavaScript to directly support the use of class to define a class. The way react creates components is the inheritance of the class used. ES6 class is currently the official recommended way to use it. It uses the ES6 standard syntax to build. See the following code:
here It exposes a Header class component (01class.js)
import React, {
Component } from 'react'
export default class Header extends Component {
render() {
return (
<div>
<div>我是头部</div>
</div>
)
}
}
Here is a Body function component (02function.js) exposed to the outside
const Body = () => {
return (
<div>我是身体内容</div>
)
}
export default Body
After that, we only need to introduce it in the root component index.js to use it (note that the name of the component must start with a capital letter, otherwise an error will be reported)
import React from 'react'
import {
createRoot } from 'react-dom/client';
import Header from './01class'
import Body from './02function'
const root = createRoot(document.getElementById('root'));
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
<Header></Header>
<Body></Body>
</div>
)
}
}
root.render(<App />)
The difference between functional components and class components:
Functional components are also called stateless components. Before 16.8, there was no state, but after 16.8, react hooks were introduced to write the state. Class components can write state and properties.
3. The style in the component
First of all, we need to know how to add variable attributes to virtual dom, and we need to use expressions to pass in { } to achieve:
import React, {
Component } from 'react'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
</div>
)
}
}
Note that it must be an expression.
You can first define an object in the form of:
import React, {
Component } from 'react'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
const obj = {
//驼峰式命名
backgroundColor: "red"
}
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
{
/* 注意{ }不能删去 */}
<p style={
obj}>2222222222222222</p>
</div >
)
}
}
To add inline styles to virtual dom, you need to use expressions to pass in style objects:
{
/* 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 */}
<p style={
{
color: 'red', fontSize: '14px' }}>1111111111111111111</p>
Class writing:
React recommends that we use inline styles, because React thinks that each component is an independent whole. In most cases, we still add a lot of class names to elements, but it should be noted that class needs to be written as className (because After all, you are writing js-like code, you will receive js rules now, and class is a keyword)
Supplement: (class ==> className , for ==> htmlFor(label))
import React, {
Component } from 'react'
import './css/01index.css'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
const obj = {
backgroundColor: "red"
}
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
<p className='active'>333333333333333</p>
</div >
)
}
}