react基础语法，模板语法，ui渲染，jsx，useState状态管理

创建一个react应用

这里使用create-react-app的脚手架构建项目（结构简洁，基于webpack），

npx create-react-app [项目名称]

使用其他脚手架构建项目可以参考：react框架，使用vite和nextjs构建react项目_vite + react+js项目构建-CSDN博客

 

成功构建后只需要关注两个部分，package.json中的script脚本，start：启动项目

src中的核心文件，index.js: 引入react的依赖,   App.js：根组件

可以先去除多余的文件

index.js

import React from 'react'; // 引入React库
import ReactDOM from 'react-dom/client'; // 引入ReactDOM库
import App from './App'; // 引入App组件


const root = ReactDOM.createRoot(document.getElementById('root')); // 创建根节点
root.render(
  // 严格模式，排错
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

app.js

function App() {
  return (
    <div className="App">
      <h1>react基本语法</h1>
    </div>
  );
}

export default App;

以上是精简后的文件目录和文件内容，可以看出核心的引入库为react和react-dom，整个框架也是完全基于js生成的

模板语法

模板语法就是在html结构中使用js变量渲染数据，

function App() {
  const title = '标题'
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
    </div>
  );
}

export default App;

我们在App组件（函数）定义一个变量，并使用{}插入html结构中，{}的功能就是将html环境转换成js环境 ，

 出来再标签外插值，还可以再标签内设置属性，最终都会变成html的结构

function App() {
  const title = '标题'
  const box = 'box'
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
    </div>
  );
}

export default App;

组件渲染时要注意的几点：

• 一个组件中返回的html结构只能有一个外标签，可以使用<div></div>,<></>,它们的区别是一个最终会被div包裹，一个则不会有任何标签再外圈（template）
• 对标签元素设置类时使用className而不是class（防止和es6的class关键字搞混）
• 插入对象时使用{{}}，这表示{}中插入的是对象，最常用的就是style属性

 列表渲染和条件渲染

function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
    </div>
  );
}

export default App;

使用数组中的数据进行列表循环渲染时，使用map方法，map方法有返回值，可以将html的结构返回出来直接插入到组件的渲染结构中（虚拟节点），

function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  
  let show = false
  let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
  
  

  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      {content}
    </div>
  );
}

export default App;

当show为true和false时，span中的内容会相应发生改变，

可以看出在react中循环和条件都是基于原生js的方法实现的

jsx

        jsx语法是js和XML结合的语法，它允许再js中使用类似Html的标签元素作为值，类似于数字，字符串，要注意jsx的标签并不是字符串，所以复制时不需要添加引号，同时使用return返回jsx的标签时，要使用（）包裹，因为不使用（）js的语法会认为再return这一行函数就结束了，不会读取到后续内容

let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>

 return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      {content}
    </div>
  );

 

同时你也可以将文件改成jsx后缀，因为react集成了jsx语法，所以使用js也可以成功识别出jsx

状态管理

这里用上了一个hooks钩子函数 ，useState,

const [show, setShow] = useState(false)

它接受一个任意值，返回一个数组，里面包含一个由任意值生成的状态（响应式变量），和这个状态（响应式变量）的修改方法，

比如上面修改的show变量，使用useState接受false布尔值，复制给show，同时生成setShow方法用来重新赋值show，因为show是只读的不可被直接修改，

import { useState } from "react"

function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  
  const [show, setShow] = useState(false)
  let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
  function fn() {
    setShow(!show)
  }
  

  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      <button onClick={fn}>click</button>
      {content}

    </div>
  );
}

export default App;

此时点击按钮，会改变文字内容

注意：onclick接受一个函数名或者函数体，接受函数名时不能带括号，如果需要传参应该写成函数体的格式

 <button onClick={()=>fn()}>click</button>

 

 

到这里react的基本语法就全部展示完了