React Tutorial: A Beginner's Guide

React JS is a widely used JavaScript library, and its popularity is continuing to grow around the world.

Following image by Google Trends shows it's popularity in terms of web searches worldwide in the past 12 months in comparing it with Angular. Blue representing React JS and red representing Angular JS.

Why is React JS Everywhere?

Not only in web searches but you will find "React" everywhere from tech blogs, YouTube and most of the job descriptions in web development and even in app development.

This is because a lot of libraries and frameworks have been built around it in web and app development due to the features, flexibility and performance React offers. So, there is huge demand of React developers worldwide.

Most common interview questions

If you already are a bit familiar with React JS, see if you can answer at least 5 of the below mentioned questions.

1. How React JS differs from React Native, Angular, Vue.JS

2. Purpose of key attribute in React lists?

3. How to create custom hooks ?

4. How does React Router work ?

5. What are the common ways of managing state in React ? What is Redux ?

6. Client side rendering vs server side rendering with examples of how can both be done in React

7. Higher Order Components (HOC) and their usage

Mastering React JS:

I will help you master React JS with this in depth blog series, covering all important topics such as virtual DOM, state vs props, react components, hooks and more.

Whether you are a beginner or an experienced developer this series to enhance your understanding of React JS and prepare you for your success in web and mobile app development.

Outline

We will explore React JS in seven-in-depth articles, each addressing fundamental concepts and providing practical insights. List of topics to covered are as follows:

1. Introduction:

   1. What is React JS? Where can we use it ?

   2. Features

   3. Virtual DOM

   4. Sample Code

2. React Ecosystem Overview

   1. React vs React Native

   2. Client Side Rendering vs Server Side rendering

   3. Most popular web and app libraries

   4. Roadmap of web and app

3. React concepts - state, props

   1. Understanding difference between state and props

   2. Examples of state and props with sample code

4. Components in React

   1. Thinking in React

   2. SPA

   3. Higher Order Components in React

5. Function based components vs class based components

   1. life-cycle methods

6. React Hooks

   1. useState, useEffect, useRef, useContext etc

   2. Making custom hooks

7. State management

   1. Prop Drilling

   2. useContext()

   3. useReducer

   4. State Management Libraries

If you have any doubts in these or anything related to React JS. Feel free to comment. I'll happily answer them.

Thanks for reading!

Stay tuned!