创建 React 18 脚手架项目
-
全局安装
create-react-app
-
npm install -g create-react-app
-
yarn global add create-react-app
.
-
-
确认是否已安装 create-react-app
-
npm list -g create-react-app
-
yarn global list | grep create-react-app
.
-
-
如果安装失败
有时,npm 或 yarn 的缓存可能会导致问题。你可以尝试清理缓存并重新安装create-react-app
:-
npm cache clean --force
npm install -g create-react-app
-
yarn global remove create-react-app
yarn global add create-react-app
或者检查是否有多个版本的 Node.js
nvm list
nvm use xxx
.
-
-
查看react版本
-
npm list react
或简写npm ls react
仅显示版本号:
npm list react --depth=0
-
yarn 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.js
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );
- 挂载到主页面
public/index.html
<body> <div id="root"></div> </body>
- 组件
App.js
被渲染到页面
对项目稍微改造下,删除一些目前不必要的文件,结构和代码如下: