React學習資源匯總
01-25
React是如今最熱門的前端框架,它設計思路獨特,性能卓越,邏輯簡單,受到了廣泛開發者的喜愛。一旦接觸她,你就會被她深深吸引。
我斷斷續續的學了將近兩個月,今天終於有時間把自己學習React的一些學習資料總結一下。
React 官方
- 官網地址:A JavaScript library for building user interfaces
- Github地址:GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.
設計思想
學習React之前,我們先了解一下它的設計思想,它與如今其他熱門的前端框架有什麼不同?它能為我們的開發解決哪些痛點?
- React 設計思想
- React的設計哲學 - 簡單之美
- 顛覆式前端UI開發框架:React
初學者入門
文章
可以結合一些簡單demo去看文章,例如你在看阮一峰的React 入門實例教程時,可結合他寫的入門demo,或官方給的demo。當然你也要邊學習邊自己去寫一些簡單demo,去改改別人寫的一些React 項目。一定要多動手。
- React 入門實例教程-阮一峰:建議先看demo
- 一看就懂的ReactJs入門教程(精華版)
- React 教程-菜鳥教程:安裝那節好像有點錯
- React 入門,5個常用DEMO展示
- 如何學習React
- 給新手的 React&Webpack 上手教程
- ReactJS 傻瓜教程
- React 最簡單的入門應用項目
入門 demo
- 官方入門 demo:可結合官方的入門文檔
- 入門 demo-阮一峰:結合入門文章
- 模仿知乎界面的一個簡單React demo:結合ReactJS中文基礎視頻教程-愛酷
入門視頻教程
一定要邊看邊寫,不要囫圇吞棗的看一遍就好了。
- React入門-慕課網
- ReactJS中文基礎視頻教程-愛酷
- ReactJS中文視頻教程
- React教程- 匯智網
入門實戰視頻
了解React開發流程,作者的編碼思路,寫作規範。
- React實戰–打造畫廊應用(上)
- React實戰–打造畫廊應用(下)
- ReactJS中文基礎視頻教程
- 構建實時聊天應用
開發文檔
開發其實不用詳細去全看,在你做項目時,遇到不懂的就去查看一下文檔,我認為這樣效率更高一點。當然你有時間也可以一步步去閱讀。
- 官方文檔
- 中文文檔
學習網站
在學習中我們會遇到 一些問題,可以去社區或一些網站尋找答案,下面推薦一些好的React 社區和學習網站。
- React中文社區
- React 中文索引
- React知識庫
- A quick start to React
- stack overflow
- 知乎 React 話題
- segmentfault React 話題
React技術棧
React是一款非常優秀的前端框架,你要發揮它完全的性能,你就要結合其他一些技術,例如webpack、redux、react-router等。
- React 技術棧系列教程
- 百度母嬰技術團隊—基於Reactjs實現webapp
- Building a React Universal Blog App
- React為啥非得使用immutable.js
React Server Side Rendering 解決 SPA 應用的 SEO 問題
webpack官方文檔
- Webpack 中文指南
- webpack一小時快速入門
- 使用webpack輕鬆構建你的第一個react開發框架
入門Webpack,看這篇就夠了:寫的很不錯,逐級深入,適合入門,有點長,耐心看完
react-router
- React Router 中文文檔
React Router 官方 demo
Redux官網
- Redux 中文文檔
- Redux 官方 demo
- Redux 莞式教程
- Redux 視頻教程
- redux 大法好
- Flux 傻瓜教程
- react+redux渲染性能優化原理
- React開發社區
React 開源項目
介紹一些國內外比較好的 React 開源項目。
國內:
- 阿里的 React 組件庫
- Ant Design
- 簡易留言板
- react-zhihu
- React的掃雷遊戲
- 在線聊天室
- 使用React技術棧開發SPA
- 闊論留言評論
- React版cnode社區
國外:
- Relax
- SoundRedux
- Gatsby
- isomorphic500
- NuclearMail
- Picard
- React Color
- Sentry
- react-hn
- Perseus
推薦閱讀: