Learning React
These are the steps I would recommend going through to familiarise yourself with React. This is aimed at a mid level web developer with no previous experience with React.
Introduction (1hr)
Run create react app. It will create a template project for you, so that you can start writing JSX.
Play around with it a little (20–30 min), see what you can customise, so you have some context when reading the documentation.
Documentation Fundamentals (2hr)
Scan the React documentation.
At a minimum, read all of the following pages:
Before moving on, aim to understand and use the React Component Lifecycle. Use the rest of the documentation, Google and playing around with the Create React App template to help.
React Patterns (2hr for intro, 6hr for full)
Read everything on React Patterns, particularly Higher Order Components and render props.
You will encounter the need for patterns like this when developing, so knowledge of pattern names and where to refer to is useful.
Redux (4hr)
Redux’s popularity is declining, in favour of in built React features and other state management techniques. However, it provides a good basis for techniques to manage state in React so is still worth learning.
Read the Introduction and Basics chapters of the Redux documentation.
Understand Redux data flow including actions, and reducers, the connect function and what causes a rerender.
Lastly, read of of the Redux Usage with React documentation
React Router (2hr)
Task: Add React Router (v4) to a create-react-app site and get basic routing to work.
CSSinJS
Understand why people would want to use CSSinJS.
This could be done by asking other developers, or reading this blog post:
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
Optimisation
Understand where performance bottlenecks can lie and how to avoid them.
e.g.
- The difference between a React.Component and React.PureComponent
- Only passing through props that contains the data needed
- Using ComponentShouldUpdate to decide whether a prop or changes should trigger a render
Tooling
Install the React and Redux plugins for Chrome and play around to see them update when you interact with your app.
Common Libraries
Watch this so you understand why React Router 4 is better than React Router 3 https://www.youtube.com/watch?v=Vur2dAFZ4GE
Read this so you understand why Final Form is better than Redux Form https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe
Miscellaneous
Atomic Design principles (also in a blog post)