How to learn react in 2021
May 16th, 2021
Opinionated advice
- Skip Redux. Unless you have specific problems with state management, you can use what is built into React: hooks & context.
- You don't need class components. Functional components and hooks are enough. It's okay if you build class components as part of tutorials, but know that is how things were done in the before times.
- Learn just enough to solve a specific problem. React can do a lot, but you don't need to know everything to get started. Begin with learning what you need to build a page. Then try a form or some other type of interactivity.
- Learn what modern Javascript can do so you understand what is js and what is React. There has been a lot of syntactic sugar added in the last 5 years to make it a nicer language to use. Section one of this article sums the new stuff up nicely.
- Styling - Do what you'll be most productive in to start. If you've used vanilla CSS, stick with that. Same for SCSS. Don't tackle css-in-js until you have a solid footing with React.
Learning plan:
-
Get comfortable with HTML, CSS and Javascript fundamentals
- Including HTTP requests
-
Modern javascript
- Arrow functions
- Template literals
- Ternary Operator/Conditional Operator
- Destructuring
- Array methods
-
React fundamentals The React docs do a great job introducing the main concepts.
- jsx
- Thinking in components & design for reusability
- Props: passing in from parent and using in child
- How to lift state up
- Conditional show/hide
- Using events: onClick, onChange, onSubmit, etc
- State management
- List data (from file and api)
-
- useState: to store and manage data within individual components
- useEffect: to perform actions like HTTP requests or working with a browser API
- useRef: to reference JSX elements
- useContext: to access data from React Context to share data among components more easily [rather than passing props]
- useReducer: to store and manage data across multiple components
-
Fetching data from APIs
- REST
- GraphQL
Courses
- Udemy: Complete Javascript If you need to learn javascript, anything by this instructor is great. He also has an HTML & CSS course.
- Udemy: React-Redux I did this one years ago, and it has been updated many times since. I liked the way the instructor made things visual and the projects had good coverage of skills needed.
- freeCodeCamp: React. You can also learn HTML & CSS.
Beyond the basics
Once you get some confidence and get the hang of React, you'll need to figure out how to deploy into the wild.
-
Production Ready Toolchains
- Create React App for single page apps
- Gatsby my personal favorite
- Next.js
-
Hosting
- Netlify
- Github pages
- AWS
-
Routing
- If you're using CRA, you'll likely need routing eventually.
- Gatsby handles this for you
- Search
- Testing