The aim of this article is to handhold developers who wants to learn React . This article is part of the work in progress Web Developer Roadmap series. Once complete this series will be a step by step detailed guide to become a Web Developer. Awesome Right ? I know !!

Target Audience

Anyone who is interested in having a career in Web Development.

React

ReactJS is the leading UI library to develop web application. Its open source and is actively developed and maintained by the brilliant folks at Meta( previously Facebook). When you work on React, you will end up creating re-usable components which work with each other and eventually create beautiful pixel perfect User interface.

What is a component ?

In React, everything is a component. A component could be a Greeting Message shown to a user when he logs to an application. A component to show user avatar. could be a button or even a dropdown doing something within a web application. It could also be a slightly complicated component which is responsible for file uploads across the application. The main idea with Components is to make sure they are created in such a way that they can be re-purposed for multiple use cases. Sounds Interesting ? Read on.

Why should you learn React ?

1. React is the go to library for creating User Interface since a few years now
2. The demand for Web Developer was never this huge
3. Its fun

Prerequisites

1. A bit of HTML, CSS
2. Javascript

Why do I need HTML, CSS and Javascript ?

A lot of things you do in React will be JS, HTML and CSS. Yes, In that order. We use HTML to create the basic structure of the UI component. On Average, A React component consists of about 50% of javascript, 30% HTML and 10% CSS. Remaining 10% is just syntax related to React.

Note: Please do take these percentages with a pinch of salt. This is really to help you understand the importance of HTML, CSS and JS. Don't quote these percentages in any interviews. It wont help you :-)

So, Where do I start

I'll assume you are already aware of basics of HTML, CSS and JS. If you know a few HTML tags and how to style them, you are good to go.

Basics of JS

1. Various data types, declaring variables - var, let & const
2. Operators
3. If else statements
4. For loops, For Each, For Of loops
5. Functions
6. Arrays and Objects
7. Closures

Just make sure you read & understand everything in this MDN link and you will be fine.

Once you are done, read this MDN link for a quick reintroduction of the topics.

This will make sure you are ready.

ES6 & beyond

1. Promises
2. Spread and Rest operators
3. Template Literals or Strings
4. Arrow Functions

Pro Tip: Put knowledge to practice. Do examples of what you have read about.

Learning React.

With the Prerequisites taken care, now you can actually focus on learning about React. The official Documentation is pretty good.

React Basics - Level 0

1. Introduction to React
2. What is JSX and what is the need for JSX ?
3. Function components In React. (Feel free to skip class components)
4. Mindset needed to develop in React.
5. Props and State
6. Conditional Rendering & Handling Events
7. React Hooks - useState & UseEffect
8. Rules of Hooks

React - Level 1

1. Prop Drilling and Context
2. Refs & uncontrolled Components
3. Error Boundaries.
4. Babel, Webpack.
5. Higher Order Components
6. Make API calls to the server using fetch

React - Level 2

Once you have a clear understanding of Level 1, its time to start building real world applications with React and Friends. Friends? Yes, React is very good at showing data. For almost everything else it needs other libraries. Everything else means - Global State Management, Page Routing, Making API calls to name a few.

1. React Router
2. Axios
3. Mobx or Redux
4. Design Libraries like Material UI or MUI or antd

Learning these three libraries will make you that much closer to a real-world developer.

More to come

This is still a work in progress version. I'll add assignments in this section so that readers can practice and get better at React. More to come.

Until next time, Keep Learning, Sharing and Caring.

You can say Hello to me here.

_{Photo by Damian Zaleski}