Udemy

Platform

English

Language

Web Development

Category

The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)

Become an advanced ReactJS developer, build and deploy three production-ready apps with React, React Hooks, and NodeJS.

4.70 (37 reviews)

Students

17 hours

Content

May 2021

Last Update
Regular Price

WES BOS
Wes Bos
Build 30 things in 30 days with 30 tutorials
FREE COURSE
FULLSTACK.IO
Fullstack.io
The Complete Guide to ReactJS and Friends
$59.99

What you will learn

Build and deploy responsive and production-ready React apps from scratch

Setup and develop a React app with firebase (cloud functions, cloud messaging, realtime database, storage, auth)

Master React Hooks and latest React syntax

Master state management with React Hooks and Context API

Learn and practice bleeding-edge JavaScript (ES2020)


Description

Created with up-to-date versions of React, React Hooks, Node.js, JavaScript, and Firebase.

------

What is this course all about?

This course is about React - a library that helps developers to create user interfaces on the web. But React is not limited only to user interfaces, there is much more to that.

Have you ever wondered how Facebook, Twitter, or Netflix websites are built and why they don't feel like websites at all? React can answer all of that. In this course, we show how to create mobile-feel-like websites (Single Page Apps) where React is the foundation.

First, we will guide you through the basics of web development before jumping into React. Here we will talk about the latest JavaScript, Node.JS, Git, APIs, and essential tools to make you feel as comfortable as possible at any stage of the development process.

Then we slightly move to React with a small portion of theory. At this point, you will get to know what React is made of and how it works.

Our first project is a Tic-Tac-Toe game. Here you will get to know React basics, hooks, and core functionality. By the end of this project, you will be able to create a simple web app that shows off your strong React basics. Here you will experience the development flow of a React app in general.

The second project is a movie search web-app called Box Office. With this project, we move towards more complex React use-cases and we start working with external APIs, dynamic layout, and pages combined with different approaches for styling a React app. Here we will work with more advanced and custom React Hooks. At the end of this project, we will analyze and optimize the app with React hooks to make it even more faster and reliable. We will even turn it into a Progressive Web App that works offline!

The final project is going to be a Chat app. It will include the following features: social media logins, account management, role-based permissions, real-time data, and lots of others. In this project, we will combine React with Firebase - a backend solution in the cloud, powered by NoSQL database. You will master global state management with Context API and sharpen your knowledge of React hooks. At the final stage, we will extend the app with a custom backend in form of serverless.

All of our projects will have a user-friendly and well-designed user interface that is responsive and optimized for all devices.


Is this course exactly what are you looking for?

If ...

  • ... you are eager to learn front-end development with React from scratch ...

  • ... you have some experience with React, but you don't feel confident ...

  • ... you only started to learn web development and want to move towards modern tools and technologies ...

  • ... you feel that you stuck doing only HTML, CSS and some JavaScript ...

... then this course is definitely for you!

What do you need to succeed in this course?

  • HTML and CSS is absolutely required

  • General/basic understanding of programming or JavaScript

  • No prior experience with React or JavaScript frameworks

  • Passion to learn new things :)

After this course, you will have:

  • Three real-world React projects of different complexity that can be put into your resume

  • Total React comprehension

  • Experience with popular React libraries

  • Knowledge of how to create and deploy React apps

  • Knowledge of custom serverless backend and Firebase

Topics that will be covered and explained:

  • React basics (syntax, core concepts, theory)

  • Scaffolding templates (create-react-app, nano-react-app /w Parcel)

  • Styling of React apps (CSS, SASS, UI components library, CSS-IN-JS /w Styled components)

  • Conditional rendering (dynamic content and styles)

  • State management, local + global (/w React Hooks, Context API)

  • Components analysis and optimization (/w React hooks)

  • Complex layout management

  • Dynamic pages with React Router

  • Progressive Web Apps and service workers

  • Real-time subscriptions in React

  • Using external APIs to fetch remote data

  • Deployment of React apps (github pages, surge, firebase)

  • Serverless backend with cloud functions in node.js

  • Latest and modern JavaScript (ES6 - ES2020)

Not part of React, but included:

  • Git, Node.js, APIs, ESLint and Prettier quick guides

  • Firebase (/w NoSQL realtime database, cloud functions, cloud messaging, cloud storage)

  • Serverless cloud computing idea and concept + explanation about docker containers


Don't just take our word for it, see what our past students had to say about this course:

