簡單說明
這篇文章是我學習react一個多月來的總結,從基礎開始(包括編輯器設置,構建工具搭建),一步一步走向react開發。愛掏網 - it200.com相信我,看完這篇文章,跟著文章的步驟走,保證讓你入門react并愛上react,掌握react-router,redux。愛掏網 - it200.com本文遵循由淺入深的原則。愛掏網 - it200.com
一、編輯器開始
這里介紹的是sublime text3 配置react開發環境,支持es6 jsx react自動補全。愛掏網 - it200.com
教程:
Sublime3玩轉ES6+ReactJs
二、webpack神器
相信你照著這個教程敲一篇,就可以入門并深入了
webpack demo
如果你實在不想搭建webpack
我這里有一個很好的東西介紹給你,絕對不比高手自己搭建webpack開發環境差!!
上文檔代碼:
{
"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。愛掏網 - it200.com可若了解甚少，那么，你就應該停下手頭上的工作，學習好該基礎部分后，才可邁步前行。愛掏網 - it200.com
可倘若早已熟知 ES6 所帶來的新特性，那么請繼續。愛掏網 - it200.com因為如你所料，React 的 API 接口在 ES5 和 ES6 兩標準間存在著較大的差異性。愛掏網 - it200.com所以對于你來說，熟悉兩種標準其特性的不同至關重要。愛掏網 - it200.com盡管發生了異常，你也可以通過兩種標準之間的轉換，尋找出廣泛有效的答案。愛掏網 - it200.com
推薦阮一峰的es5,es6教程:
JavaScript 標準參考教程（alpha）
ECMAScript 6 入門
2、NPM
NPM 在 JavaScript 世界中，可謂是軟件管理方的王者。愛掏網 - it200.com然而，在這里你卻并不需要學習太多關于 NPM 自身的東西。愛掏網 - it200.com只要在安裝好后 （連同 Node.js），學習如何使用其安裝軟件即可。愛掏網 - it200.com（npm install
推薦npm的官網:https://www.npmjs.com/
3、react
學習一個新的編程技術，我們往往會從熟悉的 Hello World 教程開始。愛掏網 - it200.com首先，我們可以通過使用 React 官方教程所展示的原生 HTML 文件來實現，而該文件包含有一些 script 標簽。愛掏網 - it200.com其次，我們還可以通過使用像 React Heatpack 這樣的工具來快速上手。愛掏網 - it200.com
嘗試一下該三分鐘運行起 Hello World 的教程。愛掏網 - it200.com
推薦教程:
英文好的,直接react官網啦 react
讀英文比較吃力的可以看
react官網翻譯 react-china
菜鳥教程的react react-tutorial
demo實戰 阮一峰的 "React 入門實例教程" (建議看完react文檔在動手實操)
四、react-router篇
說到router,大家都知道是路由的意思,但它可不是家里的那種路由。愛掏網 - it200.com這里的React Router 是專為 React 設計的路由解決方案，在使用 React 來開發 SPA （單頁應用）項目時，都會需要路由功能，而 React Router 應該是目前使用率最高的。愛掏網 - it200.com
React Router 并不是 Facebook 的 React 官方團隊開發的，但是據說有官方人員參與開發。愛掏網 - it200.comReact Router 的設計思想來源于 Ember 的路由，如果原來有用過 Ember 的路由和開發過后端，那么應該對 React Router 不會陌生。愛掏網 - it200.com
文章閱讀 推薦: 從 React Router 談談路由的那些事
教程推薦:
React Router文檔
React Router demo
五、redux篇
Dan Abramov，作為 Redux 的創造人，他會告訴你們不要過早地接觸 Redux。愛掏網 - it200.com其實，這是有緣由的 —— Redux 其復雜度在早期的學習過程中，將會帶來災難性的影響。愛掏網 - it200.com
雖然，在 Redux 背后所隱藏著的原理相當簡單，但想要從理解躍至實踐，卻是一個很大的跨度。愛掏網 - it200.com
因此，重復第二步所做的：構建一次性的應用程序。愛掏網 - it200.com通過些許的 Redux 經驗，去逐漸理解其背后的工作原理。愛掏網 - it200.com
推薦教程:
Redux文檔
Redux 莞式教程 真心推薦,這小伙子寫的真的很好,從源碼分析,理解深入透徹
Redux demo
最后
對于 React 來說，雖然有大量的學習計劃需要采取，且有大量的東西需要學習 —— 但一切需要循規蹈矩，一步一腳印。愛掏網 - it200.com站在前輩的肩膀上,照著我列出的教程敲一遍,相信你會從中受益的。愛掏網 - it200.com
上面列舉的教程和demo我都整理成了一個文檔 react-tutorial 歡迎star 會一直持續更新,一起交流學習
作者:cll
原文地址:https://cllgeek.github.io/2024/09/14/react-react-router-redux%E7%9B%B4%E9%80%9A%E8%BD%A6/