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

Learn the complete React-Redux front end system.
Free tutorial
Rating: 4.2 out of 5 (1,285 ratings)
31,513 students
React 2019: React, Redux, React-Router, Hooks and Auth0
Free tutorial
Rating: 4.2 out of 5 (1,285 ratings)
31,513 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
Curriculum
7 sections107 lectures4h 39m total length
  • Course Promo
  • Course Intro
  • JavaScript refresher (optional)
  • Text Editor (optional)
  • Recommended to watch all videos on 1.5x speed
  • node.js
  • Command Line Tool
  • Redux Dev Tools
  • Developer Accounts
  • Slides
  • For more free courses in the future follow me on twitter
  • Getting Started with create-react-app
  • JSX Overview
  • 03. Displaying variables in JSX
  • 04. Understanding Class and Function Scopes
  • 05. How extends Component works
  • styling patterns in React
  • React Under the Hood - the Virtual DOM
  • Displaying Objects in JSX
  • Props
  • Components
  • How functional Components work
  • Props in functional components
  • Props in class components
  • React state
  • Initializing State
  • updating state with setState()
  • updating state with the previous state
  • working with multiple state properties
  • Passing down state as props
  • conditionally rendering in JSX
  • ternary expressions
  • alternate conditional rendering method
  • summary of the 3 ways to conditonally render JSX
  • lifecycle methods()
  • Working with Lists
  • working with forms
  • What and why Redux
  • 3 principles of Redux
  • React-Redux oveview
  • actions
  • Action Creators
  • Reducers
  • Setting up the actions and reducer
  • createStore()
  • Creating a react-redux container
  • mapStateToProps()
  • mapDispatchToProps()
  • the connect() method
  • Connecting a container to React-Redux
  • Summarizing the Redux Flow
  • Testing our React-Redux container
  • Setting up action creators
  • Passing in data to action creators
  • getting our data from redux state
  • rendering data to the UI
  • multiple reducers
  • updating and reading state reference
  • routing overview
  • history syntax update
  • setting up routes
  • going deeper in react-router
  • testing our routing
  • in dept look at routing
  • Switch and exact
  • react router props
  • dynamically rendering components
  • auth0 flow
  • setting up the auth0 app
  • initializing the auth0 class
  • JWT tokens
  • pasing tokens and handleAuth()
  • handling the callback and authentication
  • authentication flow in Redux
  • setting up the authcheck component
  • setting up protected routes and the PrivateRoute HOC
  • implementing the login and logout buttons
  • Google oauth login
  • facebook oauth login
  • extracting the user profile data
  • setting up profile action creators
  • setting up the profile actions in authcheck
  • dynamically render the profile
  • silent authentication
  • why not redux thunk
  • React Hooks Intro
  • 2 rules off using hooks
  • 4 Hooks Overview
  • useState() overview
  • useEffect() overview
  • useReducer() overview
  • Context overview
  • useContext() overview
  • Migration Guide from Redux to React hooks
  • 6 ways to update state reference
  • Project Intro
  • Starter Code
  • creating your first React hook
  • adding the useState() hook
  • adding the useEffect() hook
  • adding the useReducer() hook
  • adding the useContext() hook
  • adding a Global state with Context
  • creating a form with React Hooks
  • adding useReducer() to the form
  • adding global state to the form
  • Final Code

Instructor
Full Stack Developer at Coding Spectrum
Mohammad Iqbal
  • 4.1 Instructor Rating
  • 1,726 Reviews
  • 49,533 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.