The React Roadmap & What to Expect

The Path

Before we being on the path to becoming a better React developer, we wanted to give you a summary of what to expect in each of the upcoming Series and Shows.

Introduction to React

In this Series, we will get started right from the basics of React get to know what exactly the React library does. Along with that, we will cover some important concepts which are critical to React development like state, props and the concept of components. Once mastered, you will see yourself using these principles every time you work with React.

Working with Hooks

After tackling the bare minimum React theory in the previous series, we will dive into the crux of modern React development - Hooks. Hooks were introduced in React version 16 and they allow functional React components have feature parity with class components. As the modern React development has moved away from using class-based components, This series marks a major stepping stone in your React learning.

Intermediate React concepts

Once we have mastered the basics and React hooks, we will move on to some intermediate concepts. There are two major ways in which a user will interact with your React app. One is through button clicks, mouse movements and the other is through form fields. Both of these use cases will be covered as a part of this Series. Along with a bonus Show that talks about the difference between a class component and a functional component.

State management in React

Having covered the basics of React, Hooks and user input handling in the previous Series, we will move to the next critical concept that is state management. While building any industry-standard application with React, we will soon realise that sharing of state between components and managing their re-render is something that needs to be taken care of. This is where an external library comes into the picture as React is quite unopinionated in this Regard. We will look into the most popular state management solution - Redux as well as some of it’s alternatives.

Styling React apps

By now, we’ve learned everything about making a React app functional. In this Series, we look into how the app can be made aesthetic. We explore the different strategies of applying CSS styling to a React app so that it can look better while providing a responsive behaviour on different screen sizes.

React advanced hooks

In the earlier Series about hooks, we looked into the hooks that would mostly be used inside of every React app. In this Series, we look into the not-so-important React hooks which might still come in handy when you want to do some advanced React development.

React tooling

React is a rendering library and not a framework. What that means is, we cannot use React as a standalone tool. We always use it in combination with several other tools like a bundler and a transpiler etc. If you do not understand these terms and are also confused about how you can bootstrap a production-grade React app, then this Series will help.

Advanced React theory & design patters

This Series talks about some React concepts that were introduced in the latest versions of React. These are some bleeding edge features which have not seen a mass adoption yet, but are good to know just to have a sense of the capabilities that React offers. Feel free to skip this Series and come back to it after having built some projects. This Series also talks about two of the most common design patterns used in a React application.

Projects (beginner)

This series provides you with 5 examples of beginner-friendly applications that you can develop with your newly acquired React knowledge.

Projects (advanced)

This series builds on top of the previous series and provides examples of 5 projects that you can take up once you are a little comfortable with React development.