At the risk of looking like a shill for my own stuff, I'd suggest an alternative way to learn React.
Part of the difficulty is trying to understand it all "from the bottom up", where you can't see the big picture because you're getting constantly tripped by ES6 vs. JSX features and trivial differences in component declaration syntax and whatnot. Instead you can learn it "from the top down" using React Studio:
It's an application modeling environment that lets you experiment visually with concepts like data binding and immediately see how it affects the resulting JSX code.
Because you're always working on a complete web app (rather than e.g. isolated components), it can be easier to understand the full picture of how things fit together. For example, you can start by simply placing some elements in a screen, then move them into a component of their own, then bind the contents of those elements to some props that come through the component, and finally use that component within a list that gets populated from a real data source. (Speaking of working with real data, there's a great plugin for Firebase Cloud Firestore [1] that lets you do realtime database reads and updates.)
Under the hood, the exported projects are using Facebook's create-react-app. There's no proprietary framework layered on top, it's just plain React with minimal dependencies (no Redux, etc.) There's also git integration and a rather elaborate plugin system, so you can modify the output and integrate custom code as needed.
This "top-down" approach isn't right for everyone, but might be a good fit for a UI designer skill profile. You get to build applications and learn modern JavaScript along the way by examining the output, rather than having to figure out everything from scratch.
(Disclaimer: I wrote a big chunk of the React Studio UI and code export.)
Part of the difficulty is trying to understand it all "from the bottom up", where you can't see the big picture because you're getting constantly tripped by ES6 vs. JSX features and trivial differences in component declaration syntax and whatnot. Instead you can learn it "from the top down" using React Studio:
https://reactstudio.com
It's an application modeling environment that lets you experiment visually with concepts like data binding and immediately see how it affects the resulting JSX code.
Because you're always working on a complete web app (rather than e.g. isolated components), it can be easier to understand the full picture of how things fit together. For example, you can start by simply placing some elements in a screen, then move them into a component of their own, then bind the contents of those elements to some props that come through the component, and finally use that component within a list that gets populated from a real data source. (Speaking of working with real data, there's a great plugin for Firebase Cloud Firestore [1] that lets you do realtime database reads and updates.)
Under the hood, the exported projects are using Facebook's create-react-app. There's no proprietary framework layered on top, it's just plain React with minimal dependencies (no Redux, etc.) There's also git integration and a rather elaborate plugin system, so you can modify the output and integrate custom code as needed.
This "top-down" approach isn't right for everyone, but might be a good fit for a UI designer skill profile. You get to build applications and learn modern JavaScript along the way by examining the output, rather than having to figure out everything from scratch.
(Disclaimer: I wrote a big chunk of the React Studio UI and code export.)
[1] https://hackernoon.com/the-easiest-way-by-far-to-build-a-rea...