React 2019: React, Redux, React-Router, Hooks and Auth0

Learn the complete React-Redux front end system.
Free tutorial
Rating: 4.3 out of 5 (1,469 ratings)
34,278 students
React 2019: React, Redux, React-Router, Hooks and Auth0
Free tutorial
Rating: 4.3 out of 5 (1,469 ratings)
34,278 students
The Most Modern Version of React and Redux
Modern Authentication and Routing Patterns
The Knowledge and Skills to Apply to Front End Jobs
How React Works Under the Hood
The Knowledge to know how different Front End Technologies work together (enough knowledge to impress other engineers)
Modern ES5, ES6, ES7 Javascript Syntax.

Requirements

  • Basic HTML, CSS and Javascrript is helpful but not required
  • NO prior React or any other framework experience required.
Description

Why this course?


Other courses have made partial updates to older techniques and code, but this course is built from the ground up to include the most latest code and techniques from 2019+. You are getting the complete integrated modern techniques and code for React and Redux that are used in development today.


You don’t want to learn older code and techniques, then end up looking foolish in job interviews.


Instead of surface level explanations we will going in dept and seeing how these technologies work under the hood.



You will gain the necessary skills and knowledge to build any sort of front end app with React and Redux after this course.



React is the Present and Future

Demand for React is already at an all time high and will continue to grow for the foreseeable future. Learn the hottest front end framework since Jquery.



Get instant support directly from the author.


I will be here to guide you every step of the way. If you are confused simply post a question in the forum and I will personally answer it for you. I will try to answer your question within 1 business day.



I guarantee that this course will be worth your time or your money back. See you on the inside.


Who this course is for:
  • Those who want Job Ready React Front End Skills and Knowledge
  • People Looking to upgrade their careers
  • People wanting to break into web dev
  • People looking for front end Internships
Course content
7 sections • 107 lectures • 4h 39m total length
  • Course Promo
    00:46
  • Course Intro
    01:40
  • JavaScript refresher (optional)
    00:04
  • Text Editor (optional)
    00:13
  • Recommended to watch all videos on 1.5x speed
    00:12
  • node.js
    00:12
  • Command Line Tool
    00:20
  • Redux Dev Tools
    00:09
  • Developer Accounts
    00:16
  • Slides
    00:00
  • For more free courses in the future follow me on twitter
    00:03
  • Getting Started with create-react-app
    02:42
  • JSX Overview
    01:51
  • 03. Displaying variables in JSX
    02:05
  • 04. Understanding Class and Function Scopes
    02:58
  • 05. How extends Component works
    01:47
  • styling patterns in React
    04:54
  • React Under the Hood - the Virtual DOM
    08:48
  • Displaying Objects in JSX
    03:02
  • Props
    00:48
  • Components
    00:51
  • How functional Components work
    03:24
  • Props in functional components
    01:57
  • Props in class components
    02:33
  • React state
    02:09
  • Initializing State
    01:39
  • updating state with setState()
    03:35
  • updating state with the previous state
    02:34
  • working with multiple state properties
    02:59
  • Passing down state as props
    01:19
  • conditionally rendering in JSX
    02:07
  • ternary expressions
    02:02
  • alternate conditional rendering method
    02:42
  • summary of the 3 ways to conditonally render JSX
    00:23
  • lifecycle methods()
    03:53
  • Working with Lists
    06:22
  • working with forms
    09:11
  • What and why Redux
    01:18
  • 3 principles of Redux
    01:36
  • React-Redux oveview
    01:50
  • actions
    01:09
  • Action Creators
    00:33
  • Reducers
    02:29
  • Setting up the actions and reducer
    06:24
  • createStore()
    01:21
  • Creating a react-redux container
    04:26
  • mapStateToProps()
    00:57
  • mapDispatchToProps()
    01:23
  • the connect() method
    01:42
  • Connecting a container to React-Redux
    01:58
  • Summarizing the Redux Flow
    02:07
  • Testing our React-Redux container
    00:48
  • Setting up action creators
    03:54
  • Passing in data to action creators
    05:32
  • getting our data from redux state
    01:06
  • rendering data to the UI
    01:19
  • multiple reducers
    05:39
  • updating and reading state reference
    00:09
  • routing overview
    00:56
  • history syntax update
    00:05
  • setting up routes
    05:18
  • going deeper in react-router
    04:41
  • testing our routing
    03:39
  • in dept look at routing
    02:27
  • Switch and exact
    01:01
  • react router props
    01:39
  • dynamically rendering components
    04:45
  • auth0 flow
    01:51
  • setting up the auth0 app
    02:06
  • initializing the auth0 class
    05:34
  • JWT tokens
    01:01
  • pasing tokens and handleAuth()
    04:12
  • handling the callback and authentication
    04:56
  • authentication flow in Redux
    09:08
  • setting up the authcheck component
    04:57
  • setting up protected routes and the PrivateRoute HOC
    06:52
  • implementing the login and logout buttons
    03:28
  • Google oauth login
    03:09
  • facebook oauth login
    02:29
  • extracting the user profile data
    04:47
  • setting up profile action creators
    02:32
  • setting up the profile actions in authcheck
    03:15
  • dynamically render the profile
    07:07
  • silent authentication
    06:07
  • why not redux thunk
    00:39
  • React Hooks Intro
    00:34
  • 2 rules off using hooks
    00:31
  • 4 Hooks Overview
    01:24
  • useState() overview
    02:58
  • useEffect() overview
    01:07
  • useReducer() overview
    01:16
  • Context overview
    01:53
  • useContext() overview
    02:33
  • Migration Guide from Redux to React hooks
    00:45
  • 6 ways to update state reference
    00:09
  • Project Intro
    00:34
  • Starter Code
    00:00
  • creating your first React hook
    02:01
  • adding the useState() hook
    02:27
  • adding the useEffect() hook
    03:57
  • adding the useReducer() hook
    04:27
  • adding the useContext() hook
    07:22
  • adding a Global state with Context
    04:54
  • creating a form with React Hooks
    02:26
  • adding useReducer() to the form
    03:44
  • adding global state to the form
    05:45
  • Final Code
    00:00

Instructor
Full Stack Developer at Coding Spectrum
Mohammad Iqbal
  • 4.2 Instructor Rating
  • 1,998 Reviews
  • 56,391 Students
  • 3 Courses

Mohammad Has been working in Web Development since late 2015. He holds 5 development certificates from Udacity. He has also previously worked as a code reviewer for Udacity. He has also completed freelance projects for startups and other B2B clients.

He is passionate about coding and always interested in new technology. Feel free to drop a message if you want to discuss anything.