This is a complete crash course series tutorial.

In this tutorial, I've shown many more concepts of React and complete 3 projects using React. Let's dive into it and Learn to React Together.
Please go to the bottom to see the codes Topic-wise, otherwise just continue and you could see the final project at - https://maniruzzamanakash.github.io/React-Crash-Course

0) 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
3. Basic ES6 Knowledge - 
   1. 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
   2. ES6 Arrow Function - https://devsenv.com/tutorials/5-es6-basic-arrow-function-in-javascript-react-basic-to-pro
   3. 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

1. Setup Node JS - https://nodejs.org/en/
2. 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

1. React is fully based on component.
2. Component is a Minimal Part of UI.
3. It's Just a Library, Not any Javascript Framework. It only handle the view Part

3.1) What is Used in React

1. JavaScript
2. 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 Funational 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

12) Loop through data in React

13) Input Handling in React

1. Complete Task Form and
2. Task List show

14) Simple Counter App in React

1. Simple Increment and Decrement Counter Project

15) Simple Contact Form in React

1. Same as the Concept of Task Title Entry Form

16) React Router Setup

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

17) Complete a portfolio website using React using Fake Data

1. Demo Website Portfolio Link - https://akash.devsenv.com
2. 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

http://localhost:3000

Booom !!! You made a great portfolio website.

See the complete Step by step article

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

Chapters or Topic Wise Codes

1. Components Learning - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/components

2. Component Communication - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/component-communication

3. CSS Styles Learning - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/css

4. Conditional & Loop Learning - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/condition-loop

5. Task Application - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/my-task

6. Components Learning - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/components

7. Counter App - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/counter-app

8. React Router Learning - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/react-router

9. Portfolio & Final Website - https://github.com/ManiruzzamanAkash/React-Crash-Course/tree/portfolio-template

Final website is also in main branch 

Video Tutorial Link