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, Ive shown many more important concepts of React JS and completed 3 projects using React JS. Lets 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 its 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.
Its 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 ReactHome 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.