When I joined 10,000ft in November, I knew I needed to learn React and Redux fast. My background was primarily in server-side web development in PHP and I was really excited about the opportunity to dive into frontend development.
Learning React and Redux can feel a little intimidating at first, but fear not! This tutorial is here to help if you’ve recently joined a new company and/or you’re looking to learn React and Redux in a cinch.
After reading this article, you’ll have all the tools you need to successfully teach yourself React and Redux in two months or less. Whether you learn best by watching videos, talking to others, reading articles, or just diving in and building a project, this article provides a wide range of resources to get you started.
This tutorial assumes you have a little programming experience, but if you don’t, no worries. There are plenty of tips here for you as well!
Focus on the Fundamentals of React First
React is composed of simple concepts at its core, which is part of what makes it so great.
It’s founded on the idea that you can break up a UI into smaller, reusable components, then use those components to build very readable, declarative, composable views.
When the state of a component changes (e.g. by submitting text in a textbox), that component will react to that change by re-rendering affected components (e.g. a form shows updated text). But the really cool thing is that only associated components will re-render and it won’t require a full page reload.
That’s the big selling point of React. Not worrying about how or when to reflect state changes across all UI components is a terrific feature, especially when compared to the historical solution of manually updating DOM nodes on every state change. This is React’s secret sauce and a big reason why it’s so popular.
Once you understand and apply these core concepts, you’re off to a great start.
Before Learning Redux, Make Sure You Really Need it
There’s a great article written by a creator of Redux, Dan Abramov, called You Might Not Need Redux. The basic points he makes are:
- If you’re learning React for the first time, focus on React before learning Redux.
- If you do use Redux, you don’t have to use all of it. Utilizing local state by itself is OK, too.
With the recent updates to the Context API within React, you might not need to learn Redux at all. The Context API allows you to share props and state with an indirect parent or child. You can read more about recent updates to the Context API in this helpful article: How and When to Use React's New Context API.
Tutorials are Key
Here are my favorite tutorials I’ve used for learning React and Redux:
- Intro to React
This tutorial is directly pulled from official React documentation.
- Advanced React.js Tutorial Free
This was created by Ryan Florence, a co-author of React Router.
- Learn ReactJS
This is a great hands on course from codeacademy.
- Getting Started with Redux
This was created by Dan Abramov, a creator of Redux.
- Learn Redux by Building Redux From Scratch
A great article that outlines a high level overview of Redux.
Utilize Your Network
Having a network of people to call on can really help when you’re stuck on a bug, forget a concept, or can’t quite find the right answer in Stack Overflow. Utilizing your coworkers and colleagues is a great go-to for moments like this.
If you want more avenues for help, here are other ways to enlist and grow your network:
- Reactiflux - Official Discord React Group
- Reddit ReactJS Subreddit - r/reactjs
- Facebook React Community Group
Notable people to follow on Twitter
Find a Project to Build
Working on a project is the best way to help solidify what you’ve learned from tutorials. I recommend around 10% of your learning be instruction-based and 90% be actively programming.
It's hard to decide what to build after learning a new language. So, here are a number of helpful resources to help you find your first project idea:
- 25 Amazing Open Source React Projects of 2018
There are loads of great beginner and intermediate projects to build here.
- Sample React Text Generator App
This is a video tutorial for building a text generator app.
- Project Based Tutorials
These tutorials from official Redux documentation focus on building projects.
- Learn React in 7 Minutes
This article walks the reader through building a To Do App.
Tips for Handling Common Stumbling Blocks
If your stumbling blocks are more to do with ES6 syntax than with the fundamentals of React, it might be worth it to look into ES6 tutorials in combination with the tutorials listed here.
Another great resource is this article by my colleague Nick Cox, about 5 common React mistakes, and how to fix them.
Here are some other lessons I’ve learned:
- Nearly every issue I run into with React components is a problem inside the render() function of the component.
- Properties don’t change, state does.
- Try to avoid passing props through more than one component.
- If you start having a lot of props on one component, ask if your children really need all of them or if some can be removed or consolidated.
- If you have a ton of helper functions at the top of a class component, move them to a helper file to keep your component more organized.
- If you’re trying to reuse a component that’s proving difficult to reuse, don’t be afraid to alter it or create a new component.
- Every user interface is just a function of state.
Learning React + Redux Doesn’t End Here!
The most important thing is that you’re having fun and building tools you’re really excited about. Happy learning!