└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # React FAQ 2 | 3 | 本指南的目的是把关于 React 核心概念的优质内容集中起来，以便快速参考。 4 | 5 | 请保持学习的心态。 阅读，尝试，乱搞（没关系）。 6 | 7 | ### 加群交流 8 | 9 | React技术交流群 10 | 11 | ### 其它语言 12 | 13 | - [🇪🇸 Español](https://github.com/xDae/react-faq) 14 | - [🇬🇧 English](https://github.com/timarney/react-faq) 15 | 16 | ## 目录 17 | 18 | - [入门](#入门) 19 | - [历史](#历史) 20 | - [创建 React 项目](#创建-react-项目) 21 | - [为什么使用 React?](#为什么使用-react) 22 | - [JSX](#jsx) 23 | - [虚拟 DOM](#虚拟-dom) 24 | - [React 元素](#react-元素) 25 | - [组件](#组件) 26 | - [方法生命周期](#方法生命周期) 27 | - [组件类型](#组件类型) 28 | - [查找组件](#查找组件) 29 | - [属性](#属性) 30 | - [属性类型](#属性类型) 31 | - [状态](#状态) 32 | - [Children API](#children-api) 33 | - [绑定](#绑定) 34 | - [事件](#事件) 35 | - [渲染](#渲染) 36 | - [Keys](#keys) 37 | - [Refs](#refs) 38 | - [Context](#context) 39 | - [表单](#表单) 40 | - [控制组件](#控制组件) 41 | - [React Ajax](#react-ajax) 42 | - [模式](#模式) 43 | - [Gotchas](#gotchas) 44 | - [PATENTS](#patents) 45 | - [Mixins](#mixins) 46 | - [国际化](#国际化) 47 | - [第三方库](#第三方库) 48 | - [性能](#性能) 49 | - [动画](#动画) 50 | - [SVG & React](#svg--react) 51 | - [React Style Guides](#react-style-guides) 52 | - [Redux 和 Mobx](#redux-and-mobx) 53 | - [将 React 添加到现有 APP 中](#将-react-添加到现有-app-中) 54 | - [CSS 和 React](#css-和-react) 55 | - [测试](#测试) 56 | - [讨论/会议视频](#讨论/会议视频) 57 | - [为 React JS 贡献代码](#为-react-js-贡献代码) 58 | - [核心注释](#核心注释) 59 | - [通用的 React](#通用的-react) 60 | - [Deep Dive](#deep-dive) 61 | - [React Fiber](#react-fiber) 62 | - [视频课程](#视频课程) 63 | - [A11Y](#a11y) 64 | - [讨论](#讨论) 65 | - [练习](#练习) 66 | - [书籍](#书籍) 67 | - [Newsletters](#newsletters) 68 | - [Interview Questions](#interview-questions) 69 | - [工具](#工具) 70 | 71 | # 入门 72 | 73 | **零基础，之前没有听说过 React?** 74 | 75 | * [React 官方文档](https://facebook.github.io/react/docs/hello-world.html) 76 | * [Thinking in React - Pete Hunt](https://facebook.github.io/react/docs/thinking-in-react.html) 77 | * [Pete Hunt: React: Rethinking best practices (JSConf EU 2013)](https://www.youtube.com/watch?v=x7cQ3mrcKaY) 78 | * 🔥 [All the terrible things I did the first time I wrote a complex React App ](https://youtu.be/Fk--XUEorvc?t=20666) Raquel @raquelxmoss 79 | * [Teaching React Without Using React](https://medium.com/@ericclemmons/teaching-react-without-using-react-a4b87cfd4e87#.q8cyvryw1) Eric Clemmons @ericclemmons 80 | * [7 分钟学习 React](https://egghead.io/lessons/react-react-in-7-minutes) this is a slightly dated but still really good starter 81 | * [React 介绍](https://mva.microsoft.com/en-US/training-courses/introduction-to-react-16635?l=4wrKgdJrC_206218965) Eric W. Greene / Microsoft Virtual Academy 82 | * [React 完整入门指南 - React, Webpack, Babel, Redux, React Router, SSR](https://btholt.github.io/complete-intro-to-react/) Brian Holt(@holtbt) for Frontend Masters worshop 83 | * [书籍](#书籍) 84 | 85 | # 历史 86 | 87 | * [JSConfUS 2013 - Tom Occhino and Jordan Walke: JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w&index=10&list=PL37ZVnwpeshF7AHpbZt33aW0brYJyNftx) The one where React became #OSS 88 | * [Our First 50,000 Stars](https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html) Vjeux @vjeux 89 | 90 | # 创建 React 项目 91 | 92 | **怎么创建一个新的 React 项目?** 93 | 94 | * 💯 [create-react-app](https://github.com/facebookincubator/create-react-app) 95 | * [nwb](https://github.com/insin/nwb) if you need more control of the setup / config 96 | 97 | **Where can I find videos for using React Create App?** 98 | 99 | [React Create App + Express](https://www.youtube.com/watch?v=gbVhmaW04bc&feature=youtu.be) @sprjrx @ladyleet 100 | 101 | **Can I play around with React Online?** 102 | 103 | * [extends React.Component style](http://codepen.io/Arney/pen/OXYqWb) 104 | * [React.createClass style](http://codepen.io/Arney/pen/QERoaQ) 105 | * [React JSBin](http://react.jsbin.com/?html,css,js,output) 106 | * [WebpackBin](http://www.webpackbin.com/EkscblgMM) 107 | 108 | # 为什么使用 React? 109 | 110 | > 111 | * Composable components 112 | * Easy to use with existing projects 113 | * Declarative 114 | * Functional / Immutable friendly 115 | 116 | **Is it fast?** 117 | 118 | * [Is React.js fast? Faster than {framework}? … or are there more relevant questions to be asking?](https://medium.com/react-weekly/is-react-js-fast-faster-than-framework-or-are-there-more-relevant-questions-to-be-asking-bcf40211f89b#.ll2aubhbi) Jeff Barczewski @jeffbski 119 | 120 | **What so good about React?** 121 | 122 | * [7 Strengths of React Every Programmer Should Know About](https://vacuumlabs.com/blog/7-strengths-of-react-every-programmer-should-know-about) Samuel Hapák @samuha 123 | * [Design Principles](https://facebook.github.io/react/contributing/design-principles.html) 124 | 125 | # JSX 126 | 127 | **JSX 是什么?** 128 | 129 | >JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. - http://buildwithreact.com 130 | 131 | * [Tutorial: JSX](http://buildwithreact.com/tutorial/jsx) 132 | * [JSX in Depth](https://facebook.github.io/react/docs/jsx-in-depth.html) 133 | * [React’s JSX: The Other Side of the Coin](https://medium.com/@housecor/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98#.i5rmd9h07) Cory House @housecor 134 | * [What does JSX stand for?](https://twitter.com/tomocchino/status/769931611303321601) Tom Occhino @tomocchino 135 | 136 | **What does JSX really do for me?** 137 | 138 | [This is the sort of stuff JSX saves you from having to manage](https://gist.github.com/insin/8e72bed793772d82ca8d) Jonny Buchanan ‏@jbscript 139 | 140 | # 虚拟 DOM 141 | 142 | >The Virtual DOM provides a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM. 143 | 144 | **What is the Virtual DOM?** 145 | * [React's diff algorithm](http://calendar.perfplanet.com/2013/diff/) Christopher Chedeau @vjeux 146 | * [The one thing that no one properly explains about React — Why Virtual DOM](https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq) Sai Kishore Komanduri @saiki 147 | * [Pete Hunt: The Secrets of React's Virtual DOM (FutureJS 2014)](https://www.youtube.com/watch?v=-DX3vJiqxm4) 148 | 149 | **Is the Virtual DOM all about speed?** 150 | 151 | *No* 152 | 153 | See : 154 | 155 | https://twitter.com/dan_abramov/status/790326092582252544 156 | https://twitter.com/acdlite/status/779693791607336960 157 | 158 | > I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. **@sebmarkbage** 159 |
160 | > It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov** 161 |
162 | > React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov** 163 |
164 | >React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery) 165 | 166 | **Key Takeaway:** 167 | 168 | > React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops **@dan_abramov** 169 | 170 | # React 元素 171 | 172 | > Elements are the smallest building blocks of React apps. 173 | > Elements are what components are "made of ..." 174 | — [React Docs](https://facebook.github.io/react/docs/rendering-elements.html) 175 | 176 | * [What makes an 'Element' an 'Element' vs a component?](https://twitter.com/timarney/status/790540834466701312) Tim Arney @timarney 177 | * [Understanding the Difference Between React Elements and Components](https://quickleft.com/blog/understanding-the-difference-between-react-elements-and-components) Alex Johnson 178 | 179 | # 组件 180 | 181 | > Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - [React Docs](https://facebook.github.io/react/docs/components-and-props.html) 182 | 183 | **What are some of your best practices when working with components?** 184 | 185 | > * Keep it (F)ocused. 186 | * Keep it (I)ndependent. 187 | * Keep it (R)eusable. 188 | * Keep it (S)mall. 189 | * Keep it (T)estable. 190 | * or in short, `FIRST`. 191 | 192 | > — Addy Osmani https://addyosmani.com/first 193 | 194 | See : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr 195 | 196 | # 方法生命周期 197 | 198 | >Components have several "lifecycle methods" that allow you to override / run code at particular times. 199 | 200 | **What are Lifecycle Methods?** 201 | 202 | * [React components lifecycle diagram](http://codepen.io/eduardoboucas/full/jqWbdb) Eduardo Bouças @eduardoboucas 203 | * [Going further with React lifecycle methods](https://medium.com/@notrab/going-further-with-react-lifecycle-methods-2ffdc5bdf52c#.bu0ufrosb) Jamie Barton 204 | * [Component Specs and Lifecycle](https://facebook.github.io/react/docs/component-specs.html) 205 | * [My #reactjs component lifecycle cheatsheet for quick reference](https://twitter.com/pbesh/status/738008776805060608) Peter Beshai @pbesh 206 | * [React component’s lifecycle](https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df#.w7v5cw6tk) Osmel Mora @osmel_mora 207 | 208 | # 组件类型 209 | > There are two main types of components Functional and Class Components 210 | 211 | ``` 212 | // Functional Component 213 | function Welcome(props) { 214 | return

