簡(jiǎn)單說(shuō)明
這篇文章是我學(xué)習(xí)react一個(gè)多月來(lái)的總結(jié),從基礎(chǔ)開(kāi)始(包括編輯器設(shè)置,構(gòu)建工具搭建),一步一步走向react開(kāi)發(fā)讯蒲。相信我,看完這篇文章,跟著文章的步驟走,保證讓你入門(mén)react并愛(ài)上react,掌握react-router,redux。本文遵循由淺入深的原則制恍。
一雹熬、編輯器開(kāi)始
這里介紹的是sublime text3 配置react開(kāi)發(fā)環(huán)境,支持es6 jsx react自動(dòng)補(bǔ)全宽菜。
教程:
Sublime3玩轉(zhuǎn)ES6+ReactJs
二、webpack神器
相信你照著這個(gè)教程敲一篇,就可以入門(mén)并深入了
如果你實(shí)在不想搭建webpack
我這里有一個(gè)很好的東西介紹給你,絕對(duì)不比高手自己搭建webpack開(kāi)發(fā)環(huán)境差!!
上文檔代碼:
{
"name": "yourAppName",
"version": "0.0.1",
"private": true,
"devDependencies": {
"enzyme": "^2.4.1",
"react-addons-test-utils": "^15.3.0",
"react-scripts": "^0.4.0"
},
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"redux": "^3.5.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "react-scripts test"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
將上面文檔保存為package.json 放在你工程的根目錄下 然后運(yùn)行npm install(npm i 也可以,為npm install的簡(jiǎn)寫(xiě))
關(guān)鍵的是 react-scripts 這個(gè)包為你做了一切webpack的構(gòu)建工作,包地址為(https://www.npmjs.com/package/react-scripts)
三橄唬、react基礎(chǔ)篇
1赋焕、javascript
在學(xué)習(xí)之前的你，理應(yīng)對(duì) JavaScript 有所了解仰楚，或至少是 ES5 標(biāo)準(zhǔn)下的 JavaScript隆判∪樱可若了解甚少，那么侨嘀，你就應(yīng)該停下手頭上的工作臭挽，學(xué)習(xí)好該基礎(chǔ)部分后，才可邁步前行咬腕。
可倘若早已熟知 ES6 所帶來(lái)的新特性欢峰，那么請(qǐng)繼續(xù)。因?yàn)槿缒闼险枪玻琑eact 的 API 接口在 ES5 和 ES6 兩標(biāo)準(zhǔn)間存在著較大的差異性纽帖。所以對(duì)于你來(lái)說(shuō)，熟悉兩種標(biāo)準(zhǔn)其特性的不同至關(guān)重要举反。盡管發(fā)生了異常懊直，你也可以通過(guò)兩種標(biāo)準(zhǔn)之間的轉(zhuǎn)換，尋找出廣泛有效的答案火鼻。
推薦阮一峰的es5,es6教程:
2室囊、NPM
NPM 在 JavaScript 世界中，可謂是軟件管理方的王者魁索。然而融撞，在這里你卻并不需要學(xué)習(xí)太多關(guān)于 NPM 自身的東西。只要在安裝好后 （連同 Node.js）粗蔚，學(xué)習(xí)如何使用其安裝軟件即可尝偎。（npm install <package name>）
推薦npm的官網(wǎng):https://www.npmjs.com/
3、react
學(xué)習(xí)一個(gè)新的編程技術(shù)支鸡，我們往往會(huì)從熟悉的 Hello World 教程開(kāi)始冬念。首先，我們可以通過(guò)使用 React 官方教程所展示的原生 HTML 文件來(lái)實(shí)現(xiàn)牧挣，而該文件包含有一些 script 標(biāo)簽急前。其次，我們還可以通過(guò)使用像 React Heatpack 這樣的工具來(lái)快速上手瀑构。
嘗試一下該三分鐘運(yùn)行起 Hello World 的教程裆针。
推薦教程:
- 英文好的,直接react官網(wǎng)啦 react
- 讀英文比較吃力的可以看
- react官網(wǎng)翻譯 react-china
- 菜鳥(niǎo)教程的react react-tutorial
- demo實(shí)戰(zhàn) 阮一峰的 "React 入門(mén)實(shí)例教程" (建議看完react文檔在動(dòng)手實(shí)操)
四、react-router篇
說(shuō)到router,大家都知道是路由的意思,但它可不是家里的那種路由寺晌。這里的React Router 是專為 React 設(shè)計(jì)的路由解決方案世吨，在使用 React 來(lái)開(kāi)發(fā) SPA （單頁(yè)應(yīng)用）項(xiàng)目時(shí)，都會(huì)需要路由功能呻征，而 React Router 應(yīng)該是目前使用率最高的耘婚。
React Router 并不是 Facebook 的 React 官方團(tuán)隊(duì)開(kāi)發(fā)的，但是據(jù)說(shuō)有官方人員參與開(kāi)發(fā)陆赋。React Router 的設(shè)計(jì)思想來(lái)源于 Ember 的路由沐祷，如果原來(lái)有用過(guò) Ember 的路由和開(kāi)發(fā)過(guò)后端嚷闭，那么應(yīng)該對(duì) React Router 不會(huì)陌生。
文章閱讀 推薦: 從 React Router 談?wù)劼酚傻哪切┦?/a>
教程推薦:
五赖临、redux篇
Dan Abramov胞锰，作為 Redux 的創(chuàng)造人，他會(huì)告訴你們不要過(guò)早地接觸 Redux兢榨。其實(shí)嗅榕，這是有緣由的 —— Redux 其復(fù)雜度在早期的學(xué)習(xí)過(guò)程中，將會(huì)帶來(lái)災(zāi)難性的影響吵聪。
雖然凌那，在 Redux 背后所隱藏著的原理相當(dāng)簡(jiǎn)單，但想要從理解躍至實(shí)踐暖璧，卻是一個(gè)很大的跨度案怯。
因此君旦，重復(fù)第二步所做的：構(gòu)建一次性的應(yīng)用程序澎办。通過(guò)些許的 Redux 經(jīng)驗(yàn)，去逐漸理解其背后的工作原理金砍。
推薦教程:
- Redux文檔
- Redux 莞式教程 真心推薦,這小伙子寫(xiě)的真的很好,從源碼分析,理解深入透徹
- Redux demo
最后
對(duì)于 React 來(lái)說(shuō)局蚀，雖然有大量的學(xué)習(xí)計(jì)劃需要采取，且有大量的東西需要學(xué)習(xí) —— 但一切需要循規(guī)蹈矩恕稠，一步一腳印琅绅。站在前輩的肩膀上,照著我列出的教程敲一遍,相信你會(huì)從中受益的。
上面列舉的教程和demo我都整理成了一個(gè)文檔 react-tutorial 歡迎star 會(huì)一直持續(xù)更新,一起交流學(xué)習(xí)
作者:cll
