“ create-react-app”和创建React应用程序的未来

Over the past few years, I’ve been heavily involved with teaching people how to build applications with React.js. First there was React Week, held way back in March of 2015. Then came Egghead. Then came React.js Program.

在过去的几年中，我一直在教人们如何使用React.js构建应用程序。 首先是2015年3月举办的React Week ，然后是Egghead 。 然后是React.js程序 。

Throughout all of these workshops, one thing was consistent: getting started with a React application was pretty overwhelming, for both beginners and senior developers alike.

纵观所有的这些研讨会，有一点是一致的：开始使用一个应用程序做出React是相当铺天盖地 ，对于初学者和高级开发人员的一致好评。

Yes, we’re building better quality apps than we’ve ever built. Yes, even a few years ago we had nothing comparable to the tooling we have now. Yes, the end result is worth it . But that doesn’t make it any easier for someone who just wants to get to “Hello World.”

是的，我们正在构建质量更高的应用程序。 是的，即使在几年前，我们所拥有的工具也无法与现在相比。 是的，最终结果值得。 但这对于想进入“ Hello World”的人来说并没有那么容易。

This is why I’m excited about “create-react-app”.

这就是为什么我对“ create-react-app”感到兴奋的原因。

“create-react-app” is an official command line interface (CLI) for building React applications with no build configuration.

“ create-react-app ”是用于构建没有构建配置的React应用程序的官方命令行界面(CLI)。

To get started, do this:

首先，请执行以下操作：

npm install -g create-react-appcreate-react-app Awesome

You’ll get output that looks like this:

您将获得如下所示的输出：

This is huge! If you’re just getting started with React, you should probably take a break and just relish this moment.

太好了！ 如果您刚刚开始使用React，那么您应该休息一下，享受一下这一刻。

Now, when you build a React app, you don’t need to know the secret combination of Webpack and Babel. You can just focus on what you really care about: building the actual app.

现在，当您构建一个React应用程序时，您不需要知道Webpack和Babel的秘密组合。 您可以专注于真正关心的事情：构建实际的应用程序。

If we cd into our Awesome project, we’ll have a folder structure that looks like this:

如果我们用cd命令进入我们的真棒项目，我们将有一个文件夹结构，看起来像这样：

Awesome/  README.md  index.html  favicon.ico  node_modules/  package.json  src/    App.css    App.js    index.css    index.js    logo.svg

and a very minimal package.json:

和一个非常小的package.json：

{   “name”: “Awesome”,   “version”: “0.0.1”,   “devDependencies”: {     “react-scripts”: “0.1.0”   },   “dependencies”: {     “react”: “^15.2.1”,     “react-dom”: “^15.2.1”   },   “scripts”: {     “start”: “react-scripts start”,     “build”: “react-scripts build”,     “eject”: “react-scripts eject”   }}

You’ll notice you have three options: start, build, and eject.

您会注意到有三个选项： start ， build和弹出 。

start is what you’re probably already familiar with. It will start up a local development server on localhost:3000

开始就是您可能已经熟悉的内容。 它将在localhost：3000上启动本地开发服务器

build will prep your app for production by correctly bundling React in production mode (by setting NODE_ENV to “production”), minifying your code (with filename hashing), and outputting the result to a build folder.

build将通过在生产模式下正确捆绑React(通过将NODE_ENV设置为“ production”)，最小化代码(使用文件名哈希)并将结果输出到build文件夹，为您的应用做好生产准备。

eject is the interesting one. Our friends over on the React team are pretty smart, and they didn’t want you to be “locked in” to their specific configurations for the lifetime of this project. Because of this, you have the ability to “eject.”

弹出是有趣的。 我们React团队中的朋友非常聪明，他们不希望您在此项目的整个生命周期中都“锁定”他们的特定配置。 因此，您可以“弹出”。

eject will take all of the default configuration and build dependencies given to you by create-react-app, then move them into the project itself. This way your project can continue from exactly where it is. But now you’ll have the ability to modify any of the default configurations you were given by create-react-app.

弹出将采用所有默认配置并建立由create-react-app提供给您的依赖项，然后 将它们移入项目本身。 这样，您的项目可以从原样继续进行。 但是，现在您可以修改create-react-app提供的任何默认配置。

The downside of eject is that once you run it, you can’t go back.

弹出的缺点是，一旦运行它，就无法返回。

To see this in action, if you run npm run eject, your package.json file changes from the code above, to this:

要查看实际情况，如果您运行npm run exit ，那么package.json文件将从上面的代码更改为：

