Before trying to learn React or Redux, or use Webpack/Browserify or Babel, you should make sure you know Javascript at least reasonably well. A great resource learning Javascript is EloquentJS. If you have never programmed before, another great place to learn JS is Codecademy. The best resource for referencing the basic web languages (HTML, CSS, Javascript, and the DOM API) is the Mozilla Developer Network, commonly referred to as MDN.
- Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
- It's potentially hazardous to use ES2015 import/export syntax, as the loading definition is non-existant. Right now Babel compiles it to CommonJS, and it's better to use that directly.
-
Remember that the most basic guides makes generalizations and simplifications such that they aren't great references for "good" coding. The Guides, References, and Tips sections are your good references.
- The best way to use React is to stick (almost) exclusively to passing down props (for state and callbacks), and ignoring component state. You should almost always be able to use stateless function components.
Google and the React docs should be your first place to go for React help. If you can't find your answer there, check out the #reactjs IRC channel on Freenode, or the Reactiflux Discord channel.
Redux is a flux-like application state store. Redux (and indeed, any framework or flux implementation) is not needed to build good Javascript applications. That said, if you want a set structure for how to build you app (a framework), Redux is a good choice. Another popular choice is Alt, which is supposed to have very good docs for learning Flux.
Most Redux docs and tutorials assume you know some of the most commonly used ES2015 syntax; notably arrow functions, destructuring, and import syntax. One thing that many are getting wrong is using import syntax, and having Babel compile it to CommonJS. Do not use ES2015 import syntax. It's behavior is currently undefined!. You can see where it's at here. Instead, use CommonJS directly.
- The best way to get started with the Redux docs is to read (and code along with) section 1 through 1.3, skip 1.4 and 1.5 for now, and then go through sections 2 and 3.
- Section 2.5 requires you have a bit of an idea how React components work, specifically stateless function components, combined with arrow functions and destructuring.
- Once you have gone through these basics, and gotten a small test app to work, try using what you know now to build a small app. Don't worry about "best practice" yet. Much of the best practice subjects don't make much sense until you actually try to do the things which it protects against.
- Once you have built some small app with what you know, you might jump into the intermediate links below.
Google and the Redux docs should be your first place to go for Redux help. If you can't find your answer there, check out the #reactjs IRC channel on Freenode (there isn't an active, Redux specific channel), or the Reactiflux Discord Redux channel.