react-redux-react-router直通車

簡單說明

這篇文章是我學習react一個多月來的總結,從基礎開始(包括編輯器設置,構建工具搭建),一步一步走向react開發。相信我,看完這篇文章,跟着文章的步驟走,保證讓你入門react並愛上react,掌握react-router,redux。本文遵循由淺入深的原則。

1、編輯器開始

這裏介紹的是sublime text3 配置react開發環境,支持es6 jsx react自動補全。

教程:
Sublime3玩轉ES6+ReactJs

2、webpack神器

相信你照着這個教程敲一篇,就能夠入門並深刻了

webpack demo

若是你實在不想搭建webpack
我這裏有一個很好的東西介紹給你,絕對不比高手本身搭建webpack開發環境差!!
上文檔代碼:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

{ "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 放在你工程的根目錄下 而後運行npm install(npm i 也能夠,爲npm install的簡寫)
關鍵的是 react-scripts 這個包爲你作了一切webpack的構建工做,包地址爲(https://www.npmjs.com/package/react-scripts)

3、react基礎篇

一、javascript

在學習以前的你，理應對 JavaScript 有所瞭解，或至少是 ES5 標準下的 JavaScript。可若瞭解甚少，那麼，你就應該停下手頭上的工做，學習好該基礎部分後，纔可邁步前行。

可假若早已熟知 ES6 所帶來的新特性，那麼請繼續。由於如你所料，React 的 API 接口在 ES5 和 ES6 兩標準間存在着較大的差別性。因此對於你來講，熟悉兩種標準其特性的不一樣相當重要。儘管發生了異常，你也能夠經過兩種標準之間的轉換，尋找出普遍有效的答案。

推薦阮一峯的es5,es6教程:

• JavaScript 標準參考教程（alpha）
• ECMAScript 6 入門

二、NPM

NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。然而，在這裏你卻並不須要學習太多關於 NPM 自身的東西。只要在安裝好後 （連同 Node.js），學習如何使用其安裝軟件便可。（npm install <package name>）

推薦npm的官網:https://www.npmjs.com/

三、react

學習一個新的編程技術，咱們每每會從熟悉的 Hello World 教程開始。首先，咱們能夠經過使用 React 官方教程所展現的原生 HTML 文件來實現，而該文件包含有一些 script 標籤。其次，咱們還能夠經過使用像 React Heatpack 這樣的工具來快速上手。

嘗試一下該三分鐘運行起 Hello World 的教程。

推薦教程:

• 英文好的,直接react官網啦 react
• 讀英文比較吃力的能夠看
  • react官網翻譯 react-china
  • 菜鳥教程的react react-tutorial
  • demo實戰 阮一峯的 「React 入門實例教程」 (建議看完react文檔在動手實操)

4、react-router篇

說到router,你們都知道是路由的意思,但它可不是家裏的那種路由。這裏的React Router 是專爲 React 設計的路由解決方案，在使用 React 來開發 SPA （單頁應用）項目時，都會須要路由功能，而 React Router 應該是目前使用率最高的。

React Router 並非 Facebook 的 React 官方團隊開發的，可是聽說有官方人員參與開發。React Router 的設計思想來源於 Ember 的路由，若是原來有用過 Ember 的路由和開發事後端，那麼應該對 React Router 不會陌生。

文章閱讀 推薦: 從 React Router 談談路由的那些事

教程推薦:

• React Router文檔
• React Router demo

5、redux篇

Dan Abramov，做爲 Redux 的創造人，他會告訴大家不要過早地接觸 Redux。其實，這是有原因的 —— Redux 其複雜度在早期的學習過程當中，將會帶來災難性的影響。

雖然，在 Redux 背後所隱藏着的原理至關簡單，但想要從理解躍至實踐，倒是一個很大的跨度。

所以，重複第二步所作的：構建一次性的應用程序。經過些許的 Redux 經驗，去逐漸理解其背後的工做原理。

推薦教程:

• Redux文檔
• Redux 莞式教程 真心推薦,這小夥子寫的真的很好,從源碼分析,理解深刻透徹
• Redux demo

最後

對於 React 來講，雖然有大量的學習計劃須要採起，且有大量的東西須要學習 —— 但一切須要循規蹈矩，一步一腳印。照着我列出的教程敲一遍,相信你會從中受益的。

上面列舉的教程和demo我都整理成了一個文檔 react-tutorial 歡迎star 會一直持續更新,一塊兒交流學習

做者:cll