react-redux-react-router直通車

來源:互聯網
上載者:User

標籤:

簡單說明

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

一、編輯器開始

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

教程:
Sublime3玩轉ES6+ReactJs

二、webpack神器

相信你照著這個教程敲一篇,就可以入門並深入了

webpack demo

如果你實在不想搭建webpack
我這裡有一個很好的東西介紹給你,絕對不比高手自己搭建webpack開發環境差!!
上文檔代碼:

12345678910111213141516171819202122232425 { "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)

三、react基礎篇1、javascript

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

可倘若早已熟知 ES6 所帶來的新特性,那麼請繼續。因為如你所料,React 的 API 介面在 ES5 和 ES6 兩標準間存在著較大的差異性。所以對於你來說,熟悉兩種標準其特性的不同至關重要。儘管發生了異常,你也可以通過兩種標準之間的轉換,尋找出廣泛有效答案。

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

  • JavaScript 標準參考教程(alpha)
  • ECMAScript 6 入門
2、NPM

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

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

3、react

學習一個新的編程技術,我們往往會從熟悉的 Hello World 教程開始。首先,我們可以通過使用 React 官方教程所展示的原生 HTML 檔案來實現,而該檔案包含有一些 script 標籤。其次,我們還可以通過使用像 React Heatpack 這樣的工具來快速上手。

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

推薦教程:

  • 英文好的,直接react官網啦 react
  • 讀英文比較吃力的可以看
    • react官網翻譯 react-china
    • 菜鳥教程的react react-tutorial
    • demo實戰 阮一峰的 “React 入門執行個體教程” (建議看完react文檔在動手實操)
四、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
五、redux篇

Dan Abramov,作為 Redux 的創造人,他會告訴你們不要過早地接觸 Redux。其實,這是有緣由的 —— Redux 其複雜度在早期的學習過程中,將會帶來災難性的影響。

雖然,在 Redux 背後所隱藏著的原理相當簡單,但想要從理解躍至實踐,卻是一個很大的跨度。

因此,重複第二步所做的:構建一次性的應用程式。通過些許的 Redux 經驗,去逐漸理解其背後的工作原理。

推薦教程:

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

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

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

作者:cll

react-redux-react-router直通車

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.