{  "name": "Awesome",  "version": "0.0.1",  "devDependencies": {    "autoprefixer": "6.3.7",    "babel-core": "6.10.4",    "babel-eslint": "6.1.2",    "babel-loader": "6.2.4",    "babel-plugin-syntax-trailing-function-commas": "6.8.0",    "babel-plugin-transform-class-properties": "6.10.2",    "babel-plugin-transform-object-rest-spread": "6.8.0",    "babel-plugin-transform-react-constant-elements": "6.9.1",    "babel-preset-es2015": "6.9.0",    "babel-preset-es2016": "6.11.3",    "babel-preset-react": "6.11.1",    "chalk": "1.1.3",    "cross-spawn": "4.0.0",    "css-loader": "0.23.1",    "eslint": "3.1.1",    "eslint-loader": "1.4.1",    "eslint-plugin-import": "1.10.3",    "eslint-plugin-react": "5.2.2",    "extract-text-webpack-plugin": "1.0.1",    "file-loader": "0.9.0",    "fs-extra": "^0.30.0",    "html-webpack-plugin": "2.22.0",    "json-loader": "0.5.4",    "opn": "4.0.2",    "postcss-loader": "0.9.1",    "rimraf": "2.5.3",    "style-loader": "0.13.1",    "url-loader": "0.5.7",    "webpack": "1.13.1",    "webpack-dev-server": "1.14.1"  },  "dependencies": {    "react": "^15.2.1",    "react-dom": "^15.2.1"  },  "scripts": {    "start": "node ./scripts/start.js",    "build": "node ./scripts/build.js"  }}

And our folder structure now looks like this:

现在，我们的文件夹结构如下所示：

Awesome/  README.md  index.html  favicon.ico  node_modules/  package.json  src/    App.css    App.js    index.css    index.js    logo.svg scripts/    build.js    start.js    openChrome.applescript config/    babel.dev.js    babel.prod.js    eslint.js    webpack.config.dev.js    webpack.config.prod.js

So it’s just like we described above: all of the configuration settings that were abstracted from us earlier have now been moved into our project, so we have direct control over them from that point on.

因此，就像我们上面描述的那样：先前从我们这里抽象出来的所有配置设置现在都已移到我们的项目中，因此从那时起我们就可以直接对其进行控制。

There are some other great features, besides just the ability to “eject.” I think the main goal of this project was to take the “most common denominator” features, if you will, and tie them into a CLI.

除了“弹出”功能外，还有其他一些很棒的功能。 我认为该项目的主要目标是采取“最常见的标准”功能，并将其绑定到CLI中。

Out of the box you get:

开箱即用，您将获得：

• React, JSX, ES6 (and some ES+)
  React，JSX，ES6(和某些ES +)
• the ability to import CSS and images directly from JavaScript
  直接从JavaScript导入CSS和图像的能力
• CSS, which is automagically autoprefixed
  CSS，自动进行自动前缀
• a production build script as we talked about earlier
  我们之前提到的生产构建脚本
• a development server, which will lint for common errors
  开发服务器，它将检查常见错误

All of which are pretty fundamental and universal for building a React app.

所有这些对于构建React应用程序都是非常基本和通用的。

Now, with that said, you’ll notice there are some pretty fundamental pieces still missing.

如此说来，您会发现仍然缺少一些非常基本的部分。

It’s difficult to make so many decisions without trudging over the “opinionated” line. This project is opinionated, and with those opinions comes tradeoffs.

不遵循“意见”路线，很难做出如此多的决定。 这个项目是自以为是的，有了这些意见，就需要进行权衡。

The README points out that there’s still no support for the following

自述文件指出，仍然不支持以下内容

• testing
  测试
• server Rendering
  服务器渲染
• some experimental syntax extensions (like decorators)
  一些实验性语法扩展(例如装饰器)
• CSS Modules
  CSS模块
• LESS or Sass
  少或无礼
• hot reloading of components
  组件热装

This might be a deal breaker for some of you. Many of those things have become standard for building a real “production grade” React app. However, if you’re the type of person who is doing Server Side Rendering along with decorators, you’re most likely not the target market here.

对于某些人来说，这可能会破坏交易。 其中许多东西已成为构建真正的“生产级” React应用程序的标准。 但是，如果您是与装饰员一起进行服务器端渲染的人，那么您很可能不是这里的目标市场。

最后的想法 (Final thoughts)

Overall, I’m excited for this project. It benefits the part of the community which desperately needed more guidelines and help getting started while not really affecting everyone else who already had their own process.

总的来说，我为这个项目感到兴奋。 它使社区中急需更多指导方针的部分受益，并帮助入门，而并没有真正影响已经拥有自己流程的其他所有人。

Do I think you should still learn Webpack and Babel? Absolutely. But now, that decision is up to you.

我认为您仍然应该学习Webpack和Babel吗？ 绝对。 但是现在，该决定由您决定。

Originally published at tylermcginnis.com.

最初发布于tylermcginnis.com 。

Follow Tyler McGinnis on Twitter

在Twitter上关注Tyler McGinnis

翻译自: https://www.freecodecamp.org/news/create-react-app-and-the-future-of-creating-react-applications-3c336f29bf1c/