React JS Tutorial For Beginners to Intermediate - Crash Course - With 3 Complete Projects Example смотреть онлайн

React JS Complete Crash Course For Beginner to Intermediate Level - With 4 Complete Projects Example

Last Project Live Link - https://maniruzzamanakash.github.io/React-Crash-Course/

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

Topics -
Learn React Complete Crash Course with Three Complete Project - DevsEnv


0) Pre-Requisite to Start
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
Basic JavaScript Knowledge - https://www.w3schools.com/js

Basic ES6 Knowledge -
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

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

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


3) 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 handle the view Part

3.1) What is Used in React
JavaScript
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 Functional Component


7) Class based component State Manage and Important Life Cycle Hook

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
Global CSS
Inline CSS
Modular CSS
Bootstrap CSS


11) Conditional Renderings in React

12) Loop through data in React
Create a Simple Todo Application

13) Input Handling in React
Complete Task Form and
Task List show


14) Simple Counter App in React
Simple Increment and Decrement Counter Project

15) Simple Contact Form in React
Same as the Concept of Task Title Entry Form

16) React Router Setup
React Router Quick Start - https://reactrouter.com/web/guides/quick-start

17) Complete a portfolio website using React using Fake Data
Demo Website Portfolio Link - https://akash.devsenv.com
Demo Fake Data List -
Use React Bootstrap
Master Layout of a Portfolio Website Using React
Home Page
Portfolio Page
About Page
Contact Page

Tags: react js crash course,react js complete video tutorial,react js 2021,react js complete tutorial,react js with live project,react js tutorial in 2021,react js hooks tutorial,react js portfolio project,learn react js,learn react js completely,become a pro in react,how to learn react js,learning react js,beginner course of React JS,basic course of react js,basic tutorials of react js,learn react with project,react with real-life project,react development,react, React JS Complete Crash Course For Beginner to Intermediate Level - With 3 Complete Projects Example