In case anyone wants, here’s some links I’ve used for getting started with React:
React Notes:
http://mern.io/
http://redux.js.org/
https://webpack.github.io/
React Docs:
Component Lifecycle:
https://facebook.github.io/react/docs/component-specs.html
Supported Events to bind to:
https://facebook.github.io/react/docs/events.html#supported-events
JSX language in depth:
https://facebook.github.io/react/docs/jsx-in-depth.html
Misc:
https://facebook.github.io/react/docs/more-about-refs.html
https://facebook.github.io/react/docs/top-level-api.html
Tutorials:
Great Starting Tutorial:
https://github.com/learncodeacademy/react-js-tutorials
And the associated Video:
https://www.youtube.com/watch?v=1w-oQ-i1XB8&list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt
Video Series Tutorial for Redux:
https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree
Concepts:
What is Babel / ES6?
https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=%20%20%20%20this.setState(prevState%20%3D%3E%20(%7B%0A%20%20%20%20%20%20value%3A%20prevState.value%20-%201%0A%20%20%20%20%7D))%3B
“Smart" vs. “Dumb" Components:
https://css-tricks.com/learning-react-container-components/
What are actions & actions creators?
https://github.com/reactjs/redux/blob/master/docs/Glossary.md#action-creator
Async Actions (for making requests with Redux):
http://redux.js.org/docs/advanced/AsyncActions.html
Subtle concepts:
Binding methods in React classes (and a lot of background info on JS classes/inheritance):
http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
When to use this.setState() (TLDR - try not to, cause we use Redux):
https://www.reddit.com/r/reactjs/comments/3mpc0e/when_using_redux_when_should_react_components_use/
Two ways to create React Classes:
https://daveceddia.com/react-es5-createclass-vs-es6-classes/
Organizing your fie structure for a React app (opinionated):
http://marmelab.com/blog/2015/12/17/react-directory-structure.html
Airbnb React Style Guide:
https://github.com/airbnb/javascript/tree/master/react
More Example Starter App Guides:
Soundcloud App Example:
http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/
Sample React starter app tutorial:
http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/
Another app bootstraping guide:
https://auth0.com/blog/bootstrapping-a-react-project/
Testing:
http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/
https://www.toptal.com/react/how-react-components-make-ui-testing-easy
With Enzyme:
https://www.youtube.com/watch?v=0_8rESjFcro
Styling options (we’ll go with material-ui):
https://github.com/callemall/material-ui
http://elemental-ui.com/forms
https://react-bootstrap.github.io/components.html
https://www.muicss.com/docs/v1/react
Extras:
React Internationalization:
https://github.com/yahoo/react-intl
Authentication Options:
https://auth0.com/blog/adding-authentication-to-your-react-flux-app/
SO Questions I’ve used:
Conditionally Loading components (e.g. if data isn’t yet ready):
http://stackoverflow.com/questions/21278299/how-to-load-components-conditionally-in-reactjs
Passing event handlers to child components:
http://stackoverflow.com/questions/24103072/reactjs-onclick-handler-not-firing-when-placed-on-a-child-component
Binding input values to the component state:
http://stackoverflow.com/questions/34037777/react-binding-input-values
Should you implement common functionality with services in React? (TLDR- no, the Actions are your Services!!!)
http://stackoverflow.com/questions/35855781/having-services-in-react-application
How to load initial state in react components:
http://stackoverflow.com/questions/33997081/react-redux-loading-application-state-in-component-constructor
https://www.discovermeteor.com/blog/data-loading-react/
What’s the point of MapDispatchToProps?
http://stackoverflow.com/questions/37325419/mapdispatchtoprops-any-point
Using Constants in React:
http://stackoverflow.com/questions/32291851/how-to-define-constants-in-reactjs
Routing with React-Router:
http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router
Redux vs Flux (we use Redux):
http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux
Dispatching actions with timeout:
http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559
Misc:
React in 15 mins video (not comprehensive):
https://www.youtube.com/watch?v=PGUMRVowdv8
React Code Assistance if using the Webstorm IDE (recommended):
https://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/
Problems with React (opinionated):
https://www.reddit.com/r/reactjs/comments/3pm4b8/we_all_love_react_but_whats_your_1_problem_with_it/
React is mostly hype…
http://en.arguman.org/react-is-mostly-hype
Flux ToDoList app (optional, we don’t use Flux):
https://facebook.github.io/flux/docs/todo-list.html#content
Redux Providers (optional, should we look into this?):
https://medium.com/@timbur/react-automatic-redux-providers-and-replicators-c4e35a39f1#.cyvw2a9g4
Autocomplete Component:
https://github.com/prakhar1989/react-playground/blob/master/examples/basic-jsx-harmony/index.html
https://github.com/prakhar1989/react-shopping-cart
Devtools (useful):
https://github.com/gaearon/redux-devtools
"Is it passed in from a parent via props? If so, it probably isn't supposed to be state." - why…?