"First of all, the course is really well done and very comprehensive. It covers important real-world concepts like optimizing your code with code splitting, memoizing, useCallback." - Toni S

"Great course content & prompt response to Q&A!" - R L

"Instructors are responsive, got help quickly when I needed it." - Leigham Springer-sutton

What if you stuck during the course?

Getting stuck is the worse and inevitable. At the same time it's a common thing for a developer. We understand that and we are always ready to help you out with your questions as quickly as possible.

What if you are not satisfied with this course?

We are so confident that you will love this course that we're offering a 30-day money-back guarantee! You can sign up today with zero risks.

What are you waiting for? Enroll today!


Screenshots

The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)
The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)
The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)
The Complete React Bootcamp 2020 (w/ React Hooks, Firebase)

Content

Introduction

What is This Course All About?

Requirements

Before We Start

Introduction

Installing Git (+ Git Bash)

Installing Node.js

Installing VSCode

VSCode Configuration & Extensions

Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static)

What are Server, JSON, REST API and GraphQL?

Github Note

Working With Git - Part 1

Working With Git - Part 2

What are Node.js and NPM?

What are ESLint and Prettier?

VS Code Shortcuts

Look Through Modern JavaScript

Introduction

Var VS. Let VS. Const

What is Array.map used for?

What is Array.reduce used for?

Function Declaration VS. Expression

Arrow Functions and Default Function Arguments

String Interpolation

Object and Array Destructuring

Spread and Rest Operators

Async and Sync Code - Promises and Async Await

What is React Exactly?

What is React?

Component-based Approach

Functions vs. Classes

React Under the Hood

Check how good you undestand React

Starting up With React (Parcel) Tic Tac Toe Game

Introduction

Required Assets

Scaffolding a React App With Parcel - Installing Development Dependencies.

Installing Dev Dependencies

Creating New Components & Props

Children Props

Styling React Components - Our Style Structure

Creating a Game Board State - React States and Events

Component Lifecycle & Lifecycle Events

Winner Calculation - State Sharing Across Components

Adding Game History - Part 1

Adding Game History - Part 2

Conditional Rendering

Highlighting Winning Combination

Styling The Entire App

Deployment to Surge

Summary

Final Project

Box Office Project - CRA

Introduction

Required Assets

Scaffolding the Project

Creating Pages in React - React Router (Part 1)

Creating Navigation Bar & Page Components

Multiple Layout Management - Creating Main Layout

Creating Search Bar - Working With an API

Displaying API Results - Custom Render Function

Adding Actors Search With Radio Buttons

Creating Preview Cards for Show and Actors

Styled-components - An Alternative for Styling

Creating Show Page - UseEffect Hook and Dynamic URLs

Displaying Loading and Error Messages - Part 2

Reducer Concept for State Management

Creating Show Page - Part 3

Creating Show Page - Part 4

Styling Show Page - Part 5

Creating Custom Hook For Data Persistence

Dynamic Styles With Styled-Components

Displaying Starred Shows

Extract any Logic you want - Custom Hook

Styling The Entire App - Part 1

Styling The Entire App - Part 2

Add Animation to Elements

Deployment to GitHub Pages

Component Optimization With Hooks

Creating a Progressive Web App (PWA)

Final Project

Firebase

What is Firebase?

Overview of Firebase Services

Firebase Security

Firebase Pricing

Chat Application Project

Project Overview

Required Assets

Scaffolding the Project

Create and Configure the Firebase Project

Creating Pages - Private and Public Routes

Sign-in Page - Interaction with Firebase

Creating Profile Context - Context API and Global State Management

Global Profile State Management With Context

Start Building the Sidebar and Dashboard

Responsive Sidebar Using Media Query

Creating Dashboard - Part 1

Creating Dashboard - Reusable and Editable Components (Part 2)

Creating Dashboard - Update User Nickname (Part 3)

Creating Dashboard - Link Social Media Providers (Part 4)

Creating Dashboard - Creating Avatar (Part 5)

Creating Dashboard - Uploading the Avatar to Firebase (Part 6)

Creating Dashboard - Displaying User Avatar and Names Initials (Part 7)

Add Create-Room Button and Functionality

Creating Chat Rooms Lists - Part 1

Creating Chat Rooms List - Rooms' context (Part 2)

Creating Chat Rooms List - Show rooms and use them as links (Part 3)

Creating Nested Layout for Homepage

