react学习(一)-初始项目

最新推荐文章于 2024-12-10 22:12:02 发布

chengyu_wang

最新推荐文章于 2024-12-10 22:12:02 发布

阅读量584

点赞数

分类专栏： javascript学习笔记文章标签： react 脚手架入门

本文链接：https://blog.csdn.net/qq_17347575/article/details/79928465

版权

本文介绍了如何使用React官方脚手架初始化项目，包括安装脚手架、项目初始化的步骤，以及解析了`registerServiceWorker.js`文件的作用和项目中的四个核心命令：start、build、test和eject。通过`yarn start`进行开发，`yarn build`用于项目打包，`yarn test`执行测试，而`eject`则会暴露项目的详细配置，让开发者拥有更多灵活性。

摘要由CSDN通过智能技术生成

安装脚手架

开始一个项目，我们一般都希望使用最快最简单的方式来快速生成项目结构，然后在此基础上进行快速的开发。这个时候就要使用脚手架了，也就是根据现在的社区经验，得出来最佳初始实例。使用 react开发的时候，我们就可以使用官方提供 create-react-app 脚手架来进行快速的开发。

这里我们使用 npm 来进行安装。

npm install -g create-react-app

# 国内用户建议使用 cnpm 进行安装
cnpm install -g create-react-app

稍等片刻我们就可以看到 create-react-app安装结束，这个时候我们就可以使用它进行脚手架的搭建了。

初始化项目

我们可以运行create-react-app来进行项目的初始化

# 使用这条命令来初始化一个项目， $projectName 指的是项目的名字
create-react-app $projectName

初始化项目图片

当看到这里的时候就说明项目已经初始化成功了。同时我们可以看到四条script命令

yarn start
yarn build
yarn test
yarn eject

这四条命令是脚手架提供的，我们可以试试。当然，我们也可以使用 npm 来执行这些命令

npm run start
npm run build
npm run test
npm run eject

首先，进行到项目目录中。

cd $projectName

项目结构

.
├── README.md # 当前脚手架的说明文档，里面详细的介绍了脚手架的信息
├── node_modules # 包的安装目录
├── package.json # 项目信息
├── public # 静态资源
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json # PWA的配置文件
├── src # 代码目录，主要在里面进行开发，可以在里面自由修改目录结构
│   ├── App.css # 样式
│   ├── App.j

最低0.47元/天解锁文章