1. 什么是 React
组件化
函数就是组件，组件就是函数（因为我基本不用 class 组件）
- React 提供了一种全新的语法扩展：
JSX - 创造性地将
渲染逻辑和UI 逻辑结合在一起 - 这个结合体在 React 中，就成为组件
- 组件化的出现，大幅度提升了代码的复用率
一次学习，随处编写
学会后，可以在很多地方使用 React 语法来写代码
- 配合
React写 web 页面 - 配合
React Native写 手机客户端 APP - 配合
React 360写 VR界面
2. 安装 node、yarn、npm
2.1 安装 node
- 下载包
wget https://nodejs.org/dist/v22.11.0/node-v22.11.0-linux-x64.tar.xz
（或者百度网盘 链接: https://pan.baidu.com/s/1sfOQPiIc_r2Cgqzl1SF6vQ?pwd=3vsu 提取码: 3vsu）
-
安装
xzapt-get install xz-utils -
解压
tar xf node-v22.11.0-linux-x64.tar.xz -
设置环境变量
export PATH=node-v22.11.0-linux-x64/bin$PATH
2.2. 安装 yarn
npm install --global yarn
3. 开始一个 React 项目
3.1 安装 create-react-app
yarn global add create-react-app
3.2 创建一个 React 项目
create-react-app react-demo
react-demo 是项目名（不要有大写，会给你个报错）
3.3 本地运行项目
cd react-demo
yarn start
使用指定的host 和port 启动服务
HOST=0.0.0.0 PORT=22 npm start
3.4 写代码
- 修改文件
public/index.html为如下内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我的第一个 React 项目</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- 修改文件
src/index.js为如下内容
import React from 'react'
import ReactDOM from 'react-dom'
//
const App = () => {
return (
<h1>第一个 React项目</h1>
)
}
//
ReactDOM.render(<App />, document.getElementById('root'))