Creating Chat Page Layout/Component

Context API Problem and a Potential Solution

Context API Problem in Practice - Creating Current Room Context

Creating Initial Chat - Top Part

Denormalizing Data - Creating Chat Bottom

Display Last Message in Room List

Working With Denormalized Data

Displaying Chat Messages

Display User Profile Data

Adding Real-time Presence - Part 1

Adding Real-time Presence - Part 2

Adding Edit Room Drawer

Role-based Access & Security Rules

Role-based Access Management

Adding Programmatical Hover With Hooks

Creating IconControl Component - Likes (Part 1)

Likes Functionality (Part 2)

Handle Delete Operation

Adding the Upload Component - Part 1

Store Uploaded Files in Database - Part 2

Display and Download Uploaded Files - Part 3

Record and Upload Audio Messages - Part 4

Display Audio and Delete File - Part 5

Group Chat Feed by Dates

Pagination and Control of Scrolled Position

Deployment to Firebase Hosting

Custom Chat Backend

Firebase Project Plan

What are Serverless and Containers?

Cloud Messaging - How is Everything Connected?

Storing Device Tokens in the Database

Adding Service Worker

Setup Cloud Functions and Node Version Manager (NVM)

Notifications Flow in our app - Types of Cloud Functions

Creating FCM Cloud Function

Fix Cloud Function Errors

Sending and Displaying Notifications Using Cloud Functions

Managing FCM Users

Final Project

Key Features of React

Introduction

React Portals

Error Boundaries

Code Splitting

Conclusion

What is the Next Move?

Summary - Knowledge you Have Gained

Your Future Moves

Bonus Lecture

Bonus Lecture


Reviews

A
Archid4 April 2021

A very practical approach to react instead of courses that waste time on building mini apps. The instructor nails this by getting to the point. There will be a lot of places where you might have to figure out how react works on your own so a beginner might find it difficult but that's how I learnt programming. Always choose a decently simple and complicated course and in no time you figure out how things work and the instructor responds with great effort and detail for any question posed so a must buy for any one pursuing react. Even if a beginner is stuck at a lot of places, definitely buy it so that you can come back to this course to become an expert and build using best practises.

A
Akshat7 November 2020

Showing installation git, node and vs code for different OS (Mac and Linux) would have been better for beginners.

T
Toni2 October 2020

First of all, the course is really well done and very comprehensive. It covers important real-world concepts like optimizing your code with code splitting, memoizing, useCallback. This is something where other courses definitely lack behind. Additionally, the projects are really nice and especially the Chat App gives a nice "real world" feel. Moreover, if you want to learn a bit about Firebase, this course has something for you as well. However, personally, I have two points of criticism: First, speed. If you are completely unfamiliar with React, you will have a hard time following at some point. I am not completely new to React, but sometimes, it was very hard to code along, especially at sections where you went "now we do this, and now we do that". I can only give students one advice here: After finishing a section, READ the code again, just go through it and try to understand the parts you did not understand, and take your time until you get a grasp of what is going on. My advice for the instructor would be, to slow down a little bit, to make it easier to follow your thoughts :p My second minor point of criticism is that some concepts could be explained a little bit more in detail. For instance, I had a hard time grasping when it makes sense to use useCallback, memo and some of the other quirks of React. Although this may not affect everyone and could just be an issue related to me. All in all, the course is really good and, as I said, very comprehensive. It will give you a very solid foundation on making your own projects! Keep it up :)

K
Khateeb25 August 2020

Course is well instructed but even though I am not a total beginner in react, I found it to be a little hard at times due to a little quicker pace. Don't get me wrong, course is great but I think a total beginner might struggle. The biggest plus for me would be the understanding of some key concepts that I was struggling before taking this course, for example, children prop to name one. Instructor does try his best to explain everything in a straight forward manner and it does work most of the time which is good. Video quality suffers from 720p. In the age of 4k quality videos, 1080p should be the minimum standard. Projects are good and never boring. Recommended.


Related Courses

SKILLSHARE
React and Redux with Firebase in Hindi
React and Redux with Firebase in Hindi
SKILLSHARE
Firebase Push Notifications & Android Notification Styles
Firebase Push Notifications & Android Notification Styles
SKILLSHARE
Push notifications and Firebase data messaging in Android 2020
Push notifications and Firebase data messaging in Android 2020

2814445

Udemy ID

2/14/2020

Course created date

8/1/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram