自己動手搭建React開發環境之一React和ReactDOM
導讀：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，在終端鍵入以下命令中的任意一個：
準備好的話，繼續下一篇文章。