react学习

react项目需要node.js在14以上
1、创建项目

2、安装依赖

npm i antd redux react-redux react-router-dom@6 axios less less-loader@6.0.0 --save

3、简单使用
（src目录下文件全部删除，然后新建）
index.js

import  ReactDOM  from "react-dom";
import App from'./App'
ReactDOM.render(
<App/>,
 document.getElementById('root')
)

app.jsx

//类组件
import React ,{Component,Fragment} from "react";
class App extends Component {
    // 示例数据
   state={
    arr:['张三','李四','王五']
   } 
 render(){
  return (
    <>
    <h2>app</h2>
     <ul>
     {
        this.state.arr.map((item,index)=>{
            return (
                <Fragment key={index}>
                 <li> {item} </li>
                 <span>大大大大大大</span>
                </Fragment>
            )
        })
     }
     </ul>
    </>
  )
    }
}

export default App;

效果：

import React ,{useState,Fragment} from "react";
function App(){
  const [arr,setArr] =useState(["刘备","关羽","张飞"])
  return(
    <ul>
      {
        arr.map((item,index)=>{
          return(
            <Fragment  key={index}>
             <li>{item}</li>
             <span>大兜奥克兰</span>
            </Fragment>
          )
        })
      }
    </ul>
  )
}
export default App;

Fragment空标签 render()输入html