创建一个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 = falselet 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的基本语法就全部展示完了