How to become an Intermediate React Developer from Zero

3 min readAug 19, 2021

Introduction

This is a complete crash course series tutorial about React to be compatible with Latest React Hooks and all...

In this tutorial, I’ve shown many more important concepts of React JS and completed 3 projects using React JS. Let’s dive into it and Learn to React Together.

Demo Portfolio Website

Before Going to In-depth video series, first, you can check our Live React Developed portfolio site on that video tutorial —

React App

Web site created using create-react-app

maniruzzamanakash.github.io

Topics Discussed in this Crash Course

Pre-Requisite to Start

Setup Visual Studio Code Editor with Better Code Snippet — https://devsenv.com/tutorials/3-enable-additional-plugins-for-better-react-development-react-basic-to-pro-series
Basic JavaScript Knowledge — https://www.w3schools.com/js
Basic ES6 Knowledge -
Let, Const, Var difference and More — https://devsenv.com/tutorials/4-let-vs-const-vs-var-clear-the-es6-concepts-and-makes-simpler-path-to-learn-react
ES6 Arrow Function — https://devsenv.com/tutorials/5-es6-basic-arrow-function-in-javascript-react-basic-to-pro
How Virtual DOM Works — https://devsenv.com/tutorials/7-how-react-work-%7C-real-dom-vs-virtual-dom-%7C-coding-structure-%7C-naming-convention

1) What is React & What it’s Done

a) React Is a UI Library. Made by Facebook & Now used by millions of Dev.
b) Responsible to make a dynamic page and make the frontend awesome.

2) How to Setup React

Setup Node JS — https://nodejs.org/en/
Create-React-App (CRA) Setup
https://reactjs.org/docs/create-a-new-react-app.html
npx create-react-app my-app

3) What is Component in React

React is fully based on component.
Component is a Minimal Part of UI.
It’s Just a Library, Not any Javascript Framework. It only handles the view Part

3.1) What is Used in React

JavaScript
JSX Element

4) How Many Components in React

a) Class-Base Component
b) Functional Component

5) Class-Base Component

Demo Class base component

6) Functional Component

Demo Functional Component

7) Class based component State Manage and Important Life Cycle Hook

this.state = {
 data: 'Hello'
}componentDidMount();

8) Hooks in React

useState()
useEffect()
useMemo()
useContext()
useReducer()
useCallback()

9) Component to Component Communication in React

Parent Component to Child Component props
Child Component to Parent Component onHandleClick

10) Styling & External Styling in React JS

CSS
Modular CSS
Bootstrap CSS

11) Conditional Renderings in React

View Data in conditional rendering

12) Loop through data in React

Loop through Task List Data

13) Input Handling in React

Complete Task Form and
Task List show

14) Simple Counter App in React

Simple Increment and Decrement Counter Project

15) Simple Contact Form in React

Same as the Concept of Task Title Entry Form

16) React Router Setup

React Router Quick Start — https://reactrouter.com/web/guides/quick-start

17) Complete a portfolio website using React using Fake Data

Demo Website Portfolio Link — https://akash.devsenv.com
Demo Fake Data List -

Use React Bootstrap
Master Layout of a Portfolio Website Using React
Home Page
Portfolio Page
About Page

Download Project

https://github.com/ManiruzzamanAkash/React-Crash-Course.git

How to install & Run

This project was bootstrapped with Create React App.

Clone Repository

git clone https://github.com/ManiruzzamanAkash/React-Crash-Course.git

Go to that folder

cd React-Crash-Course

Install NPM

npm i

Run on Local

npm start

Go to Browser and check the URL

http://localhost:3000

Change Your Dataset in

src/utils/data.js

Change Route

Change route to fix duplicate render. I’ve done only to publish React Page in Github — src/routes/index.js
at Line No - 23

{
    path: '/',
    component: Home,
    exact: true // This should true, I've added it as false in github just for page make in github
}

Check the Browser Again