4.66 out of 5
4.66
2237 reviews on Udemy

React Front To Back

Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore
Instructor:
Brad Traversy
9,059 students enrolled
English [Auto-generated] More
Master React Concepts - Components, State, Props, etc
Learn & Use The Context API
Learn Redux From Scratch
Build & Deploy a Client Management App With React, Redux & Firebase/Firestore
Master ES6+ Features Like Arrow Functions, Spread & Async Await
Suitable For Both Beginners & Intermediate React Developers

In this course you will learn to master React 16.3+ concepts including the new Context API as well as Redux. We will target certain concepts while progressively building real applications. Whether you have never touched React or have been working with it for a while and want to learn more and build some cool stuff, this course is for you. The final project will be a React/Redux client management panel which uses Firebase for authentication and Firestore for storing data.

Here are some of the things you will learn in this course:

  • What is React?

  • Dev Environment Setup

  • ES6+ Concepts – Classes, Arrow Functions, destructuring, async/await

  • Class Based & Functional Components

  • JSX Syntax & Expressions

  • Component Props

  • Managing Component Level State

  • Context API For App Level State

  • Component Lifecycle

  • HTTP Requests

  • Redux Store Setup

  • Redux Reducers & Actions

  • Redux Firebase/Firestore Integration

Course Introduction

1
Welcome To The Course
2
Course & Projects Outline

Getting Started

1
What Is React?
2
Environment Setup
3
ES6 Refresher - Part 1
4
ES6 Refresher - Part 2
5
ES6 Refresher - Part 3
6
Create React App vs Manual Setup
7
Link For Manual Webpack Setup Video
8
Installing & Using The CLI
9
A Look At The Initial React Files & How They Work

Components, JSX & Props

1
Thinking In Components
2
What Is JSX?
3
JSX Expressions
4
Creating Your First Component
5
Functional Components
6
Working With Props
7
Typechecking With PropTypes
8
CSS In React
9
Adding Bootstrap

State & The Context API

1
Creating State
2
Events In React
3
Changing State
4
Changing State From Another Component
5
Using The Context API & Provider State
6
Adding A Context Reducer For Actions

Working With Forms

1
Creating A Form With State
2
Controlled Components & onChange
3
Uncontrolled Components & Refs
4
Form Submit Action To Context
5
TextInputGroup Component For DRY Code
6
Error Checking & Display

React Router v4

1
React Router Setup
2
Links, Params & Redirect
3
404 Not Found Page

Lifecycle, HTTP & Deployment

1
Lifecycle Methods
2
GET Requests
3
POST & DELETE Requests
4
Using Async/Await
5
EditContact Component & Fetch Contact
6
PUT Request & Update Action
7
Deploy To Github Pages

Learning Redux

1
A Note On Redux
2
App Starting Point For Redux
3
Redux Store Setup & Contact Reducer
4
Connecting Components & Dispatching Actions
5
Creating A Separate Actions File
6
Delete & Add Contact Action

Redux Thunk & HTTP

1
GET Request Dispatch
2
POST & DELETE Request Dispatch
3
Get Single Contact For Edit
4
PUT Request & Dispatch
5
Deploy To Apache

Client Panel Firebase Project - Part 1

1
App Intro & Demo
2
Firebase/Firestore Setup
3
Setup & AppNavbar Component
4
Dashboard, Sidebar & Clients Component
5
React-Redux-Firebase Setup
6
Connect Clients Component To Firestore
7
Add Client To Firestore
8
Client Details Component
9
Balance Update & Delete
10
Edit Client In Firestore

Client Panel Firebase Project - Part 2

1
Login Functionality
2
Logout & Navbar Update
3
Route Protection
4
Notify State & Alert Component
5
Settings Reducer & Actions
6
Settings Component
7
Persist Settings To LocalStorage
8
Implementing Settings
9
Register Functionality
10
Deploy To Firebase
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.7
4.7 out of 5
2237 Ratings

Detailed Rating

Stars 5
1590
Stars 4
514
Stars 3
99
Stars 2
22
Stars 1
9
7dfe313a1b1735b92ef7b4fd2619e737
30-Day Money-Back Guarantee

Includes

11 hours on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of Completion