4.26 out of 5
4.26
150 reviews on Udemy

React – The Complete Guide with React Hook Redux 2020 in 4hr

Learn how to create high performance web app with react. Hooks, Redux, React Routing, useContext, Fireabase and more
Instructor:
Kim Chen
22,865 students enrolled
English [Auto]
Build high performance and user friendly web app
Realize the power of using component in React
Unleash the power of JavaScript with the help of React

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?

Facebook

Instagram

Twitter

Netflix

Yahoo! Mail

WhatsApp

Dropbox

Atlassian

Salesforce

New York Times.

Reddit

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

1
Introduction
2
How to create a blank new react app

[OPTIONAL] Quick review on es6

1
var let and const
2
The problem of using let in switch cases
3
Template literal
4
Arrow function
5
Classes
6
Spread operator
7
Destructuring
8
Primitive vs Reference
9
Primitive vs Reference
10
Import and export
11
Array function
12
For in For of

[REACT ESSENTIALS] JSX

1
What is JSX?

JSX is a syntax extension to JavaScript. JSX produces React “elements”. We will explore rendering them to the DOM.

2
Import CSS

Import the custom stylesheet in your application

3
inline CSS

Create a javascript object to style an element with the inline style attribute

4
Curly braces in react

Create an object with styling information, and refer to it in the style attribute

5
Styles object

Ceate an object with styling information, and refer to it in the style attribute

6
Fast track to convert CSS to JS object
7
store jsx element to variable

[REACT ESSENTIALS] Functional Component

1
Create a list of card
2
Create card component

We can compose and render custom React components. This part we are going to create our own React card component.

[REACT ESSENTIALS] Props

1
Pass and receive props

React props are used to pass data from component to component. In this lecture, I will explain React props in greater detail.

2
Pass multiple props
3
The children of props

[REACT ESSENTIALS] State

1
useState and Change of State
2
passing function to component
3
Two way binding
4
Conditional rendering

[REACT ESSENTIALS] List

1
Rendering a list of cards
2
Delete a specific card
3
Fix unique key error
4
Change the name of a specific card

[REACT ESSENTIALS] Style

1
Dynamic style with javascript
2
Dynamic style with classes
3
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

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

5
Extract the styled button

[REACT ESSENTIALS] Lifecycle and useEffect

1
Convert functional base to class base
2
Convert Card component to class base component
3
Life Cycle Methods Diagram
4
React lifecycle - mounting

React lifecycle - mounting, when an instance of a component is being created and inserted into the DOM

5
React lifecycle - updating
6
React lifecycle - unmounting
7
useEffect
8
useEffect clean up

[REACT ESSENTIALS] React hooks - to improve the performance of the app

1
useEffect fetch data with axios
2
useEffect fetch a card
3
React Context
4
Multiple React Context
5
useContext
6
useReducer (Simpiflied)
7
useReducer (Normal)
8
multiple useReducer
9
useReducer with useContext
10
use of useReducer with useContext
11
use useReducer with useEffect to fetch the data
12
Beautify the list with ReactStrap / Bootstrap
13
useMemo
14
useMemo
15
useRef
16
useRef - deal with the unmount component problems
17
useCallback - to prevent the recreation of function
18
custom Hook - extract the logic
19
custom Hook.- using in form

[REACT ESSENTIALS] React Router

1
React Router
2
Link and NavLink
3
Program to redirect
4
Higher Order Component
5
Fetch the posts by using axios
6
Passing Parameters
7
Fetch specific post and using Switch from React Router
8
Page Not Found
9
Protected Route
10
Apply Protected Route

[REACT ESSENTIALS] Redux

1
Redux simplified version
2
Reducer
3
Store
4
Actions
5
Display the value with useSelector and also useDispatch
6
Dispatch the login action

[PROJECTS] Evernote Clone

1
Introduction to the evernote clone project
2
Create Navbar
3
Custom Hook

In this part , we are going to create a React custom hook, which give a generic way to get the data from the input field

4
Create Input Form
5
Create Home Component
6
Create Firebase Project
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.3
4.3 out of 5
150 Ratings

Detailed Rating

Stars 5
48
Stars 4
58
Stars 3
31
Stars 2
7
Stars 1
6
bb3344c6e5f4d5e7d98bce161a75ad09
30-Day Money-Back Guarantee

Includes

5 hours on-demand video
4 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Don't Miss Any Course Join Our Telegram Channel Join Channel
+ +