# React.js 基本環境安裝
> 作者：[胡子大哈](http://huziketang.com/books/react) </br>
> 原文鏈接： [http://huziketang.com/books/react/lesson5](http://huziketang.com/books/react/lesson5)
**轉載請注明出處，保留原文鏈接以及作者信息**
## 安裝 React.js
React.js 單獨使用基本上是不可能的事情。不要指望著類似于 jQuery 下載放到?`<head />`?標簽就開始使用。使用 React.js 不管在開發階段生產階段都需要一堆工具和庫輔助，編譯階段你需要借助 Babel；需要 Redux 等第三方的狀態管理工具來組織代碼；如果你要寫單頁面應用那么你需要 React-router。這就是所謂的“React.js全家桶”。
本課程不會教大家如何配置這些東西，因為這不是課程的重點，網上有很多的資料，大家可以去參考那些資料。我們這里會直接使用 React.js 官網所推薦使用的工具?`create-react-app`?工具。它可以幫助我們一鍵生成所需要的工程目錄，并幫我們做好各種配置和依賴，也幫我們隱藏了這些配置的細節。也就是所謂的“開箱即用”。
工具地址：[https://github.com/facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
[](http://react.huziketang.com/assets/img/posts/C9754D1A-0989-49B2-AC9F-B8D9717198CB.png)
在安裝之前要確認你的機器上安裝了 node.js 環境包括 npm。如果沒有安裝的同學可以到 node.js 的官網下載自己電腦的對應的安裝包來安裝好環境。
[](http://react.huziketang.com/assets/img/posts/70B2D77C-1656-4D9E-B57E-671BE1D568AD.png)
安裝好環境以后，只需要按照官網的指引安裝?`create-react-app`?即可。
~~~
npm install -g create-react-app
~~~
這條命令會往我們的機器上安裝一條叫?`create-react-app`?的命令，安裝好以后就可以直接使用它來構建一個 react 的前端工程：
~~~
create-react-app hello-react
~~~
這條命令會幫我們構建一個叫?`hell-react`?的工程，并且會自動地幫助我們安裝所需要的依賴，現在只需要安靜地等待它安裝完。
> 額外的小貼士：
>
> 如果有些同學安裝過程比較慢，那是很有可能是因為 npm 下載的時候是從國外的源下載的緣故。所以可以把 npm 的源改成國內的 taobao 的源，這樣會加速下載過程。在執行上面的命令之前可以先修改一下 npm 的源：
>
> `npm config set registry https://registry.npm.taobao.org`
下載完以后我們就可以啟動工程了，進入工程目錄然后通過 npm 啟動工程：
~~~
cd hello-react
npm start
~~~
終端提示成功：
[](http://react.huziketang.com/assets/img/posts/A25CB842-11DE-4DC7-A805-85AEF2A64163.png)
并且會自動打開瀏覽器，就可以看到 React 的工程順利運行的效果：
[](http://react.huziketang.com/assets/img/posts/React_App.png)
這時候我們把?`src/App.js`?文件中的?`<h2>`?標簽的內容修改為?`Hello React`，
~~~
<h2>Hello React</h2>
~~~
保存一下，然后戶就會發現瀏覽器自動刷新，并且我們的修改也生效了：
[](http://react.huziketang.com/assets/img/posts/3FDC1B75-AACD-40A4-9101-1AF8C57EFBF4.png)
到這里我們的環境已經安裝好了，并且順利地運行了我們第一個例子。接下來我們會探討 React.js 的組件的基本寫法。
- 前言
- 第一階段
- Lesson 1 - React.js 簡介
- Lesson 2 - 前端組件化（一）：從一個簡單的例子講起
- Lesson 3 - 前端組件化（二）：優化 DOM 操作
- Lesson 4 - 前端組件化（三）：抽象出公共組件類
- Lesson 5 - React.js 基本環境安裝
- Lesson 6 - 使用 JSX 描述 UI 信息
- Lesson 7 - 組件的 render 方法
- Lesson 8 - 組件的組合、嵌套和組件樹
- Lesson 9 - 事件監聽
- Lesson 10 - 組件的 state 和 setState
- Lesson 11 - 配置組件的 props
- Lesson 12 - state vs props
- Lesson 13 - 渲染列表數據
- Lesson 14 - 實戰分析：評論功能（一）
- Lesson 15 - 實戰分析：評論功能（二）
- Lesson 16 - 實戰分析：評論功能（三）
- 第二階段
- Lesson 17 - 前端應用狀態管理 —— 狀態提升
- Lesson 18 - 掛載階段的組件生命周期（一）
- Lesson 19 - 掛載階段的組件生命周期（二）
- Lesson 20 - 更新階段的組件生命周期
- Lesson 21 - ref 和 React.js 中的 DOM 操作
- Lesson 22 - props.children 和容器類組件
- Lesson 23 - dangerouslySetHTML 和 style 屬性
- Lesson 24 - PropTypes 和組件參數驗證
- Lesson 25 - 實戰分析：評論功能（四）
- Lesson 26 - 實戰分析：評論功能（五）
- Lesson 27 - 實戰分析：評論功能（六）