Start with an HTML boilerplate which takes care of the details of transpiling (which are initially irrelevant to you in learning mode). My first react app started out in a file like this [1] and I didn't go and figure out how to set up a build or use ES6 features until I was > 1000 lines into it, with a working prototype.
If you have an idea for something you want to build as a learning experience, following the same flow as Thinking In React [2] is a good way to get started, using the docs as a reference as you start to explore each area.
- Start by writing a single component which implements render() to get a feel for using JSX.
- Then pass some props into it to get a feel for working with those and interpolating JS using {}.
- Then create a second component and use it from the first component's render() via JSX.
- Once you've done that, you should have enough knowledge to create a static prototype of whatever you want to build while learning and you can play about with componentisation as you go.
- Once you have a static prototype, you can start to learn about state and pass callbacks to child components when they need to update state held somewhere above them.
Just do the simplest thing to get it working until you understand what's going on with props and state. Don't jump straight into React Router, as you'd be missing a chance to learn about, for example, state (to control the current page), conditional rendering (to display whatever should be the current page component based on state) and component lifecycle hooks (to register a basic hashchange event handler to implement your own simple back/forward support). Don't jump straight into Redux, Flux or a cursor implementation, as you won't get a chance to experience the problems they solve first-hand. Build up your app's complexity gradually and come back to these things later once you feel like you have a handle on things.
If you have an idea for something you want to build as a learning experience, following the same flow as Thinking In React [2] is a good way to get started, using the docs as a reference as you start to explore each area.
- Start by writing a single component which implements render() to get a feel for using JSX.
- Then pass some props into it to get a feel for working with those and interpolating JS using {}.
- Then create a second component and use it from the first component's render() via JSX.
- Once you've done that, you should have enough knowledge to create a static prototype of whatever you want to build while learning and you can play about with componentisation as you go.
- Once you have a static prototype, you can start to learn about state and pass callbacks to child components when they need to update state held somewhere above them.
Just do the simplest thing to get it working until you understand what's going on with props and state. Don't jump straight into React Router, as you'd be missing a chance to learn about, for example, state (to control the current page), conditional rendering (to display whatever should be the current page component based on state) and component lifecycle hooks (to register a basic hashchange event handler to implement your own simple back/forward support). Don't jump straight into Redux, Flux or a cursor implementation, as you won't get a chance to experience the problems they solve first-hand. Build up your app's complexity gradually and come back to these things later once you feel like you have a handle on things.
[1] https://gist.github.com/insin/9c0712cef6ac8583b742#file-reac...
[2] http://facebook.github.io/react/docs/thinking-in-react.html