创建 React 18 脚手架项目
全局安装
create-react-appnpm install -g create-react-appyarn global add create-react-app
.
确认是否已安装 create-react-app
npm list -g create-react-appyarn global list | grep create-react-app
.
如果安装失败
有时，npm 或 yarn 的缓存可能会导致问题。你可以尝试清理缓存并重新安装create-react-app：npm cache clean --forcenpm install -g create-react-appyarn global remove create-react-appyarn global add create-react-app
或者检查是否有多个版本的 Node.js
nvm listnvm use xxx
.
查看react版本
npm list react或简写npm ls react仅显示版本号：
npm list react --depth=0yarn list react或简写yarn ls react仅显示版本号：
yarn list react --depth=0
.
创建新的React项目
使用
create-react-app命令来创建一个新的React项目。例如，如果你想要创建一个名为
my-react-app的项目，可以运行以下命令：create-react-app my-react-app
运行项目
进入目录：
cd my-react-app运行项目：
yarn start
目录结构
各文件的描述：
my-react-app/
├── node_modules/ # 项目依赖包，由npm或yarn管理
├── public/
│ ├── favicon.ico # 网站页签图标
│ ├── index.html # 主页面，承装各个组件
│ ├── logo192.png # logo图
│ ├── logo512.png # logo图
│ ├── manifest.json # 应用加壳的配置文件，用于网页移动端
│ ├── robots.txt # 爬虫协议文件
├── src/
│ ├── App.css # App组件的样式
│ ├── App.js # App组件，主组件，所有其他的组件都在这里进行引入
│ ├── App.test.js # 用于给App做测试
│ ├── index.css # 全局样式
│ ├── index.js # 入口文件，引入核心库App.js，程序的入口
│ ├── logo.svg # logo图
│ ├── reportWebVitals.js # 页面性能分析文件（需要web-vitals库的支持）
│ ├── setupTests.js # 配置和初始化测试环境
├── .gitignore # Git仓库的忽略文件
├── package-lock.json # 锁定和管理项目的依赖版本，确保项目的稳定性和可维护性
├── package.json # 定义项目所需的各种模块及项目的配置信息
└── README.md # 项目信息描述文件
- 程序入口文件
src/ index.jsconst root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); - 挂载到主页面
public/index.html<body> <div id="root"></div> </body> - 组件
App.js被渲染到页面
对项目稍微改造下，删除一些目前不必要的文件，结构和代码如下：
