版權(quán)申明：
此文章首發(fā)于公眾號程序員在深圳熔酷，搜索 studycode 即可關(guān)注
本文無需授權(quán)即可轉(zhuǎn)載杆融，轉(zhuǎn)載時請務(wù)必注明作者
去年8月左右，看到了ThoughtWorks發(fā)布的2016年技術(shù)雷達，里面重點推薦了react.js技術(shù)，加上前端技術(shù)棧三足鼎立中贮懈，react也占據(jù)一席，其他兩個分別是vue.js及angular.js优训，而react和其他兩個的區(qū)別在于错邦，它顛覆了整個技術(shù)棧，自成一派型宙，拋棄了HTML和DOM撬呢，引入了JSX語法繁涂，讓程序員可以更專注于邏輯代碼丰介。這一切讓我對react.js充滿了好奇，決定花時間學(xué)習(xí)一下做瞪，一探究竟搁嗓。
本次學(xué)習(xí)我更采用了剛學(xué)到的元學(xué)習(xí)法芯勘，拋棄了曾經(jīng)一貫的從基礎(chǔ)開始的學(xué)習(xí)套路，畢竟后者周期較長腺逛，在只能用碎片時間學(xué)習(xí)的情況下荷愕，如果不能快速看到效果，學(xué)習(xí)目標很可能會夭折。在學(xué)習(xí)之前安疗，我列了以下幾點
- 寫下為什么要學(xué)抛杨，學(xué)它是不是會讓我非常激動
我終于學(xué)會前端開發(fā)了
我可以了解前端開發(fā)的思路，對我以后的程序設(shè)計有幫助（vue和react都是號稱可以解決復(fù)雜問題的技術(shù)荐类，而jQuery已經(jīng)心有余而力不足）
我還想玩玩ReactNative
- 如果要學(xué)怖现，計劃是什么，第一個小目標要到什么程度
工作日下班后花1個小時玉罐，周末花半天
學(xué)到可以看懂代碼屈嗤，自己可以寫出簡單的應(yīng)用，為深入學(xué)習(xí)鋪路
- 選材吊输，遇到問題如何解決
在github上搜索React Demo饶号，直接找最簡單的Demo練習(xí)
找最權(quán)威的教程方便檢索，最后找到了官網(wǎng)和阮一峰的博客季蚂，ES6入門
定下了目標和計劃后讨韭，就開始行動，今天為止癣蟋，已經(jīng)完成了目標，這個目標盡管很小狰闪，但足以讓我搞懂React及Redux框架的重要知識點疯搅，以及能夠幫助我繼續(xù)深入學(xué)習(xí)。下面就分別來說一下整個學(xué)習(xí)過程埋泵，方便同樣想學(xué)習(xí)的同學(xué)參考幔欧，畢竟網(wǎng)上有很多資料都是濫竽充數(shù)，不知不覺就會讓你多走很多彎路丽声。以下是我總結(jié)出來的最短學(xué)習(xí)路徑：
0.搭建開發(fā)環(huán)境
1.練習(xí)最簡單的Redux Demo
2.學(xué)會使用Create React App工具
3.練習(xí)React-Redux框架
0. 搭建開發(fā)環(huán)境
好的開發(fā)環(huán)境可以極大地提高你的開發(fā)和學(xué)習(xí)效率礁蔗，曾經(jīng)在公司用yum安裝軟件時掉進了一個大坑——沒有使用yum國內(nèi)鏡像導(dǎo)致下載極慢，直到更換了下載源之后才追悔莫及雁社，所以學(xué)習(xí)React之前的準備工作是
- 安裝國內(nèi)的npm鏡像
- 配置編輯器浴井，讓其可以高亮、縮進霉撵、自動排版磺浙、補全等，這里就不具體說明徒坡，請大家自行g(shù)oogle撕氧，因為每個人的編輯器可能不一樣
1. 練習(xí)最簡單的redux demo
在練習(xí)demo之前，你需要先學(xué)習(xí)下React基本知識喇完，這個教程寫的非常好伦泥。
React并不會幫你組織代碼，所以你需要選擇一個框架，Redux是目前主流的React框架不脯，它是Flux架構(gòu)的一種實現(xiàn)府怯。官網(wǎng)上有最簡單的計數(shù)器demo，直接把這個demo下載下來跨新，對著源碼練習(xí)富腊，你可以采用以下練習(xí)方法
- 第一遍：復(fù)制粘貼代碼，注意每粘一段代碼域帐，就要對應(yīng)看一下相應(yīng)的輸出赘被，主要讓自己腦海里有一個大致的框架：需要什么依賴，用了什么工具
- 第二遍：嘗試理解代碼的含義肖揣，不懂的話馬上查找我上面說的"權(quán)威教程"民假，注意查找時只需要查找必要知識，千萬不要不知不覺就把整個文檔都看完才回來理解——時間傷不起啊龙优。
- 第三遍：在理解的基礎(chǔ)上嘗試自己寫代碼羊异，不會寫了可以偷看一眼源碼，這個過程會加深你對知識的理解彤断，重復(fù)第三遍野舶，直到你可以熟練寫出為止。
此方法適合有一定編程基礎(chǔ)的同學(xué)宰衙，因為在第二遍的時候就開始理解平道，學(xué)習(xí)曲線陡然提升，如果你是一個零基礎(chǔ)小白供炼，你可能需要首先了解一點html一屋、js基礎(chǔ)，同樣可以在github上找?guī)讉€最簡單demo加以練習(xí)的方式袋哼，相信補這些知識也會很快冀墨。
這個demo是一個單頁面的html文件，總共才60多行涛贯，mac下直接執(zhí)行open index.html即可在瀏覽器查看效果诽嘉，我在文檔中加入了必要的注釋，代碼可以在這里下載弟翘，同時含懊，你可以查看這篇教程對照學(xué)習(xí)。
2. 學(xué)會使用Create React App工具
在學(xué)習(xí)Redux框架之前衅胀，你需要先學(xué)會使用Create React App這個工具岔乔，這個工具會自動幫你創(chuàng)建app環(huán)境，如果你之前沒了解過它滚躯，可能會和我一樣雏门，在拿到React-Redux時直接懵逼嘿歌，畢竟我們無法理解未知加未知的東西，所以在繼續(xù)之前你需要先學(xué)會如何使用Create React App：
- 安裝：
npm install -g create-react-app - 在指定目錄創(chuàng)建一個app：
create-react-app my-app - 把我的demo2下載到本地茁影，替換掉
src目錄中的文件和package.json文件 - 執(zhí)行：
cd my-app && npm install && npm start
這個工具其實很簡單宙帝，以上步驟是告訴你，哪些是工具生成的募闲，哪些地方是我們可以修改的步脓，其中src目錄一般存放我們的代碼，而package.json是項目配置浩螺。
3. 練習(xí)React-Redux框架
剛才你下載的demo2即是需要練習(xí)的demo靴患，功能和demo1一樣，只是組織方式有所不同要出，它更像一個"真實"的項目鸳君，練習(xí)方法和第1步里描述的一樣，相信你很快就可以熟練
之后你可能會練習(xí)官網(wǎng)里的todos demo患蹂，但你很快會發(fā)現(xiàn)todos demo的代碼復(fù)雜了很多：
- 一是因為它使用了我們還不怎么熟悉的React-Redux框架
- 二是它將組件分在了不同的文件中或颊，轉(zhuǎn)來轉(zhuǎn)去很容易轉(zhuǎn)暈
所以建議先讀一下更簡單的代碼，demo3是個單文件的js代碼传于，依然包括了React-Redux框架的必要的知識囱挑，通過執(zhí)行npm install && npm start來運行，練完這個demo之后你便會非常有信心去閱讀todos demo的代碼了沼溜。
以上是我實踐出的React中的最少必要知識平挑，接著你可以繼續(xù)練習(xí)其他demos，或者做一些更完整的項目盛末，如果你感興趣，現(xiàn)在就開始吧否淤，在編程領(lǐng)域悄但，唯有不斷練習(xí)才是最好的學(xué)習(xí)方法。