Hello, {props.name}

; 215 | } 216 | 217 | // Class Component 218 | 219 | class Welcome extends React.Component { 220 | render() { 221 | return

Hello, {this.props.name}

; 222 | } 223 | } 224 | ``` 225 | 226 | Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components. 227 | 228 | **How do I decide what type of Component to use?** 229 | 230 | >This comes down to a few factors... a primary one being you need to decide what a component should do. 231 | See: [Some Thoughts on Function Components in React](https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7#.2oazdyli1) from A. Sharif @sharifsbeat for some help deciding. 232 | 233 | Also: 234 | 235 | * [React.Component vs React.createClass](https://reactjsnews.com/composing-components) Naman Goel & Zach Silveira 236 | * [React.createClass versus extends React.Component](https://toddmotto.com/react-create-class-versus-component) Todd Motto 237 | * [4 different kinds of React component styles](https://www.peterbe.com/plog/4-different-kinds-of-react-component-styles) Peter Bengtsson @peterbe 238 | * [Functions as Child Components and Higher Order Components](http://rea.tech/functions-as-child-components-and-higher-order-components) Ken Ding 239 | 240 | **Stateless Function** [``````](http://reactpatterns.com/#stateless-function) 241 | 242 | * [React Stateless Functional Components: Nine Wins You Might Have Overlooked](https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.iydj782xq) Cory House @housecor 243 | * [Embracing Functions in React](https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30#.igvxagy0e) A. Sharif @sharifsbeat 244 | 245 | **Presentational and Container Components** [``````](http://reactpatterns.com/#container-component) 246 | 247 | * [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.xo2al5187) Dan Abramov @dan_abramov 248 | 249 | **Higher-Order Components** [``````](http://reactpatterns.com/#higher-order-component) 250 | 251 | * [ReactCasts #1 - Higher Order Components](https://www.youtube.com/watch?v=LTunyI2Oyzw) Cassio Zen @cassiozen 252 | * [React Higher Order Components in depth](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.mpb29ree6) @franleplant 253 | * [Higher Order Components: A React Application Design Pattern](https://www.sitepoint.com/react-higher-order-components) Jack Franklin @Jack_Franklin 254 | * [Mixins Are Dead. Long Live Composition](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.prpfdo79n) Dan Abramov @dan_abramov 255 | * [Higher Order Components: Theory and Practice](http://engineering.blogfoster.com/higher-order-components-theory-and-practice) 256 | * [Real World Examples of Higher-Order Components](http://rea.tech/reactjs-real-world-examples-of-higher-order-components/) Mehdi Mollaverdi @mehdimollaverdi 257 | * [Start Reacting: HOC](https://www.youtube.com/watch?v=ymJOm5jY1tQ) OliverFencott @OliverFencott 258 | 259 | **Function as Child Components** [``````](http://reactpatterns.com/#function-as-children) 260 | 261 | * [ReactCasts #2 - Function as Child Components](https://www.youtube.com/watch?v=WE3XAt9P8Ek) Cassio Zen @cassiozen 262 | * [Function as Child Components](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.10fbiyqc5) Merrick Christensen @iammerrick 263 | * [I've mentioned this before, but I'm a big fan of child functions in React](https://twitter.com/brian_d_vaughn/status/779362701596164097) Brian Vaughn @brian_d_vaughn 264 | 265 | **What types of components are there?** 266 | 267 | * [React Component Jargon as of August 2016](https://blog.anthonycomito.com/react-component-jargon-as-of-august-2016-28451d8ceb1d#.a417p5u26) Anthony Comito @a_comito 268 | 269 | # 查找组件 270 | 271 | **Where are some good places to find components?** 272 | 273 | * [React Components Catalog](https://github.com/brillout/awesome-react-components) 274 | * [React Rocks](https://react.rocks) 275 | 276 | # 属性 277 | 278 | **What are props?** 279 | >props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide 280 | 281 | See : [props vs state](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) 282 | 283 | **How do I pass props?** 284 | 285 | * [Transferring Props](https://facebook.github.io/react/docs/transferring-props.html) 286 | 287 | **How do I pass boolean values?** 288 | 289 | * [JSX `` and `` are equivalent](https://twitter.com/Jack_Franklin/status/768735664485568512) Jack Franklin @Jack_Franklin 290 | 291 | **Should I use import, props, or context in React?** 292 | 293 | * [Differences between require() and passing an object via prop or context](http://stackoverflow.com/questions/39111775/differences-between-require-and-passing-an-object-via-prop-or-context/39111942) Dan Abramov @dan_abramov 294 | 295 | # 属性类型 296 | 297 | >PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen 298 | 299 | **What are PropTypes?** 300 | * [What are PropTypes?](https://themeteorchef.com/snippets/what-are-proptypes) Ryan Glover @themeteorchef 301 | 302 | **Why are React PropTypes important?** 303 | * [Why React PropTypes are important](http://wecodetheweb.com/2015/06/02/why-react-proptypes-are-important) Niels Gerritsen @NielsG89 304 | 305 | **How do I validate props?** 306 | * [Better Prop Validation in React](https://medium.com/@MoeSattler/better-prop-validation-in-react-cc83590d311f#.wdhbsrlgj) Moe Sattler @travelperk 307 | 308 | # 状态 309 | 310 | > In one sense, “state” means the current visual representation of the app on screen... In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. - Dave Ceddia 311 | 312 | **What is state in React?** 313 | 314 | * [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react) Dave Ceddia @dceddia 315 | 316 | **How do I handle state?** 317 | 318 | * [The 5 Types Of React Application State](http://jamesknelson.com/5-types-react-application-state) James K Nelson @james_k_nelson 319 | * [State of React #1: A Stateless React App?](http://jamesknelson.com/state-react-1-stateless-react-app) James K Nelson @james_k_nelson 320 | * [A Case for setState](https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73#.w89epdtmo) Zack Argyle 321 | * [Where to Hold React Component Data: state, store, static, and this](https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00#.8k7tc37cs) Sam Corcos 322 | * [How to handle state in React. The missing FAQ](https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c#.dwz84fx9s) Osmel Mora @osmel_mora 323 | * [Should I keep something in React component state? I made a small cheatsheet.](https://twitter.com/dan_abramov/status/749710501916139520) Dan Abramov @dan_abramov 324 | * [Best Practices for Component State in React.js](http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html) Gabe Scholz @gabescholz 325 | * [Exploring React’s State Propagation](https://www.sitepoint.com/exploring-reacts-state-propagation) Eric Greene @ericwgreene 326 | 327 | **How can I decouple state and UI?** 328 | 329 | * [How to decouple state and UI](https://medium.com/@mweststrate/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37#.7l8ji1wer) Michel Weststrate @mweststrate 330 | 331 | # Children API 332 | 333 | * [ReactCasts #3 - React's Children API](https://www.youtube.com/watch?v=DJ53-G8EbxE) Cassio Zen @cassiozen 334 | 335 | # 绑定 336 | >The JavaScript bind method has several uses. Typically, it is used to preserve execution context for a function that executes in another context. 337 | 338 | **What should you use for binding methods in React classes?** 339 | * [To bind or not to bind?](https://twitter.com/dan_abramov/status/790612782471319553) Dan Abramov @dan_abramov 340 | * [fat Arrow vS Autobind VS bind](https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l) Dan Abramov @dan_abramov 341 | 342 | **What is this bind thing?** 343 | 344 | * [Don't Use Bind When Passing Props](https://daveceddia.com/avoid-bind-when-passing-props) Dave Ceddia 345 | * [5 Approaches for Handling Binding](https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.4z71l0kmb) Cory House @housecor 346 | * [How to Deal with `this` Reference Inside the Promise?](https://www.toptal.com/react/tips-and-practices) Toptal Developers 347 | 348 | # 事件 349 | 350 | **How does the event system work in React?** 351 | 352 | * [React events in depth](https://www.youtube.com/watch?v=dRo_egw7tBc) Kent C. Dodds, Ben Alpert, & Dan Abramov 353 | 354 | # 渲染/呈现 355 | 356 | **What should go in the render function?** 357 | 358 | * [Return as soon as you know the answer](https://medium.com/@SimonRadionov/return-as-soon-as-you-know-the-answer-dec6369b9b67#.82kxymyki) @SimonRadionov 359 | 360 | # Keys 361 | >React uses [keys](https://facebook.github.io/react/docs/reconciliation.html#keys) to help with Reconciliation (i.e. how it calculates the DOM diff for each render). 362 | 363 | ``` 364 |
    365 |
  • Duke
    • 366 |
  • Villanova
    • 367 |
