10 Resources to Learn React and Redux

Paddy lock
7 min readSep 21, 2016

--

React and Redux have become a deadly combination that is being used for a lot of apps. Developers everywhere are turning to Redux with React, as opposed to Flux for the sole reason that it does everything Flux is supposed to but makes it easier for the developer to code. Using just a few lines of code, Redux can help your app in numerous ways, including pagination, hot reloading, server rendering, and so much more.

Let’s understand this dynamic duo together. React is a JavaScript library that simplifies the process of coding by allowing you to create interactive UIs using this library. It works as the View component from the Model-View-Controller (MVC), turning your code from JavaScript and rendering it into HTML. The 3 major benefits of working with React include declaration, component-based encapsulation and Learn Once, Write Anywhere (LOWA).

Declarations are simplified allowing developers to design a simple view for each state in the application, and React simply renders the components when the data changes. Components are encapsulated and manage their own state, making it easy for developers to pass rich data through your app and keep state out of the DOM. Lastly, React allows you to create new features in your existing app, without having to rewrite previously written codes.

This combined with Redux, which reduces the number of codes you need to write, makes them a powerful technology for any developer who is looking to build rich and interactive apps fast. Do you want to learn this dynamic duo?

Here are a few good references that can help you understand and get started with React and Redux.

  1. Redux Docs — Usage with React

One of the best parts about Redux is that you can write Redux with any language or program, including React JS, Angular, JavaScript, Ember, etc. This is what you can learn in this Redux docs, including what is Redux and its different components. However, the Docs dedicate a complete section to Redux working with React, because most commonly Redux is often used with React in a lot of applications. The Docs covers the basics of Redux including installing Redux, differences between presentational and container components, Redux component hierarchy, etc.

2. The Complete Web Development Tutorial Using React and Redux

If you don’t want to look high and low for different resources to learn React and Redux, then look no further. This resource comes with everything you would need to learn Redux and how it can be used with React. From fundamentals of the Redux framework and how it works with React JS, to designing a complete application from scratch using both, you will find everything in this comprehensive course.

3. Redux Tutorial #1 — React js tutorial — How Redux Works,

This Redux tutorial breaks down the schematics of a Redux application and shows you how Redux works with React. The best part is that it includes a working application to show you how it works in real life, while also touching up on theory. It also includes the different ways you can configure Redux. It’s a 7 part video tutorial and you can find the rest of the parts here — Part 2, Part 3, Part 4, Part 5, Part 6, and Part 7.

4. How to Build a Todo App Using React, Redux, and Immutable.js

For those who have experience in coding, but not have used React and Redux to create an application, here is your chance. This React JS and Redux tutorial helps break down the practical applications of React and Redux and shows you exactly how you can use these technologies to create a simple To Do App, but don’t be fooled, in addition to simple apps you can also create more complicated ones.

5. 101 Redux Examples

This is an interesting Redux tutorial which helps you learn the practical applications of Redux. If you understand the theory behind Redux and how it works on paper, you can definitely practice your skills until you perfect them using this tutorial. It includes 101 different projects created using Redux and other technologies including React. You can check out their coding and see the video tutorials of how each example can be created from scratch. More projects are constantly being added to this website.

6. Getting Started With React Redux: An Intro

This React JS tutorial will how you how to create an introductory app using React and Redux. The author has created numerous apps using just Redux and also using a combination of both React and Redux and hence has written a very basic and introductory blog post summarizing the different things you need to know about both the technologies. The author focuses the post on how to correctly structure your apps and how to solve problems that arise during coding.

7. Modern React with Redux

This Redux tutorial does not solely focus on React JS and Redux JS but also on other factors including NPM, Webpack and ES6. However, be warned that this tutorial is not for complete beginners and you must have some experience in web developing, especially when it comes to JavaScript. You will learn the fundamentals of Redux and also how to create single page apps with Redux. It is slightly on the expensive side, but it is definitely worth it because it delves in deep to help you not only learn but also master Redux.

8. Your First Immutable React & Redux App

This is a good resource for anyone who doesn’t like industry jargons. If you are just getting started with coding and programming then I’m sure you haven’t yet gotten all the big and complicated words that are used by programmers. This blog post breaks down the Redux documentation, helping you understand the crux of the technology without getting lost in all the words. This Redux tutorial will also help you create your own Immutable React and Redux app.

9. Redux: React Counter Example

If you are serious about learning Redux and React or programming in general, you can definitely purchase an account on the Egghead.io website. Once a member, you can learn Redux from the author of the technology, Dan Abramov. Additionally, you will also get access to all the content and various different tutorials on the Egghead.io website.

10. Tutorial: Let’s Build a Redux Powered React Application

This is another great react and redux tutorial that can help you start developing using both of these brilliant technologies. It is a step by step tutorial to help you get started with your first Redux application and also includes Stormpath React SDK for user authentication. Understand the basics of Redux and React, including React components, stores, actions, and even reducers. It includes everything you need to get started with your first app.

Apps are playing a huge part in our digital lives, and these apps need to be powerful and fast to build. No one has time to design and modify for years, before release. This is where Redux and React play a big role. Here is where you can step up in the app development world, making bigger and better apps for your consumers.

These are just a few of the many different resources available online to learn React and Redux. In case you find any other brilliant resources or websites, please feel free to share it with our readers in the comments section below.

Also Check out our new Campaign on Indiegogo Learn Mobile Programming With React Native. Learn to build professional mobile apps for Android, iOS and Windows using React Native.

--

--