创建一个react应用
这里使用create-react-app的脚手架构建项目（结构简洁，基于webpack-cli），
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的基本语法就全部展示完了
