其他 · React 開發細節指南

[TOC] [https://reactresources.com/](https://reactresources.com/) # React-Spring https://www.react-spring.io/ # React 樣式處理在 React 中，處理樣式是至關重要的一環，也是當下非常熱門的話題。在這一節中，我們除了介紹基本樣式設置之外，還會講到現在業界很火的 CSS Modules 的概念及用法。 ## [Stop using CSS in JavaScript for web development](https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc) It it too early to use [Shadow DOM v1](http://caniuse.com/#feat=shadowdomv1)(51% global support). Use CSS with either of the naming conventions (I recommend [BEM](http://getbem.com/)). If you are worried about class name collisions (or too lazy to use BEM), use [CSS modules](https://github.com/css-modules/css-modules). If you are developing for React web, consider using [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules). If you are developing for React native,[styled-components](https://styled-components.com/) is great. ## 參考深入REACT技術棧陳屹著 https://github.com/topics/css-in-js [styled-jsx](https://github.com/zeit/styled-jsx) [styled-components](https://www.styled-components.com/) [custom-elements](https://custom-elements-everywhere.com/) # 收集分析 Bug https://logrocket.com/ # Complete Intro to React, v3 (feat. Redux, Router & Flow) Course Notes - https://btholt.github.io/complete-intro-to-react/ Course Code (Github) - https://github.com/btholt/complete-intro-to-react https://coursehunters.net/course/fm-react-version-3 # full-stack roadmap https://stackforyourself.com # [探索react技術棧-技術選型](http://www.cnblogs.com/fecode/articles/6840699.html) # typescript與react-native [初次嘗試使用typescript開發react-native](http://www.jianshu.com/p/aca43169a31f) [使用TypeScript開發ReactNative應用的簡單示例](https://www.cnblogs.com/zhouzme/p/5828032.html) [React with TypeScript 系列(三) --實戰篇](http://blog.csdn.net/kinfey/article/details/50500350) # VSCode開發React-Native http://blog.csdn.net/goodchangyong/article/details/52936546 # React技術棧 [React系列---React技術棧一覽](https://segmentfault.com/a/1190000009879742) [【React深入】從Mixin到HOC再到Hook](https://segmentfault.com/a/1190000018811476) # prop-types ~~~ npm install prop-types -S ~~~ 與react配套的類型檢測庫，prop-types就是對react組件中props對象中的變量進行類型檢測的，因為props是react數據流的管道，我們通過prop-types就可以輕松監控react里大多數據的變量類型。需要注意的是，在 React 15.5 之前， prop-types 并不是獨立的，而是作為 React 的一部分，需要像下面這樣使用。 ```js import { PropTypes } from ’ react ’; ``` # 文章 [React 技術棧系列教程](http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html) [30-days-of-react](https://www.fullstackreact.com/30-days-of-react/) [react-in-patterns-cn](http://sangka-z.com/react-in-patterns-cn/) https://starhack.it/ [從零開始學 ReactJS（ReactJS 101）簡體版 ](https://github.com/kdchang/reactjs101) [Redux項目目錄結構](https://blog.csdn.net/qq_26708777/article/details/78178732) [React-Native學習指南](https://github.com/reactnativecn/react-native-guide) http://andrewhfarmer.com/ # 達到 https://github.com/cllgeek/react-tutorial # [Expo XDE](https://expo.io/) Our tools enable developers to build and share truly native apps that work across both iOS and Android. Everything is **open source, free** and uses React Native. # 參考 [深度揭秘阿里移動端高性能動態化方案Weex](http://www.imooc.com/article/7073) [vuejs-手把手教你寫一個完整的購物車](http://www.qdfuns.com/notes/15098/e29384aab0d95e76f51ed1cd4086ee51.html) [Vue2.0網易云音樂播放器](http://www.qdfuns.com/notes/20928/6f51ea24ef14d2f1f51bc34727680bdc.html) [react精品教程__3天全集版](https://www.bilibili.com/video/av25294556/) # Next.js Next.js是個基于React、Webpack與Babel構建的，支持服務端渲染的小框架，其來源于ZEIT團隊，在React社區獲得了不小的關注度。 # React-like 除了 Preact，React-like 中比較出名的還有 Inferno，它大小在9kb左右。它和前面兩者相比，還加了一個新的特性就是無狀態組件（stateless components）也支持生命周期事件，從而可以減少 class 的使用，做到更加輕量。性能比 React 和 Preact 都要好，其它方面和 Preact 差不多。但是有個問題是 [Inferno](https://infernojs.org/) 用了一些相對較新的特性，比如 Promise、Map、Set、WeakMap 等，所以瀏覽器兼容性比 Preact 要差點。下面列出了一些實用的資源： https://react.rocks/ [Reactiflux](https://www.reactiflux.com/)上的#react-native。 [js.coach](https://js.coach/react-native)—React Native開源組件列表。 [awesome-react-native](https://github.com/jondot/awesome-react-native)—大量的React Native文章、教程和示例。 http://reactscript.com/ [MobX](http://cn.mobx.js.org/) # GraphQL/Relay/firebase 初體驗 https://www.bookstack.cn/read/reactjs101/Appendix04-README.md firebase # React VR # 相關站點資源 [Electron中文網](https://electron.org.cn/) [ReactNative中文網](https://react-native.org.cn/) [Npm中文網](https://npm.js.cn/) [Yarn中文網](https://yarn.org.cn/) [GraphQL查詢語言](https://graphql.org.cn/) [Kotlin編程語言](https://kotlin.hk/) # React Example [https://reactjsexample.com/](https://reactjsexample.com/) # React UI庫 [reakit](https://reakit.io/) [RSUITE](https://rsuitejs.com/) [Ant Design](https://ant.design/) 阿里巴巴 - 企業級的 UI 設計語言和 React 實現 [Element React](https://eleme.github.io/element-react/) 餓了么 - Element UI 的 React 實現 [Zent](https://www.youzanyun.com/zanui/zent) 有贊 - PC 端 WebUI 規范的 React 實現，提供了一整套基礎的 UI 組件以及一些常用的業務組件 [Pile](https://didi.github.io/pile.js) 滴滴 - 移動端 React 組件庫 # 書籍、教程 [REACT RESOURCES](https://reactresources.com/) [React.js 小書](http://huziketang.mangojuice.top/books/react/)