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
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
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
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
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
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
- 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
Download Project From Github
https://github.com/ManiruzzamanAkash/React-Crash-Course.git
You can get their code classes based on topics.
Top comments (0)