導讀：React作爲近年來大紅大紫的view層框架，以其高效、靈活性、強大的社區環境而受到廣泛關注。但React也不是直接就能拿來使用的，它必須通過配置相應環境才能更好的開發項目。雖然你可以使用官方推薦的構建React環境方式Create React App ，但有時候也想知道到底它是怎麼配置的，所以自己動手搭建React環境也是很必要的學習過程。本系列分爲5章，翻譯自codecademy關於React搭建的教程。本篇原文地址：React Setup, Part I: React and ReactDOM。
Background
The Codecademy site provides you with a development environment already set up for you to complete exercises and run your code. Now that you’ve learned how to code in React, let’s go through the process of setting up your development environment on your computer so that you can write your own applications.
爲了使你能夠完成React的練習和運行代碼，Codecademy對此提供了開發環境 。現在你已經學會了如何寫React代碼，那讓我們進入下一個階段：如何搭建開發環境以使得能開發自己的應用。
We’ve written a brief guide for each major step of the installation process! This is the first guide in the series. This guide will teach you:
- How to install Node.js and npm
- How npm is different than what you may be used to.
- How to create a package.json file, and what that means.
- How to install the React and ReactDOM libraries.
我們寫了一個關於整個過程的簡單的指南。本篇文章也是這個系列的第一篇指南。本篇文章講教給你以下內容：
- 怎麼安裝Node.js和npm
- npm和你之前用過的包管理工具有什麼不同
- 如何創建package.json文件，及其含義
- 如何安裝React和ReactDOM庫
Installing Node and npm
Getting React up and running is not as simple as downloading one large piece of software. You will need to install many, smaller software packages.
讓React運行起來並不像只是下載一個大型軟件那麼簡單。你需要安裝很多小軟件包。
The first thing to install is a good installer! You need a way to download and install software packages easily, without having to worry about dependencies.
首先要安裝的是一個安裝器。你需要一種可以不用擔心依賴的下載和安裝軟件包的方式。
In other words, you need a good package manager. We’ll be using a popular package manager named npm. npm is a great way to download, install, and keep track of JavaScript software.
換句話說，你需要一個優秀的包管理器。我們會用到一種流行的包管理器，它的名字叫做npm。npm是能很好地下載、安裝和記錄JavaScript軟件。
You can install npm by installing Node.js. Node.js is an environment for developing server-side applications. When you install Node.js, npm will install automatically.
- Ctrl-click here to navigate to the Node.js homepage in a new tab.
- You should see links to download Node.js. Click on the download link of your choice. Follow the subsequent instructions to install Node.js and npm. If you’ve already installed Node.js, that’s okay, do it anyway.
通過安裝Node.js就能安裝npm。Node.js是一種用來開發服務器端應用的環境。當你安裝Nodejs時會自動安裝npm。
- Ctrl+單擊這裏會在瀏覽器的新標籤導航到Node.js。
- 你會看到下載Node.js的鏈接。按你的需要下載。按隨後的說明安裝Node.js和npm。如果你已經安裝了Node.js，那就繼續吧。
Congratulations! You’ve just installed some incredibly powerful software!
恭喜你，你現在已經安裝了一些非常牛的軟件。
How npm is Different
When you install software, you may be used to something like this: you install what you need, it sits there on your computer, and you can use it whenever you want.
當你安裝軟件時，你可能會習慣這樣：安裝需要的軟件，它位於電腦中，你可以在需要的時候用它。
You can do that with npm! But there’s a different, better way: install what you need, over and over again, every time that you need it. Download and install React every time that you make a React app.
npm也能做到。但是卻有個不一樣但更好的方式：每次用到的時候都需要一次次安裝所需的東西。每次在做React應用時都要重新下載安裝React。
That sounds much worse! Here’s why it’s actually better:
First, npm makes installation extremely easy. Installing software over and over sounds like a headache, but it really isn’t. We’ll walk through how soon!
Second, npm modules (“modules” are another name for software that you download via npm) are usually small. There are countless modules for different specific purposes. Instead of starting your app with a giant framework that includes tons of code you don’t need, you can install only modules that you will actually use! This helps keep your code quick, easy to navigate, and not vulnerable to dependencies that you don’t understand.
那聽起來似乎很糟糕。下面是爲什麼說這種方式好的原因：
第一，npm使安裝過程極其簡單。一次次安裝聽起來很頭疼，但它事實上並不。我們很快就可以安裝完成。
第二，npm模塊（模塊是你通過npm安裝的軟件的另一種叫法）通常很小。有數不盡的特定目的的模塊。你只需安裝你實際用到的模塊，而不再需要通過加載一個包含大量的用不到的代碼的框架來啓動app。這會使你的代碼簡介，容易管理，免受你不懂的依賴的傷害。
IN CONCLUSION: Starting now, every step in this article series will be a step that you have to take every time you make a new React app. You don’t have to install Node.js and npm anymore, but you should start from here for every new React project that you make.
最後：從現在開始，之後的每個步驟都是爲創建一個React app的必要步驟。你不必再安裝Node和npm了，但你應該從這開始學習創建React項目。
npm init
Alright, let’s make a React app on your home computer! Where do you start?
To begin, decide where you want to save your app, and what you want to name it. In the terminal, cd to wherever you want to save your app. Use mkdir to make a new directory with your app’s name. cd into your new directory.
好了，現在讓我們開始再本地電腦上創建React app。從哪開始呢？
首先，你要決定在哪保存app和給它起個名字。在終端，cd到你想要保存app的地方，用mkdir和app的名字來創建一個新的文件夾。cd到新文件夾。
Once you’ve done all that, type this command into your terminal:
做完之後，在終端鍵入以下命令：
You will get a lot of prompts! You can answer them, but it’s also safe to just keep hitting
return and not worry about it.你會得到很多提示！你要回答它們，就算碰到一些返回的提示也不用擔心。
Once the prompts are done, use your favorite text editor to open all of the files in your project’s root directory. You could do this with a terminal command such as atom . or subl .. You will see that a new file named package.json has been created!
一旦做完所有的提示，用你最喜歡的文本編輯工具打開在你項目根目錄下的文件。你也可以採用一些終端命令行，想atom . 或 subl ..你將看到一個叫做package.json的文件被創建了。
What just happened?
The command npm init automatically creates a new file named package.json. package.json contains metadata about your new project.
剛纔發生了什麼？
npm init命令會自動創建一個叫做package.json的文件，該文件包含了關於你項目的信息。
Soon, you will install more npm modules. package.json keeps track of the modules that you install. Other developers can look at your package.json file, easily install the same modules that you’ve installed, and run their own local versions of your project! This is fantastic for collaborating.
不久，你就會安裝更多的npm模塊，package.json會保持記錄你安裝的模塊，一些開發者看到你的package.json文件，會容易地安裝你安裝的那些模塊，然後運行你的項目的他們的本地版本！多麼愉快的合作！
Install React
Alright! You’ve made a project folder, navigated into it, and used npm init to create a package.json file. Now you’re ready to install some modules!
好的，你已經建了一個項目文件夾，並進該目錄，用npm init
創建了一個package.json文件。現在你可以準備安裝模塊了。
To install a module using npm, you need to know that module’s name. If you want to install a module and you aren’t sure of its exact name, you can search for it here. Our first module is named react.
要用npm安裝模塊，你需要知道模塊名，要是你不知道想要安裝的模塊的名字，你可以在這裏搜索。我們要安裝的第一個模塊是react。
To install the react module, type this command in the terminal:
爲安裝react模塊，在終端鍵入以下命令：
install can be abbreviated as i, and --save can be abbreviated as -S, if you like to abbreviate:
如果你喜歡簡寫的話，install可被簡寫爲 i, --save可被簡寫爲 -S：
You just installed React! Now you can access it in your files with the code var React = require('react').
你已經安裝好了React！現在可以在文件中通過var React = require('react')導入react。
Install ReactDOM
If you look at package.json, you can see that there’s an object named dependencies that now has react listed as a dependency. This indicates that your project is “dependent” on having react installed. If someone tries to run your project, it probably won’t work unless they install react first.
看一下package.json，你會看到有個對象叫做dependencies，“react”被列舉到dependencies中。這標誌着你的項目要依賴安裝的react。如果有人運行你的項目，只有安裝了react，你的項目纔會正常工作。
You can also see something else new in your directory: a folder named node_modules.
node_modules is where npm modules are saved. If you open node_modules, you should see a folder named react, which contains the code that makes React run.
你會看到在你的目錄下有一個叫做node_modules的文件夾。node_modules保存npm包。如果你打開node_modules，你會看到react文件夾，裏面包含使React運行的代碼。
The next thing that you want to install is react-dom. Once you install react-dom, you will be able access it in your files with the code var ReactDOM = require('react-dom').
接下來要安裝的是react-dom。一旦你安裝好react-dom，你就可以在文件中輸入代碼var ReactDOM = require('react-dom')來導入react-dom。
To install react-dom, type one of these two commands in the terminal:
要安裝react-dom，在終端鍵入以下命令中的任意一個：
Whenever you’re ready, continue to our next article!
準備好的話，繼續下一篇文章。