React – The Complete Guide with React Hook Redux 2021 in 4hr
In this course you will learn to get start with React 16.8+ including what is JSX, how to use props to pass data to the children components, using the React hook useState and also styled component. We will not use more than 40 hours to talking to the same things again and again. You will learn all the react essential things within 4 hours.
Since this course is the mix of knowledge base and the project base. If you just want to learn the React knowledge fast, 4 hours is enough!!
After that we will also provide project to consolidate your understanding with react, and how to interact with backend like Firebase.
Which companies are using React now and why you need to learn?
Netflix
Yahoo! Mail
Dropbox
Atlassian
Salesforce
New York Times.
Cloudflare
Tesla
BBC
GitHub
PayPal
Uber
Zendesk and more…
The above list of big companies taking huge leaps to embrace React, which signifies the extent to which the technology has raised its bars.
What you will learn in this course?
Es6
React components
Jsx
Functional component
Props
State
List
Styled component
Redux
UI framework like Reactstrap, Materializecss
Firebase
[OPTIONAL] Quick review on es6
[REACT ESSENTIALS] JSX
[REACT ESSENTIALS] Functional Component
-
15
What is JSX?JSX is a syntax extension to JavaScript. JSX produces React “elements”. We will explore rendering them to the DOM.
-
16
Import CSS
Import the custom stylesheet in your application
-
17
inline CSS
Create a javascript object to style an element with the inline style attribute
-
18
Curly braces in reactCreate an object with styling information, and refer to it in the style attribute
-
19
Styles object
Ceate an object with styling information, and refer to it in the style attribute
-
20
Fast track to convert CSS to JS object
-
21
store jsx element to variable
[REACT ESSENTIALS] Props
[REACT ESSENTIALS] State
[REACT ESSENTIALS] List
[REACT ESSENTIALS] Style
[REACT ESSENTIALS] Lifecycle and useEffect
-
35
Dynamic style with javascript
-
36
Dynamic style with classes
-
37
Styled component
Styled Components enable writing of CSS in JavaScript using tagged template literals. In this lecture, we will produce the same effect by using styled components
-
38
Theme
Styled components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath itself via the context API.
-
39
Extract the styled button
[REACT ESSENTIALS] React hooks - to improve the performance of the app
-
40
Convert functional base to class base
-
41
Convert Card component to class base component
-
42
Life Cycle Methods Diagram
-
43
React lifecycle - mounting
React lifecycle - mounting, when an instance of a component is being created and inserted into the DOM
-
44
React lifecycle - updating
-
45
React lifecycle - unmounting
-
46
useEffect
-
47
useEffect clean up
[REACT ESSENTIALS] React Router
-
48
useEffect fetch data with axios
-
49
useEffect fetch a card
-
50
React Context
-
51
Multiple React Context
-
52
useContext
-
53
useReducer (Simpiflied)
-
54
useReducer (Normal)
-
55
multiple useReducer
-
56
useReducer with useContext
-
57
use of useReducer with useContext
-
58
use useReducer with useEffect to fetch the data
-
59
Beautify the list with ReactStrap / Bootstrap
-
60
useMemo
-
61
useMemo
-
62
useRef
-
63
useRef - deal with the unmount component problems
-
64
useCallback - to prevent the recreation of function
-
65
custom Hook - extract the logic
-
66
custom Hook.- using in form
[REACT ESSENTIALS] Redux
