How to Become an Intermediate Level React Developer from Zero Knowledge

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 Final Portfolio Website

Before Going to In-depth video series, first, you can check our Live React Developed portfolio site on that video tutorial — https://maniruzzamanakash.github.io/React-Crash-Course

Full Crash Course Video

Full Tutorial

https://devsenv.com/tutorials/learn-react-complete-crash-course-with-three-complete-project-devsenv

Topics Discussed in this React JS Crash Course

Pre-Requisite to Start

1. 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

2. Basic JavaScript Knowledge — https://www.w3schools.com/js
   Basic ES6 Knowledge -

3. 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

4. ES6 Arrow Function — https://devsenv.com/tutorials/5-es6-basic-arrow-function-in-javascript-react-basic-to-pro

5. How Virtual DOM Works — https://devsenv.com/tutorials/7-how-react-work-%7C-real-dom-vs-virtual-dom-%7C-coding-structure-%7C-naming-convention

6. 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.

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

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

What is Used in React

JavaScript
JSX Element

How Many Components in React

a) Class-Base Component
b) Functional Component

Class-Base Component

Demo Class base component

Functional Component

Demo Functional Component

Class based component State Manage and Important Life Cycle Hook

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

Hooks in React

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

Component to Component Communication in React

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

Styling & External Styling in React JS

CSS
Modular CSS
Bootstrap CSS

Conditional Renderings in React

View Data in conditional rendering

Loop through data in React

Loop through Task List Data

Input Handling in React

Complete Task Form and
Task List show

Simple Counter App in React

Simple Increment and Decrement Counter Project

Simple Contact Form in React

Same as the Concept of Task Title Entry Form

React Router Setup

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

Complete a portfolio website using React using Fake Data

1. Demo Website Portfolio Link — https://akash.devsenv.com
2. Demo Fake Data List -
3. Use React Bootstrap
4. Master Layout of a Portfolio Website Using React Home Page
5. Portfolio Page
6. About Page

Download Project From Github

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

You can get their code classes based on topics.