创建react应用程序_创建React应用程序简介

创建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

This is when it finished running:

这是它完成运行的时间：

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 。

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 the build folder, ready to be deployed to a server

  npm run build ：在build文件夹中构建React应用程序文件，准备将其部署到服务器上

• npm test: to run the testing suite using Jest

  npm test ：使用Jest运行测试套件

• npm eject: to eject from create-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个新文件夹。 这些包含所需的所有配置，现在您可以开始对其进行编辑。

翻译自: https://flaviocopes.com/react-create-react-app/

创建react应用程序