How to Become an Intermediate Level React Developer from Zero Knowledge
Tags: react, reactlearning, reacttutorial, portfolio
Published: 2021-08-19 18:35:23

##Introduction
This is a complete crash course series tutorial about React to be compatible with Latest React Hooks and all...

In this tutorial, I’ve shown **many more important concepts** of React JS and **completed 3 projects** using React JS. Let’s 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

{% youtube B9xGzJBJFyY %}


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

1. Basic JavaScript Knowledge — https://www.w3schools.com/js
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

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

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

####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
```bash
npx create-react-app my-app
```

####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 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
```js
this.state = {
 data: 'Hello'
}
componentDidMount();
```

####Hooks in React
```js
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
1. Demo Fake Data List -
1. Use React Bootstrap
1. Master Layout of a Portfolio Website Using React
Home Page
1. Portfolio Page
1. About Page


## Download Project From Github
https://github.com/ManiruzzamanAkash/React-Crash-Course.git

You can get their code classes based on topics.