Learn React Complete Crash Course with Three Complete Project - DevsEnv
Categories - React Js Tags - React Js JavaScript   Maniruzzaman Akash   2 years ago   3514   3 minutes   0

Learn React Complete Crash Course with Three Complete Project - DevsEnv

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




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



Change Your Dataset in




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


Booom !!! You made a great portfolio website.


See the complete Step by step article



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


PHP If-else-elseif and Switch-case
PHP String Functions - All necessary String functions in PHP to manage strings better.