React18快速入门

需要先安装并配置React相关的工具和插件

下载安装Node.js，这里以MacOS Node.js v22.6.0为例
终端命令行检查是否安装成功

node -v
npm -v

Node.js快速入门

npm设置镜像源

#设置为阿里镜像源
npm config set registry https://registry.npmmirror.com
#查看是否生效
npm get registry 

下载并安装WebStorm

使用WebStorm创建React项目，这里命名为my-react-app

打开package.json文件查看如何运行该项目

接着在命令行中运行react-scripts start

接着打开src/index.js文件，可以看到页面内容部分主要是通过加载App.js文件完成的。

1.数据渲染

修改src/App.js文件

//数据渲染事例1
function App() {const divContent = '标签内容'const divTitle = '标签标题'return (<div title={divTitle}>{divContent}</div>);
}export default App;

刷新浏览器可以看到新的修改页面

安装React Developer Tools插件后，当访问基于React构建的网站时，将看到Components和Profiler面板

修改src/App.js文件

//数据渲染事例2
import {Fragment} from 'react'
function App() {const list = [{id:1,name:'Tom'},{id:2,name:'Jack'},{id:3,name:'Brown'},]const listContent = list.map((item) => {return (<li key={item.id}>{item.name}</li>)})return (<Fragment><ul>{listContent}</ul></Fragment>);
}export default App;

2.事件处理

修改src/App.js文件

function App() {function handleClick() {alert('点击了按钮!');}return (<button onClick={handleClick}>按钮</button>);
}export default App;

3.状态处理

修改src/App.js文件

function App() {let divContent = '默认内容'function handleClick() {divContent = '新内容'}return (<div><p>{divContent}</p><button onClick={handleClick}>按钮</button></div>);
}export default App;

点击按钮，我们发现页面中的divContent没有发生变化，为了实现这种变化需要引入useState

修改src/App.js文件

import { useState } from 'react';function App() {const [data,setData] = useState({title:'默认标题',content:'默认内容'})function handleClick() {setData({...data,//展开运算符把上面data的属性展开放到这里来content:'新内容'//只对content做修改})}return (<div><div title={data.title}>{data.content}</div><button onClick={handleClick}>按钮</button></div>);
}export default App;

4.组件间通讯

修改src/App.js文件

function Article({title,detailData}){return (<div><h2>{title}</h2><Detail {...detailData} /></div>)
}function Detail({content,active}){return (<div><p>{content}</p><p>{active ? '激活' : '未激活'}</p></div>)
}function App() {const articleData = {title:'标题1',detailData: {content:'内容1',active:true,}}return (<Article {...articleData} />);
}export default App;

5.各种React Hooks