368 | ``` 369 | 370 | **Why can't i put key in default props (or define the default somewhere else)?** 371 | 372 | * [Why can't i put key in default props](https://www.reddit.com/r/reactjs/comments/4mjdcf/why_cant_i_put_key_in_default_props_or_define_the/d3xwa6m) 373 | 374 | **What should I use for a key?** 375 | 376 | * [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.y4ru46ikc) Robin Pokorný @robinpokorny 377 | 378 | **What are some examples where I should manually change a key?** 379 | 380 | * [The key is using key](https://twitter.com/timarney/status/730785238654287873) Tim Arney @timarney 381 | 382 | # Refs 383 | 384 | >The ref attribute makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function. - reactenlightenment.com 385 | 386 | **What are refs and are string refs are bad?** 387 | 388 | * [Refs to Components](https://facebook.github.io/react/docs/more-about-refs.html) 389 | * [Why do you use findDOMNode()?](https://twitter.com/dan_abramov/status/752936646602031104) Dan Abramov @dan_abramov 390 | * [String refs are bad in quite a few ways](https://news.ycombinator.com/edit?id=12093234) Dan Abramov @dan_abramov 391 | 392 | # Context 393 | 394 | ⚠️ Context is an **advanced and experimental** feature. The API is likely to change in future releases. The rumours of its existence are true but be careful! 395 | 396 | * [ReactCasts #4 - Context (Part 1)](https://www.youtube.com/watch?v=lxq938kqIss&t=1s) Cassio Zen @cassiozen 397 | * [ReactCasts #5 - Context (Part 2)](https://www.youtube.com/watch?v=mwYHDXS6uSc&feature=youtu.be) Cassio Zen @cassiozen 398 | * [How to handle React context in a reliable way](https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc#.rtwgxxy0d) Osmel Mora @osmel_mora 399 | * [How to safely use React context](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076#.m6v9tsgub) Michel Weststrate @mweststrate 400 | * [Context all the things with React](https://www.youtube.com/watch?v=k9AhBMwj1w4) Stephen Rivas Jr. (@sprjrx) 401 | 402 | # 表单 403 | 404 | **How can I build forms with React?** 405 | 406 | * [Learn Raw React: Ridiculously Simple Forms](http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms) James K Nelson @james_k_nelson 407 | 408 | **How can I validate form input?** 409 | * [Elegant Form Validation Using React](https://spin.atomicobject.com/2016/10/05/form-validation-react) Jordan Schaenzle 410 | * [Building validated forms with great UX in React](https://youtu.be/1Urj4TZ5BLI?t=2437) Marcela Hrdá 411 | * [react-validation](https://github.com/vacuumlabs/react-validation) 412 | 413 | # 控制组件 414 | 415 | **What is a controlled component?** 416 | 417 | Via Loren Stewart @lorenstewart111 [React.js Forms: Controlled Components](http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components) 418 | 419 | >A controlled component has two aspects: 420 | 421 | 1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state). 422 | 423 | 2. Data displayed by a controlled component is received through props passed down from it's parent/container component. 424 | 425 | > This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture. 426 | 427 | #React Ajax 428 | 429 | **What is the best practice for getting server data into React components?** 430 | >It depends! See: [React AJAX Best Practices](http://andrewhfarmer.com/react-ajax-best-practices) Andrew H Farmer @ahfarmer 431 | 432 | * [Loading and Using External Data in React](http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react) Chris Coyier @chriscoyier 433 | 434 | # 模式 435 | 436 | * [React Patterns](http://reactpatterns.com) @chantastic 437 | * [React.js in patterns](http://krasimirtsonev.com/blog/article/react-js-in-design-patterns) Krasimir Tsonev 438 | * [Patterns For Style Composition In React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react) Brent Jackson @jxnblk 439 | * [Make Your React Components Pretty](https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e#.ctwfvx379) Mark Brouch @markbrouch 440 | 441 | # Gotchas 442 | 443 | **What are some React Gotchas?** 444 | 445 | * [React Gotchas](https://daveceddia.com/react-gotchas) Dave Ceddia 446 | 447 | # PATENTS 448 | 449 | **What's all this stuff I hear about Facebook PATENTS clause?** 450 | 451 | * [Some links to point people to when they misinterpret PATENTS clause or spread false claims](https://gist.github.com/gaearon/df0c4025e67399af72786d7ac7c819cc) Dan Abramov @dan_abramov 452 | * [React’s license: necessary and open?](http://lu.is/blog/2016/10/31/reacts-license-necessary-and-open) Luis Villa @luis_in_140 453 | 454 | # Mixins 455 | 456 | **Why are Mixins Considered Harmful?** 457 | 458 | * [Mixins Considered Harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html) Dan Abramov @dan_abramov 459 | 460 | # 国际化 461 | 462 | **How should I handle internationalization?** 463 | 464 | * [Internationalization in React](https://medium.freecodecamp.com/internationalization-in-react-7264738274a0#.bcfxgycwv) Preethi Kasireddy 465 | 466 | **What repos should I checkout for internationalization?** 467 | * [react-intl](https://github.com/yahoo/react-intl) 468 | * [react-localize](https://github.com/sprjr/react-localize) @sprjrx 469 | 470 | # 第三方库 471 | 472 | **How do I use third party libraries?** 473 | 474 | * [Integration with Third Party Libraries](https://www.youtube.com/watch?v=GWVjMHDKSfU&feature=youtu.be&a) Rally Coding 475 | 476 | # 性能 477 | 478 | **How can I make my app faster?** 479 | 480 | * [Component Rendering Performance in React](https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc#.gvyat7vkb) Grgur Grisogono 481 | * [Don‘t use PureComponent everywhere. Measure](https://twitter.com/dan_abramov/status/759383530120110080) Dan Abramov @dan_abramov 482 | * [React.js pure render performance anti-pattern](https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.hewsz120q) 483 | * [Should I use shouldComponentUpdate?](http://jamesknelson.com/should-i-use-shouldcomponentupdate) James K Nelson @james_k_nelson 484 | * [Reconciliation](https://facebook.github.io/react/docs/reconciliation.html) 485 | * [Quick slides on #reactjs performance](http://presentations.survivejs.com/react-performance/#/?_k=ivqhoe) Juho Vepsäläinen @bebraw 486 | 487 | # 动画 488 | 489 | **How do I animate things in React?** 490 | 491 | * 🔥 💯 [Animating In React](https://youtu.be/Fk--XUEorvc?t=2344 Sarah Drasner) @sarah_edo 492 | * [UI Animations with React — The Right Way](https://medium.com/@joethedave/achieving-ui-animations-with-react-the-right-way-562fa8a91935#.g8qmlz5d6) Joe Davis 493 | * [Animations with ReactTransitionGroup](https://medium.com/@cheapsteak/animations-with-reacttransitiongroup-4972ad7da286#.qmrksnixv) Chang Wang @CheapSteak 494 | 495 | **Is there declarative api for animations?** 496 | 497 | * [React Motion](https://github.com/chenglou/react-motion) 498 | * [A gentle introduction to React Motion](https://medium.com/@nashvail/a-gentle-introduction-to-react-motion-dc50dd9f2459#.aio7blbsi) 499 | 500 | **How can I animate Page Transitions?** 501 | 502 | * [React Page Transition Animations](https://medium.com/front-end-hacking/react-page-transition-animations-9d18c90a9831#.lc9943ajq) Huan Ji 503 | 504 | **What are some good repos to checkout for animation in React?** 505 | * [react-animations](https://github.com/FormidableLabs/react-animations) 506 | * [react-anime](https://github.com/stelatech/react-anime) 507 | * [react-motion](https://github.com/chenglou/react-motion) 508 | * [velocity-react](https://github.com/twitter-fabric/velocity-react) 509 | * [state-transitions](https://github.com/jacobp100/state-transitions) 510 | * [react-tween](https://github.com/clari/react-tween) 511 | 512 | # SVG & React 513 | 514 | **How do I work with SVG's in React?** 515 | 516 | * [Icons as React Components](https://medium.com/@david.gilbertson/icons-as-react-components-de3e33cb8792#.lmbz3v9ic) 517 | * [Creating an SVG Icon System with React](https://css-tricks.com/creating-svg-icon-system-react) @sarah_edo 518 | 519 | # React Style Guides 520 | 521 | **Where can I find some good React style guides?** 522 | 523 | * [Eventbrite React & JSX Coding Style Guide](https://github.com/eventbrite/javascript/tree/master/react) 524 | * [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react) 525 | 526 | # Redux 和 Mobx 527 | 528 | **What's (Redux/Mobx)?** 529 | 530 | * [Confused! Redux or MobX?](https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx) 531 | 532 | **Do I need to use (Redux/Mobx)?** 533 | 534 | * [You don’t need Redux if your data never changes. The whole point of it is managing changes.](https://twitter.com/dan_abramov/status/737036433215610880) Dan Abramov @dan_abramov 535 | * [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.kgnqdp8p6) Dan Abramov @dan_abramov 536 | * [Redux or MobX: An attempt to dissolve the Confusion](http://www.robinwieruch.de/redux-mobx-confusion/) Robin Wieruch @rwieruch 537 | A 538 | **How to scale React-Redux apps?** 539 | 540 | * [About folder structure, styling, data fetching, etc.](https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/) Max Stoiber @mxstbr 541 | * [How to choose between Redux's store and React's state?](https://github.com/reactjs/redux/issues/1287) 542 | 543 | # 将 React 添加到现有 APP 中 544 | 545 | **How do I start adding React to an existing app?** 546 | 547 | * [How to Sprinkle ReactJS into an Existing Web Application](https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application) Andrew Del Prete @andrewdelprete 548 | * [Don't Rewrite, React!](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) Ryan Florence 549 | * [Migrating Safely to React](https://www.youtube.com/watch?v=sXDZBxbRRag&list=PLNBNS7NRGKMG3uLrm5fgY02hJ87Wzb4IU&index=1) Jamis Charles 550 | 551 | # CSS 和 React 552 | 553 | **What about styling things in React?** 554 | 555 | You can use plain CSS or any preprocessor (Sass, Less etc...) with React. React outputs standard markup so technically you can keep doing what you've been doing. 556 | 557 | > Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. - kirupa 558 | 559 | * [What to use for React styling? ](http://andrewhfarmer.com/how-to-style-react) Andrew H Farmer 560 | * [Styling React](http://survivejs.com/react/advanced-techniques/styling-react) survivejs.com 561 | * [Styling in React](https://www.kirupa.com/react/styling_in_react.htm) kirupa 562 | * [Styling React Components in JavaScript](https://www.youtube.com/watch?v=0aBv8dsZs84) Michael Chan 563 | 564 | **What about using Bootstrap with React?** 565 | * [React-Bootstrap](https://react-bootstrap.github.io) - Bootstrap 3 components built with React 566 | * [bootstrap-loader](https://github.com/shakacode/bootstrap-loader) -Load Bootstrap styles and scripts in your Webpack bundle 567 | 568 | ### Component Level Styling 569 | 570 | > There are various approaches for React that allow us to push styling to the component level. - survivejs.com 571 | 572 | 573 | **What repos should I checkout for styling at the component level?** 574 | 575 | * [styled-components](https://github.com/styled-components/styled-components) + [Styling React Applications](https://youtu.be/1Urj4TZ5BLI) @mxstbr 576 | * [glamor](https://github.com/threepointone/glamor) @threepointone 577 | * [aphrodite](https://github.com/Khan/aphrodite)- Khan Academy 578 | 579 | Note: Also see - [Styled components or Glamor?](https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor) 580 | 581 | 582 | **What's the difference between what’s called "inline styles" and what's called “CSS-in-JS”?** 583 | * [Writing your styles in JS ≠ writing inline styles](http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js) Max Stoiber @mxstbr 584 | 585 | 586 | **I just need some simple inline styles ... What's the most basic way to use inline styles with React?** 587 | 588 | * [React Docs Inline styles](https://facebook.github.io/react/docs/dom-elements.html#style) 589 | * [classnames](https://github.com/JedWatson/classnames) - A simple javascript utility for conditionally joining classNames together. @JedWatson 590 | 591 | **What resources are available discussing the pros and cons of inline styles and CSS in JS?** 592 | * [PANEL ON 'INLINE STYLES'](http://shoptalkshow.com/episodes/180-panel-on-inline-styles) @ShopTalkShow 593 | * [CSS in JS may not be the solution to all your problems](https://blog.grommet.io/post/2016/08/10/css-in-js-may-not-be-the-solution-to-all-your-problems) Alan Souza 594 | * [CSS in JS + CSS Modules](http://www.dadsindev.com/12)@dadsindev 595 | * [CSS in JS tech chat](https://www.youtube.com/watch?v=BXOF_8jDdf8) Kent C. Dodds & Sarah Drasner 596 | 597 | **What about using CSS Modules for styling?** 598 | * [css-modules](https://github.com/css-modules/css-modules) @markdalgleish 599 | * [CSS Modules by Example](http://andrewhfarmer.com/css-modules-by-example) Andrew H Farmer 600 | 601 | **There's too many CSS in JS options how can I compare them?** 602 | * [React: CSS in JS techniques comparison](https://github.com/MicheleBertoli/css-in-js) Michele Bertoli @MicheleBertoli 603 | * [Comparison of CSS in JS Libraries for React](https://github.com/FormidableLabs/radium/tree/master/docs/comparison - radium) 604 | 605 | **How can I style/build a component that's very reusable customizable?** 606 | * [Reusable React Component with Overridable Inline CSS Styles](http://staxmanade.com/2016/06/reusable-react-component-with-overridable-inline-css-styles/) 607 | 608 | 609 | # 测试 610 | 611 | * [Testing React Applications](https://www.youtube.com/watch?v=eWN8F_WOBAQ) Jack Franklin 612 | * [People seem to laugh at this but I think it’s actually pretty reasonable](https://twitter.com/dan_abramov/status/762257231471579136) Dan Abramov @dan_abramov 613 | * [Worthwhile Testing: What to test in a React app (and why)](https://daveceddia.com/what-to-test-in-react-app) Dave Ceddia @dceddia 614 | * [Getting Started with TDD in React](https://daveceddia.com/getting-started-with-tdd-in-react) Dave Ceddia @dceddia 615 | 616 | # 讨论/会议视频 617 | 618 | * [React.js Conf 2016](https://www.youtube.com/watch?v=MGuKhcnrqGA&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY) 619 | * [ReactEurope](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A) 620 | * [ReactRally](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw) 621 | 622 | # 为 React JS 贡献代码 623 | 624 | **Where can I learn about Contributing to React JS?** 625 | 626 | * [Contributing to React JS](https://www.youtube.com/watch?v=wUpPsEcGsg8) Kent C. Dodds 627 | 628 | # 核心注释 629 | 630 | **Where can I find out what's going on with React / Upcoming versions?** 631 | * [core-notes](https://github.com/reactjs/core-notes/) 632 | 633 | # 通用的 React 634 | 635 | * [React on the Server for Beginners](https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app) Luciano Mammino @loige 636 | 637 | # Deep Dive 638 | 639 | * [Implementation Notes - How React Really Works](https://facebook.github.io/react/contributing/implementation-notes.html) Dan Abramov @dan_abramov 640 | * [Building React From Scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) Paul O'Shannessy @zpao 641 | * [React Architecture – OSCON](http://blog.vjeux.com/2014/javascript/react-architecture-oscon.html) Christopher Chedeau @vjeux 642 | * [ReactJS: Under The Hood](https://www.youtube.com/watch?v=xsKYAa1ZXpQ) Boris Dinkevich @BorisDinkevich 643 | * [REACT INTERNALS](https://zackargyle.github.io/react-internals-slides/#/?_k=7f19z9) Zack Argyle @ZackArgyle 644 | 645 | # React Fiber 646 | 647 | **What is React Fiber?** 648 | 649 | * Experimental - [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) Andrew Clark @acdlite 650 | * Experimental - [What's Next for React](https://www.youtube.com/watch?v=aV1271hd9ew) Andrew Clark @acdlite 651 | 652 | **Is Fiber ready yet?** 653 | * http://isfiberreadyyet.com 654 | 655 | **How can I contribute to Fiber?** 656 | * [Fiber Principles: Contributing To Fiber](https://github.com/facebook/react/issues/7942) 657 | 658 | # 视频课程 659 | 660 | **What are some good video resources/courses to learn React?** 661 | 662 | * https://egghead.io/courses/react-fundamentals FREE (+ paid for others) 663 | * https://reactforbeginners.com 664 | * https://app.pluralsight.com/courses/react-redux-react-router-es6 665 | * https://www.pluralsight.com/courses/react-flux-building-applications 666 | * https://frontendmasters.com/courses/react-intro (they have a bunch) 667 | * http://courses.reactjsprogram.com/courses/reactjsprogrambundle 668 | * https://LearnRedux.com 669 | * https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx 670 | * https://www.udemy.com/react-redux/ 671 | 672 | #A11Y 673 | 674 | **What about accessibility?** 675 | 676 | * [How to design for accessibility](http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility ) *Note:* not specific to React but a solid primer on the topic 677 | 678 |
679 | 680 | **How do I handle A11y in React** 681 | * [Excerpt from React.js Conf 2015 - Hype!](https://www.youtube.com/watch?v=z5e7kWSHWTg#t=631) Ryan Florence 682 | * [Bringing the Web Back to the Blind by Ryan Florence ](https://www.youtube.com/watch?v=YuzS-g6Qvq8) *Note:* not specific to React 683 | 684 | # 讨论 685 | 686 | * [React to the Future - Slide Deck](http://elijahmanor.com/talks/react-to-the-future/dist) Elijah Manor @elijahmanor 687 | * [React Things - PDF Slides](https://react.rocks/blog/images/React_Intro_sept_2016.pdf) Jeff Winkler @winkler1 688 | 689 | # 练习 690 | 691 | **Where can I get React training?** 692 |
693 | 694 | *Micheal Jackson* @mjackson & *Ryan Florence* @ryanflorence 695 | 696 | * https://reactjs-training.com 697 | 698 |
699 | *Brian Holt* @holtbt 700 | 701 | * https://btholt.github.io/es6-react-pres 702 | * https://btholt.github.io/complete-intro-to-react 703 | * https://github.com/btholt/react-redux-workshop 704 | 705 | # 书籍 706 | 707 | **Where can I find some good books about React?** 708 | 709 | * [React Enlightenment ](http://www.reactenlightenment.com) Cody Lindley @codylindley 710 | * [Build your first real world React.js application](http://academy.plot.ly/#react) Max Stoiber @mxstbr 711 | * [SurviveJS React](http://survivejs.com/react/introduction) 712 | * [Fullstack React](https://www.fullstackreact.com) 713 | 714 | # Newsletters 715 | 716 | **Where can I find React specific newsletters?** 717 | 718 | * [React.js Newsletter](http://reactjsnewsletter.com) 719 | * [React Status](http://react.statuscode.com) 720 | * [Fullstack React](http://newsletter.fullstackreact.com) 721 | * [This Week In React](https://thisweekinreact.com) 722 | * [React Digest](http://reactdigest.net) 723 | 724 | # Interview Questions 725 | 726 | * [12 Essential React.js Interview Questions](https://www.toptal.com/react/interview-questions) 727 | * [React Interview Questions](https://github.com/eltonjuan/react-interview-questions/blob/master/ReactInterviewQuestions.md) 728 | * [quiz.md](https://gist.github.com/gaearon/8fa9fdd2c4197ee0b52894877bf587a4) Dan Abramov @dan_abramov 729 | * [5 Essential React.js Interview Questions](https://www.codementor.io/reactjs/tutorial/5-essential-reactjs-interview-questions) 730 | * [The Vital Guide to React.js Interviewing](https://chandanpandey.com/2016/10/27/the-vital-guide-to-react-js-interviewing) 731 | 732 | # 工具 733 | 734 | * [StoryBook](https://getstorybook.io/) (A visual way to develop your UI components. Show them in different states and develop them interactively). `See` [Example StoryBook](http://airbnb.io/react-dates/) + [React Storybooks meets Create React App](https://voice.kadira.io/react-storybooks-meets-create-react-app-ac8a3f32cc79#.fcah86vcb) 735 | * [React Developer Tools](https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html) 736 | * [why-did-you-update](https://github.com/garbles/why-did-you-update) - Puts your console on blast when React is making unnecessary updates. 737 | * [Performance Tools](https://facebook.github.io/react/docs/perf.html) 738 | --------------------------------------------------------------------------------