大家要認識到的是，React僅僅只是一個達到目標的工具， 他并不難
1
認知
對于整個前端行業而言，React的出現具有里程碑的意義。它重新定義了前端開發。
但React的掌握并沒有大家認為的那樣難。
它給我們提供了一個開發思路以及少量的API，這些API學習起來還算輕松。不過在閱讀此系列文章之前，應該有不少讀者已經通過官方文檔或者其他途徑開始嘗試學習React，并且在學習過程中遇到了困難。這些困境會給大家帶來一些React難以攻克的假象。
我想要說的是，大多數困難，可能并不是React本身帶給你的。而是當前那個問題帶來的。我們不知道如何用React來解決這個問題，所以我們認為React很難。又或者我們不知道能夠用React來干點什么，所以我們無法感知到自己的進步。
因此我們首先需要認知到的是，整個React的學習過程，一定是先學會使用工具，并且利用工具去戰勝實踐過程中各種各樣挑戰的這樣一個過程。
由于每個人不同的學習與實踐經驗，同樣的問題對于不同的人來說可能意味著不同的難度。例如要求使用React編寫一個拖拽組件，知道拖拽實現的原理的朋友，可能就會很容易搞定這個問題，但是對于拖拽原理理解還不夠的同學，那么就必然需要付出更多的精力去學習拖拽相關的知識點才能應對自如。
因此，經驗的不同，會直接導致學習的快慢。所以就必須要求底子稍微薄弱的同學保持良好的心態，你要認識到，這都是正常的。
2
心態
基于上述的認知，當我們在學習過程中遇到困難時，一定要避免產生懷疑自己能力等的負面情緒或者厭學情緒。學會調整自己，學會將問題細化，通過搜索，查閱資料，尋求幫助等方式，積極地去解決他們。
對沒有畢業、或者沒有太多工作經驗的朋友來說，未來在工作中會遇到的問題，我們認知并不是那么深刻。因此在學習過程中，很多東西我們都不知道為什么要這樣做。我們也感受不到不同解決方案之間的差異與提升，所以印象就不會那么深刻，思維也很難有進一步的深入。這種狀況帶來的問題就是會導致學習起來會比經驗豐富的前輩們慢一些，甚至可能會遺忘一些之前學過的知識。不過大家不用擔心，這種狀況都是正常的。我們只要多多實踐，練習，就能克服。
現在我們正面臨新的更好的開發方式，和幾年前的前輩相比，我們能少走一些彎路，但是我們不能少走所有的彎路直接到達終點。
我們并不需要在某個時刻搞懂所有的問題。正確的學習方法一定會時常感受到“柳暗花明又一村”的感覺。很多時候我們不需要急著在某一個時刻解決當前面臨的問題，也許休息一下，出去散個步，聊會兒天，打會兒游戲，再回過頭來思考，問題就迎刃而解。不要在某個問題上死磕，這樣會很快耗盡你的學習熱情與動力。
盡量不要花心思去擔憂暫時還觸碰不到的知識。每個人都加了各種不同的學習群。你總會聽到，感受到各種各樣不同的未知詞匯，即使在我們的零基礎學習群里，也會有很多這樣的聲音。
很多人因為這些聲音感到焦慮。
完全沒有必要，只要你還在持續學習，學習階段到了，這些東西自然而然就能接觸，并且掌握到。
3
方法
一定要動手實踐。不要干讀文章！
寫《前端基礎進階》這系列文章，發現了一個很有意思的現象。
從第一篇，到最后一篇，閱讀量從7W+遞減到2W+。只能說，半途而廢的人還蠻多。
所以，不要半途而廢，你就能脫穎而出。這也是一個非常重要的學習方法。
4
環境搭建
React的官方文檔，為了新的學習者能夠更加容易接受React，在最初的介紹中，告訴我們可以通過在js中引入React庫，并且在js中直接如下使用。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
但是我個人并不認同這樣的入門方式，因為在實踐中，我們幾乎不會這樣使用。
與Vue一樣，React同樣具有非常優秀的構建工具，但是由于推廣方式的原因，React剛入門的同學可能還不知道它。
作為最易上手的react腳手架，create-react-app并不需要花費太多時間就能夠掌握，大家只需要按照我接下來的步驟安裝需要的環境即可。
當然，要配置一個功能更強大，更適合實踐的腳手架，則還需要在此基礎上做更多的擴展。我們在開發中再慢慢完善。
1. 安裝node
從nodejs官方網站下載你的操作系統對應的node版本。和普通應用一樣安裝即可。
該頁面會自動推薦更合適你電腦的node版本。點擊左側大按鈕，將會下載最新的穩定版本。右側大按鈕可能會有一些更新的，但還處于測試階段的新特性。因此我們通常選擇左側的下載。
node安裝的同時，npm也會一起被安裝。npm是一個js包管理工具，我們可以利用該工具下載需要的js庫。例如我們需要在項目中引入jQuery。那么可以直接這么干。
// 僅在當前項目安裝
> npm install jquery
// 全局安裝
> npm install jquery -g
安裝完成之后，通過查看node版本的方式確保node已經正常安裝。
由于網絡原因，當我們想要通過npm下載項目依賴包時，可能會很慢甚至直接無法下載，因此在使用時我們通常會使用淘寶NPM鏡像。
首先使用如下指令安裝cnpm，用以替換默認的npm
> npm install -g cnpm --registry=https://registry.npm.taobao.org
然后就可以使用cnpm來安裝想要的模塊了。
> cnpm install jquery
當然，現在更多的人更偏向于使用另外一個包管理工具yarn。在后續的教程中，我們可能也會使用到yarn而不使用npm。大家可以訪問yarn官方網站按照教程安裝yarn。
通常能夠使用npm安裝的模塊，都能夠使用yarn來安裝，他們的常用指令如下：
// 安裝模塊
> npm install lodash
> yarn add lodash
// 啟動項目
> npm start
> yarn start
// 構建項目
> npm run build
> yarn build
入門時只需要記住幾個簡單的即可，在這里不建議深究更多的指令，在學習過程中慢慢掌握即可。
yarn 也可以配置國內鏡像源。
# 國內源
> npm i yarn tyarn -g
# 后面文檔里的 yarn 換成 tyarn
> tyarn -v
# 阿里內網源
> tnpm i yarn @ali/yarn -g
# 后面文檔里的 yarn 換成 ayarn
> ayarn -v
安裝之后執行yarn指令，極少部分情況可能會出現如下提示
> yarn: command not found，
你需要將 yarn global bin 路徑配置到環境變量中，方法如下
# mac 系統:
> sudo vi ~/.bash_profile
# 在 .bash_profile 中添加下面一行：
export PATH="$PATH:`yarn global bin`"
# windows系統:
# 獲取 global bin 的路徑
> yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 復制上面的 global bin 的路徑，添加到系統環境變量 PATH。
2. 安裝一個好用的命令行工具
對于windows系統來說，我們可以直接使用系統自帶的cmd。但是cmd比較難用。因此我個人比較推薦大家安裝git，并通過git中的git.bash工具進行指令操作。
也是與安裝其他應用一樣，在電腦上安裝好git，找到git的安裝目錄，我們會發現有一個bash工具。雙擊它即可使用。
對于mac系統來說，使用起來則相對簡單，我們可以直接使用系統自帶的terminal工具即可。當然，也可以安裝更加好用的iTerm。
通常我們在安裝好iTerm之后，會下載一個非常好用的集成補丁oh my zsh。它為我們使用指令提供了非常多的快捷操作與舒適的補全提示。
// 安裝oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
對美觀有自己要求的同學可以選擇對應的主題。
3. 安裝 create-react-app
如果剛才我們的包管理工具(npm/yarn)已經安裝好，那么安裝create-react-app就比較簡單。
> yarn add create-react-app -g
接下來我們就可以使用create-react-app來創建項目啦。
4. 創建第一個react項目
找到一個你專門用來存放項目的目錄，例如我的目錄名字叫做develop。在命令行工具中進入到這個目錄，然后使用如下指令創建項目。
// 進入目錄
> cd develop
// 創建一個名為kill的項目
> create-react-app kill
創建完成之后，我們可以看到類似如下圖所示的界面。
// 進入項目
> cd kill
// 啟動項目
> yarn start
// 打包項目
> yarn build
// 暴露出項目的具體配置，以便于在此基礎上擴展/修改更多的配置
> yarn eject
進入并啟動項目，在瀏覽器中輸入http://localhost:3000，我們可以看到如下界面。
通常會自動打開
在命令行工具中，注意關注這里的提示。
我們可以直接在電腦中輸入http://localhost:3000訪問項目。同時，我們也可以輸入http://192.168.0.101:3000訪問項目。如果你的手機與電腦處于同一局域網，我們也可以通過該地址在手機上訪問項目，這對于移動端開發的調試非常有用。
5. 認識項目
打開項目，我們可以看到如下目錄。
node_modules
node_modules文件夾是項目所有依賴包的存放地址，除了項目初始化時安裝的所必須的依賴包之外，我們后續通過yarn/npm安裝的包都存放在該目錄下。
package.json 與 yarn.lock
項目的配置文件與依賴包的描述文件。目前我們暫時還不需要對他們有過多的了解。在未來如果你要學習webpack等構建工具時才會深入的了解他們。
public
項目的入口文件。通常我們會將index.html存放在該目錄里。
src
模塊與組件的存放目錄。在create-react-app創建的項目中，每一個單獨的文件都可以被看成一個模塊，例如單獨的image，單獨的css，單獨js等，而所有的組件都存放于src目錄中，其中index.js則是js的入口文件。
通常我們創建一個web頁面，則需要分別通過link與script標簽引入對應的css與js文件。但是在create-react-app的開發環境中，構建工具幫助我們自動完成了這些操作，我們只需要按照當前開發環境的簡單規則來組織自己的代碼即可。當我們通過yarn build打包項目之后，我們會看到html頁面則變成了我們熟知的樣子。
5
節奏
后續的所有文章，都會嚴格結合typescript來跟大家分享。在學習群里跟大家做了一個調研，大家也愿意先學一些能夠使用的typescript語法規則，然后再進行react的學習。
因此，后面會有至少三篇文章介紹typescript。
那么既然要支持ts，我們創建項目的指令就需要修改成
> create-react-app kill --template typescript
最后，混跡半生，變成了一個賊愛錢的人，如果大家覺得文章寫得還不錯，一定要多多打賞我呀！
推薦閱讀：
關于學好JavaScript，我寫了一本書
這里有與React hooks有關的一切
