自己动手搭建React开发环境之五Conclusion

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但react也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章，翻译自codecademy关于React搭建的教程。本篇原文地址：React Setup, Part V: Conclusion。

npm scripts

Great work! You’ve installed and configured Node, npm, React, ReactDOM, Babel, and Webpack. That’s all of the installation that you need!

做得好！你目前已安装并配置好了Node、npm、React、ReactDOM、Babel和Webpack。那也是所有需要安装的东西。

To make these installed parts actually run, you will be using npm command-line scripts. You’ve already used some of these, such as

npm init

and

npm install --save react

.

为了使那些安装的东西能实际运行，你会用到npm脚本命令。你之前也用到过一些，像

npm init

和

npm install --save react

。

You will find that as your applications become more complex, you will need to use more and more verbose command-line scripts. This can become a serious pain!

随着应用越来越复杂，你会发现自己需要更多冗长的脚本命令。这是一个痛点。

Fortunately,

npm scripts

are here to help.

幸运的是，这里

npm scripts

可以提供帮助。

Inside of your package.json file, find the

scripts

object. This object lets you give your command-line scripts easier names, and look them up whenever you forget them!

在package.json文件里，找到

scripts

对象。这个对象允许给脚本命令取一个较短的名字，能让你忘记命令时可以查询到。

Let’s say that you need to use the script

npm run build && npm run git-commit && npm run git-push

. That’s way too much to remember. In package.json, you could add:

假如说你需要

npm run build && npm run git-commit && npm run git-push

这段命令。这太难记住了。不过，在package.json中，你可以添加以下语句：



（译者注：原文存在错误，这里scripts、deploy属性都要加双引号，以符合json语法。）

After that, you only need to type

npm run deploy

, and it will execute the command saved as

deploy

’s value. And even better, you can look up the command in package.json if you forget.

这样做后，你只需敲入

npm run deploy

，就会执行保存为deploy值的命令。更好的是，如果你忘记了，你可以在 package.json中查找。

In package.json, replace the

scripts

object with this:

在package.json中，替换

scripts

对象成下面这样：



译者注：原文存在错误，这里build、start属性同样要加双引号。记住所有package.json文件中的属性都要加双引号。

npm run build

will make webpack perform its transformations.

npm run build

会使webpack执行转变。

npm run start

will start a local server!

npm run start

will also give you the ability to change your app and see the changes automatically, without having to restart the server for each new change.

npm run start

会启动本地服务器。

npm run start

使你在更新之后能直接看到结果，而不必每次做改变时都要重启服务器。

Run a Local React App

Inside of your root directory, create a new directory named

app

. Create two new files inside of

app

: app/index.js and app/index.html.

在根目录下，创建一个叫’app’的目录。在app中创建两个新文件：app/index.js 和app/index.html。

In app/index.html, copy the following code:

在app/index.html，键入如下代码：



In app/index.js, copy the following code:

在 app/index.js中，键入如下代码：



Inside of the

app

folder, create a new folder named

components

. Create a new file inside of app/components named app/components/App.js.

在

app

文件夹內，新建一个

components

的文件夹。在里面创建一个新文件：app/components/App.js。

In app/components/App.js, write a component class. This component class can render whatever you want. Don’t forget to require React at the top of the file, and to set

module.exports

equal to your component class at the bottom of the file.

在app/components/App.js中，写个组件类。这个组件可以渲染任何你想要的。别忘了在文件顶部要引入React，在底部设置

module.exports

等于你的组建类。

In the terminal, type:

在终端，键入：



（译者注：若运行出现以下错误：

Failed to parse json

Unexpected token ‘b’ at 7:5

build: “webpack”,

^

File: E:\html\react\package.json

Failed to parse package.json data.

则可能是因为package.json中属性没有加双引号导致的）

Check for a newly created

build

folder inside of your root directory. The build folder should contain new html and js files: build/index.html and build/transformed.js.

检查根目录下新建的

build

的文件夹。该目录应该包含新的html和js文件：build/index.html和build/transformed.js。

In the terminal, type:

在终端，键入：



Open a new browser tab and navigate to

http://localhost:8080

. See your React component shining gloriously in the sun.

打开一个新浏览器标签，导航到

http://localhost:8080

。你会发现你的React组件在太阳下闪烁着耀眼的光。

In app/components/App.js, make a change to your component class’s render function. Refresh the browser tab and see your change appear on the screen!

在app/components/App.js中，改一下组建的render方法，刷新页面，你会看到更改在显示器上呈现出来。

The Condensed Version（简洁的版本）

That seems like an enormous amount of work to get a simple app up and running!

看起来建立一个简单地app并让它运行起来要做大量的工作。

Perhaps it was, but that was in large part due to the fact that we slowly explained every step. Executing the steps by rote is much faster.

可能如此，但在很大程度上是因为我们对每一个步骤解释得很慢。通过死记硬背执行这些步骤就很快了。

Here’s a condensed version of how to get a React app up and running:

下面是对如何建立并运行React app的简洁版本：

In the terminal, create a new directory.

cd

into that directory.

在终端，创建一个新目录，并

cd

到该目录。

Type the following command-line scripts:

npm init

npm i -S {react,react-dom}

npm i -D babel-{core,loader} babel-preset-react

npm i -D webpack webpack-dev-server html-webpack-plugin

键入以下命令行脚本：

npm init

npm i -S {react,react-dom}

npm i -D babel-{core,loader} babel-preset-react

npm i -D webpack webpack-dev-server html-webpack-plugin

In your root directory, create a file named .babelrc. Write this inside:

在根目录下，新建.babelrc文件，并编写：



In your root directory, create another file named webpack.config.js. Write (or copy) this inside:

在根目录下，创建另一个webpack.config.js文件，并编写：



In package.json, replace the

scripts

object with this:

在package.json中，将

scripts

对象替换成这样：



Create a directory inside of your root directory named

app

, and another directory inside of app named app/components.

在根目录下新建目录

app

，在app中新建目录app/components。

Create three new files: app/index.js, app/index.html, and app/components/App.js.

新建app/index.js文件、app/index.html文件和app/components/App.js文件。

Copy the code from “Run a Local React App” into app/index.js and app/index.html. Make app/components/App.js the outermost component class of your new app.

复制”Run a Local React App”部分中的代码到app/index.js和app/index.html。app/components/App.js作为app的最外层组件类。

In the terminal, type these two commands:

在终端，键入以下命令：





Enjoy programming in React!

祝您React编程愉快！

（完）