react common syntax

Creation and rendering of class components:


import React from "react";
 
 class Hellow extends React.Component{
   render(){
     return  <div>这是个类组件</div>
   }
 }
function App() {
  return (
    <div className="App">
    <Hellow></Hellow>
    </div>
  );
}
 
export default App;

Class component names must also start with an initial capital letter

Class components should inherit the React.Component parent class to use the properties and methods provided in the parent class

Class components must provide Rander(), and Rander must have a return value, representing the group key UI structure

Syntax: on+event name={event handler}, for example: <div onClick={()=>{}}></div>

Note: React uses camel case naming .

<div className={style.img_icon} onClick={
    fun(参数名)
}>
<img src={require("../assets/liebiao.png")} alt="" />
    <p>订单列表</p>
</div>

Import pictures:

 <img src={require("../assets/jinat.png")}alt=""/>

Declare variables:

import React, { useState } from "react";   //引入
const [arr, setarr] = useState("");        //第一个变量，在html中或者console时使用，后面未赋值时使用

React declares variables differently than Vue.

Assignment is also different:

setarr(数据名);

In react content-aware tags:

dangerouslySetInnerHTML={
   
   { __html: 元素名 }}

Code format in react:

export default function Home() {
    //书写JavaScript
	return(
	<div>
		//书写内容，结果
	</div>
   )
}

Request interface mount phase: the latter parameter is the content of the useEffect function that is executed when an element changes. If the latter default parameter is not written, it will be executed infinitely.

引入：import { useEffect } from "react";
useEffect(() => {

},[]）

How to prevent css conflicts in react:

名称.module.css

Guess you like