Learn React Complete Crash Course with Three Complete Project - DevsEnv
Categories - React Js Tags - React Js JavaScript   Maniruzzaman Akash   2 months ago   361   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
    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

 

Previous
#5 Laravel Views
Next
React Context API - An Advanced Introduction and Complete Examples