Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React - The Complete Guide with React Hook Redux in 4hr

Name: React - The Complete Guide with React Hook Redux in 4hr
Rating: 4.3 (2056 reviews)

Learn how to create high performance web app with react. Hooks, Redux, React Routing, useContext, Fireabase and more

Created byKim Chen

Last updated 1/2022

English

English [Auto],

What you'll learn

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

Course content

17 sections • 131 lectures • 6h 41m total length

Introduction0:28
How to create a blank new react app2:46

var let and const3:01
The problem of using let in switch cases1:43
Explore how let behaves in switch cases and learn to fix shadowing errors by wrapping cases in blocks to create proper scope, demonstrated with color and input examples.
Template literal1:44
Master template literals in JavaScript to format console output and embed variables within strings using backticks, avoiding plus signs and escaping with backslashes.
Arrow function2:35
Discover arrow functions in React, using concise bodies for one-liners, leveraging implicit returns, and knowing when to omit braces or parentheses for single versus multiple parameters.
Classes2:09
Spread operator3:30
Destructuring2:30
Primitive vs Reference0:17
Primitive vs Reference3:30
Import and export5:35
Array function2:05
For in \ For of1:48

What is JSX?2:17
JSX is a syntax extension to JavaScript. JSX produces React “elements”. We will explore rendering them to the DOM.
Import CSS2:01
Import the custom stylesheet in your application
inline CSS1:49
Create a javascript object to style an element with the inline style attribute
Curly braces in react0:13
Create an object with styling information, and refer to it in the style attribute
Styles object2:36
Ceate an object with styling information, and refer to it in the style attribute
Fast track to convert CSS to JS object0:04
store jsx element to variable1:29
Store jsx element to a variable and reuse it in tests to demonstrate component manipulation. Apply styles to the element and observe how tests change when pasted or updated.

Pass and receive props2:19
React props are used to pass data from component to component. In this lecture, I will explain React props in greater detail.
Pass multiple props2:58
learn how to pass multiple props, including first name, last name, job title, and avatar, to a card component by wiring data and rendering the title and image.
The children of props2:59
Demonstrate using the children prop to render nested content inside a component, such as placing multiple buttons inside a cart by passing JSX between opening and closing tags.

Dynamic style with javascript1:22
Dynamic style with classes2:28
Styled component4:56
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
Theme3:18
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.
Extract the styled button2:00

Convert functional base to class base4:12
convert a functional component to a class-based one by importing the component, using a constructor with state for costs and cards, and moving render logic and handlers into class methods.
Convert Card component to class base component1:33
Life Cycle Methods Diagram
React lifecycle - mounting5:37
React lifecycle - mounting, when an instance of a component is being created and inserted into the DOM
React lifecycle - updating4:41
React lifecycle - unmounting1:28
useEffect2:36
useEffect clean up2:51

useEffect fetch data with axios3:24
useEffect fetch a card4:38
Create an input field bound to an id and fetch a specific card with useEffect to display the user name and phone number and ensure a single request.
React Context4:56
Multiple React Context1:42
useContext2:17
useReducer (Simpiflied)4:51
useReducer (Normal)6:17
Learn to use useReducer to manage multiple state counters as objects, defining action types for increment and decrement (including content1 and content2), and dispatching updates with initial state and reset.
multiple useReducer3:36
useReducer with useContext5:52
Demonstrate how to use useReducer with useContext to manage and share state across components, wiring initial state, dispatch, and a provider to drive a counter and form components.
use of useReducer with useContext2:09
use useReducer with useEffect to fetch the data6:24
Beautify the list with ReactStrap / Bootstrap2:17
useMemo3:48
Demonstrates using useMemo and memo to prevent unnecessary re-renders in a React app by memoizing a child component and rendering count only when state changes.
useMemo2:57
useRef1:28
useRef - deal with the unmount component problems4:23
useCallback - to prevent the recreation of function5:05
custom Hook - extract the logic5:31
custom Hook.- using in form5:33

Requirements

A window or mac computer
Basic JavaScript knowledge but is not a must
HTML and CSS fundamentals are beneficial but not a must
NO JS framework experience is required

Description

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 and also the payment with Stripe.

Which companies are using React now and why you need to learn?

Facebook

Instagram

Twitter

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

Stripe

Styled component

Redux

UI framework like Reactstrap, Materializecss

Firebase

StripeStyled component

Redux

UI framework like Reactstrap, Materializecss

Firebase

Stripe

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 and also the payment with Stripe.

Which companies are using React now and why you need to learn?

Facebook

Instagram

Twitter

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

Stripe

Styled component

Redux

UI framework like Reactstrap, Materializecss

Firebase

StripeStyled component

Redux

UI framework like Reactstrap, Materializecss

Firebase

Stripe

Who this course is for:

Anyone who want to start a career with React
Anyone who want to take the web development skills to the next level
Anyone who are interested in learning the most update technology

React - The Complete Guide with React Hook Redux in 4hr

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 3min

[OPTIONAL] Quick review on es612 lectures • 30min

[REACT ESSENTIALS] JSX7 lectures • 10min

[REACT ESSENTIALS] Functional Component2 lectures • 5min

[REACT ESSENTIALS] Props3 lectures • 8min

[REACT ESSENTIALS] State4 lectures • 12min

[REACT ESSENTIALS] List4 lectures • 14min

[REACT ESSENTIALS] Style5 lectures • 14min

[REACT ESSENTIALS] Lifecycle and useEffect8 lectures • 23min

[REACT ESSENTIALS] React hooks - to improve the performance of the app19 lectures • 1hr 17min

Requirements

Description

Who this course is for: