创建react应用程序
create-react-app
is a project aimed at getting you up to speed with React in no time. It provides a ready-made React application starter, so you can dive into building your app without having to deal with Webpack and Babel configurations.
create-react-app
是一个旨在立即使您熟悉React的项目。 它提供了一个现成的React应用程序启动器,因此您无需考虑Webpack和Babel配置就可以深入构建应用程序。
It provides out of the box:
它提供了开箱即用的功能:
- a development server with hot reloading 具有热重载的开发服务器
- provides a testing environment with Jest 用Jest提供测试环境
- allows to build the React app 允许构建React应用
- ready for ES6+ syntax 准备使用ES6 +语法
- bundles all your JavaScript and assets 捆绑您所有JavaScript和资产
- comes with CSS autoprefixer, SASS and CSS Modules support 带有CSS自动前缀,SASS和CSS模块支持
- and more! 和更多!
You start by using npx
, which is an easy way to download and execute Node.js commands without installing them. npx
comes with npm
(since version 5.2) and if you don’t have npm installed already, do it now from https://nodejs.org (npm is installed with Node).
首先使用npx
,这是一种无需安装即可下载和执行Node.js命令的简便方法。 npx
随附npm
(自5.2版开始),如果尚未安装npm,请立即从https://nodejs.org进行安装(npm与Node一起安装)。
If you are unsure which version you have, I recommend checking out if you need to update.
如果不确定所使用的版本,建议您检查是否需要更新。
Tip: check out my terminal tutorial at https://flaviocopes.com/macos-terminal/ if you’re unfamiliar with it
提示:如果您不熟悉我的终端机教程, 请访问https://flaviocopes.com/macos-terminal/
When you run npx create-react-app <app-name>
, npx
is going to download the most recent create-react-app
release, run it, and then remove it from your system. This is great because you will never have an outdated version on your system, and every time you run it, you’re getting the latest and greatest code available.
当运行npx create-react-app <app-name>
, npx
将下载最新的create-react-app
版本,运行它,然后将其从系统中删除。 这很棒,因为您的系统上永远不会有过时的版本,并且每次运行它时,您都可以获得最新,最好的代码。
Let’s start then:
让我们开始:
npx create-react-app todolist
![](https://flaviocopes.com/react-create-react-app/create-react-app-running.png)
This is when it finished running:
这是它完成运行的时间:
![](https://i-blog.csdnimg.cn/blog_migrate/328b62c1441fbffe8b57f7d9941d043b.png)
create-react-app
created a files structure in the folder you told (todolist
in this case), and initialized a Git repository.
create-react-app
在您指定的文件夹(在本例中为todolist
中创建了一个文件结构,并初始化了一个Git存储库。
It also added a few commands in the package.json
file, so you can immediately start the app by going into the folder and run npm start
.
它还在package.json
文件中添加了一些命令,因此您可以通过进入文件夹并运行npm start
立即启动应用npm start
。
![](https://i-blog.csdnimg.cn/blog_migrate/221e71915a4bb5fa6eb17d1e119a3c50.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e4ca86dbd2986285cf2ac88806e3bf10.png)
In addition to npm start
, create-react-app
added a few other commands:
除了npm start
, create-react-app
还添加了一些其他命令:
npm run build
: to build the React application files in thebuild
folder, ready to be deployed to a servernpm run build
:在build
文件夹中构建React应用程序文件,准备将其部署到服务器上npm test
: to run the testing suite using Jestnpm test
:使用Jest运行测试套件npm eject
: to eject fromcreate-react-app
npm eject
:从create-react-app
弹出
Ejecting is the act of deciding that create-react-app
has done enough for you, but you want to do more than what it allows.
退出是决定create-react-app
对您已经足够完成的动作,但是您想要做的事情超出其允许的范围。
Since create-react-app
is a set of common denominator conventions and a limited amount of options, it’s somewhat guaranteed that at some point your needs will require you something unique that outgrows the capabilities of create-react-app
.
由于create-react-app
是一组通用的分母约定,并且选项数量有限,因此可以保证在某些时候您的需求将需要一些独特的东西,而这些东西超出了create-react-app
。
When you eject, you lose the ability of automatic updates but you gain more flexibility in the Babel and Webpack configuration.
弹出时,您将失去自动更新的能力,但在Babel和Webpack配置中获得了更大的灵活性。
When you eject the action is irreversible. You will get 2 new folders in your application directory, config
and scripts
. Those contain all the configuration you need and now you can start editing it.
当您弹出时,动作是不可逆的。 您将在应用程序目录, config
和scripts
获得2个新文件夹。 这些包含所需的所有配置,现在您可以开始对其进行编辑。
创建react应用程序