How to Learn React and Redux in Two Months or Less

Learning React and Redux can feel a little intimidating at first, but fear not! This tutorial is here to help you learn React and Redux in a cinch.

How to learn react redux logo above track

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:

React tutorials

Redux tutorials

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:

Online networks

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:

Tips for Handling Common Stumbling Blocks

Some of the main stumbling blocks I ran into when first learning React had nothing to do with React, but with ES6. Surprisingly, this is a common issue for folks who are first learning React while also brushing up on Javascript.

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!

These tips are just the start to learning React and Redux. There’s always more to learn when it comes to programming, especially when new features are being added to React, Redux and Javascript every day.

The most important thing is that you’re having fun and building tools you’re really excited about. Happy learning!

Perfectly reasonable business advice, delivered to your inbox.