└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # react-roadmap
 2 | 
 3 | If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.
 4 | 
 5 | * React has historically been targeted at early-adopters and experts
 6 | * Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects
 7 | * There’s a lot of bad marketing masquerading as React guides
 8 | 
 9 | Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.
10 | 
11 | ## Why should you listen to me?
12 | 
13 | There’s a ton of conflicting advice about React out there; why listen to me?
14 | 
15 | I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.
16 | 
17 | ## How to tackle the React ecosystem
18 | 
19 | All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.
20 | 
21 | You should learn, in this order, **without skipping ahead or learning concurrently**:
22 | 
23 | * React itself
24 | * `npm`
25 | * JavaScript “bundlers”
26 | * ES6
27 | * Routing
28 | * Flux
29 | * Immutable.js
30 | * Relay, Falcor, etc
31 | 
32 | Also: **you don't need to learn all of these to be productive with React.** Only move to the next step if you have a problem that needs to be solved.
33 | 
34 | ## Learning React itself
35 | 
36 | It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a [copy-paste HTML template](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) that you can save in an `.html` file and get started right away. **No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.**
37 | 
38 | I still think the easiest way to learn React is [the official tutorial](https://facebook.github.io/react/docs/tutorial.html).
39 | 
40 | ## Learning `npm`
41 | 
42 | `npm` is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called `CommonJS` (Google it -- it’s important) and lets you install command-line tools written in JavaScript.
43 | 
44 | Most reusable components, libraries and tools in the React ecosystem are available as `CommonJS` modules and are installed with `npm`.
45 | 
46 | ## Learning JavaScript bundlers
47 | 
48 | For a number of good technical reasons `CommonJS` modules (i.e. everything in `npm`) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into `.js` files that you can include in your web page with a `<script>` tag.
49 | 
50 | Examples of JavaScript bundlers include `webpack` and `browserify`. Both are good choices, but I prefer `webpack` since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a [plug-and-play template for getting started](https://github.com/petehunt/react-webpack-template) and I wrote a [how-to guide for webpack](https://github.com/petehunt/webpack-howto) for more complex use cases.
51 | 
52 | One thing to keep in mind: `CommonJS` uses the `require()` function to import modules, so a lot of people get confused and think that it has something to do with a project called `require.js`. For a number of technical reasons, I would suggest that you avoid `require.js`. It’s also not very popular in the React ecosystem.
53 | 
54 | ## Learning ES6
55 | 
56 | Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler will translate it for you.
57 | 
58 | If you just want to get things done with React, **you can skip learning ES6**, or try to pick it up along the way.
59 | 
60 | ## Learning routing
61 | 
62 | “Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a **router**.
63 | 
64 | The most popular router in the React ecosystem is [react-router](https://github.com/rackt/react-router). If you’re building a single-page application, use it unless you have a good reason not to.
65 | 
66 | **Don’t use a router if you aren’t building a single-page application**. Most projects start out as smaller components inside of a larger application anyway.
67 | 
68 | ## Learning Flux
69 | 
70 | You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there.
71 | 
72 | A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.**
73 | 
74 | React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.
75 | 
76 | **You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.**
77 | 
78 | If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.
79 | 
80 | ## Learning Immutable.js
81 | 
82 | [Immutable.js](https://facebook.github.io/immutable-js/) provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications. 
83 | 
84 | ## Learning Relay, Falcor etc
85 | 
86 | These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.
87 | 
88 | ## Courses and Learning Material
89 | 
90 | * [React For Beginners](https://ReactForBeginners.com) [watch]
91 | * [EggHead.io React Tutorials](https://egghead.io/technologies/react) [watch]
92 | * [React For Everyone](https://www.youtube.com/playlist?list=PLLnpHn493BHFfs3Uj5tvx17mXk4B4ws4p) [watch]
93 | * [Full Stack React / Redux / Immutable](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html) [read]
94 | * [React.js Introduction For People Who Know Just Enough jQuery To Get By](http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/) [read]
95 | * A cartoon guide to [flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207) and [redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6) [read]
96 | * [Learn You React](https://github.com/kohei-takata/learnyoureact) [code along]
97 | 


--------------------------------------------------------------------------------