- Do the React tutorial at https://reactjs.org/tutorial/tutorial.html I found this very strange when I first looked at it. It scared me – so many new ideas. But just persist until the end. Things will get easier. I promise. At the end of this, you may be a bit confused but you will have had a full tour of the basic React ecosphere.
- Next, read the docs at https://reactjs.org/docs/hello-world.html and execute the little examples as you go. Make sure you do all the tutorials on this list. 'Thinking in React' right at the end is quite good.
- On your own, build the functionality in the todos example here https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos This is from the Redux documentation at https://redux.js.org/docs/introduction/Examples.html Forget about Redux for now, just get this sample working.
- Modify your todo list by adding todos with a dialog via http://www.material-ui.com/#/components/dialog This will introduce the idea of pre-built React UI libraries. They are a bit like jquery-ui and there are lots of competing libraries, see https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651 for a full list. Hooking in a dialog helped me quite a bit with understanding the framework.
6. At this point, I wanted to learn Redux because it seems to be mentioned all the time in the React world. This has proved the most infuriating part of my learning to date. I wasted so much time on dead ends. I studied the official Redux examples for hours but they were more complicated than I liked. They use a lot of ES6 which, unless you are fully up to date with it, will confuse your learning of Redux. They also blur the line between what is Redux and what are React specific Redux integrations. Luckily I then came across this fantastic article that breaks Redux down in an example without any React. Combined with A Dummy’s Guide to Redux and Thunk in React I think I had made sense of React and Redux. Plus the examples in the official Redux examples then made sense. I also recommend this super simple React example which really lays the bones bare for React Redux tie ins.