Skip to content
Play overlay
Preview this course

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

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


Arash Ahadzadeh

Summary

Price
£200 inc VAT
Or £66.67/mo. for 3 months...
Study method
Online, On Demand What's this?
Duration
17.2 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Reed courses certificate of completion - Free
Additional info
  • Tutor is available to students

Overview

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.

Curriculum

11
sections
168
lectures
17h 10m
total
    • 3: 2-1 Introduction 00:15
    • 4: 2-2 Installing Git + Git Bash (Windows) 04:42
    • 5: 2-3 Installing Git (macOS) 01:09
    • 6: 2-4 Installing NodeJs 01:57
    • 7: 2-5 Installing NodeJS (macOS) 01:09
    • 8: 2-6 Installing VSCode 01:48
    • 9: 2-7 Installing VS Code (macOS) 00:43
    • 10: 2-8 VSCode Configuration & Extensions 05:43
    • 11: VScode git-bash settings note (Windows ONLY) 01:00
    • 12: Note: Prettier small updates 01:00
    • 13: 2-9 Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static) 12:52
    • 14: 2-10 What are Server, JSON, REST API and GraphQL? 08:04
    • 15: Github Note 01:00
    • 16: 2-11 Working With Git - Part 1 19:52
    • 17: 2-12 Working With Git - Part 2 17:37
    • 18: Minify package update 01:00
    • 19: 2-13 What are NodeJS and NPM? 18:09
    • 20: 2-14 What are ESLint and Prettier? 10:21
    • 21: 2-15 VS Code Shortcuts 02:25
    • 22: Future Notes 01:00
    • 23: 2-16 Introduction to JavaScript 00:49
    • 24: 2-17 Var VS. Let VS. Const 04:53
    • 25: 2-18 What is Array.map used for? 03:55
    • 26: 2-19 What is Array.reducer used for? 04:07
    • 27: 2-20 Function Declaration VS. Expression 02:58
    • 28: 2-21 Arrow Functions and Default Function Arguments 03:32
    • 29: 2-22 String Interpolation 02:23
    • 30: 2-23 Object and Array Destructuring 05:58
    • 31: 2-24 Spread and Rest Operators 08:07
    • 32: 2-25 Async and Sync Code - Promises and Async Await 14:49
    • 33: 2-26 What is React? 02:18
    • 34: 2-27 Component-based Approach 03:40
    • 35: 2-28 Functions vs. Classess 00:51
    • 36: 2-29 React under the hood 03:31
    • 37: 3-1 Introduction to the First Project 00:53
    • 38: Required Asstes 01:00
    • 39: Parcel note (very important) 01:00
    • 40: Link to GitHub repository 01:00
    • 41: 3-2 Scaffolding a new app 09:58
    • 42: ESLint note (important) 01:00
    • 43: Note: warnings in the terminal 01:00
    • 44: 3-3 Installing Dev Dependencies 04:55
    • 45: 3-4 Creating New Components & Props 11:33
    • 46: 3-5 Children Props 02:08
    • 47: 3-6 Styling React Components - Our Style Structure 09:39
    • 48: 3-7 Creating a Game Board State - React States and Events 17:51
    • 49: 3-8 Component Lifecycle & Lifecycle Events 06:08
    • 50: 3-9 State sharing across components. Winner calculation 08:02
    • 51: 3-10 Adding Game History - Part 1 07:05
    • 52: 3-11 Adding Game History - Part 2 08:56
    • 53: 3-12 Conditional Rendering 07:11
    • 54: 3-13 Highlighting Winning Combination 06:49
    • 55: 3-14 Styling The Entire App 12:55
    • 56: 3-15 Deployment to Surge 03:10
    • 57: 3-16 Summary 01:05
    • 58: Final Project 01:00
    • 59: 4-1 Introduction to the Box Office Project 02:03
    • 60: Required Assets 01:00
    • 61: ESLint Note 01:00
    • 62: Important Create-React-App note 01:00
    • 63: Link to GitHub repository 01:00
    • 64: 4-2 Scaffolding the Project 11:58
    • 65: 4-3 Creating Pages in React - React Router (Part 1) 07:14
    • 66: 4-4 Creating Navigation Bar & Page Components 06:07
    • 67: 4-5 Multiple Layout Management - Creating Main Layout 05:10
    • 68: 4-6 Creating Search Bar - Working With an API 10:18
    • 69: 4-7 Displaying API Results - Custom Render Function 07:22
    • 70: 4-8 Adding Actors Search With Radio Buttons 08:31
    • 71: 4-9 Creating Preview Cards for Show and Actors 14:07
    • 72: 4-10 Styled-components - An Alternative for Styling 10:25
    • 73: 4-11 Creating Show Page - Part 1 11:58
    • 74: 4-12 Creating Show Page - Part 2 06:01
    • 75: 4-13 Reducer Concept for State Management 02:13
    • 76: 4-14 Creating Show Page - Part 3 08:18
    • 77: 4-15 Creating Show Page - Part 4 09:25
    • 78: 4-16 Styling Show Page - Part 5 06:47
    • 79: 4-17 Creating Custom Hook For Data Persistence 09:09
    • 80: 4-18 Dynamic Styles With Styled-Components 08:27
    • 81: 4-19 Displaying Starred Shows 07:01
    • 82: 4-20 Extract any Logic you want - Custom Hook 07:34
    • 83: 4-21 Styling The Entire App - Part 1 07:35
    • 84: 4-22 Styling The Entire App - Part 2 07:20
    • 85: 4-23 Add Animation to Elements 02:43
    • 86: 4-24 Deployment to GitHub Pages 05:27
    • 87: 4-25 Component Optimization With Hooks 17:01
    • 88: 4-26 Creating a Progressive Web App (PWA) 07:16
    • 89: Final Project 01:00
    • 90: 5-1 What is Firebase? 01:48
    • 91: 5-2 Overview of Firebase Services 05:06
    • 92: 5-3 Firebase Security 01:51
    • 93: 5-4 Firebase Pricing 01:02
    • 94: 5-5 Project Overview 08:48
    • 95: Required Assets 01:00
    • 96: Note: node-sass 01:00
    • 97: Link to GitHub repository: 01:00
    • 98: 5-6 Scaffolding the Project 07:55
    • 99: Realtime Database location 01:00
    • 100: ESlint Note 01:00
    • 101: Firebase Note 01:00
    • 102: 5-7 Create and Configure the Firebase Project 11:09
    • 103: 5-8 Creating Pages - Private and Public Routes 07:56
    • 104: 5-9 Sign-in Page - Interaction with Firebase 21:25
    • 105: 5-10 Creating Profile Context - Context API and Global State Management 09:28
    • 106: 5-11 Global Profile State Management With Context 12:35
    • 107: 5-12 Start Building the Sidebar and Dashboard 07:44
    • 108: 5-13 Responsive Sidebar Using Media Query 03:17
    • 109: 5-14 Creating Dashboard - Part 1 05:43
    • 110: 5-15 Creating Dashboard - Reusable and Editable Components (Part 2) 12:42
    • 111: 5-16 Creating Dashboard - Update User Nickname (Part 3) 04:11
    • 112: 5-17 Creating Dashboard - Link Social Media Providers (Part 4) 16:43
    • 113: Avatar-editor 01:00
    • 114: 5-18 Creating Dashboard - Creating Avatar (Part 5) 13:10
    • 115: 5-19 Creating Dashboard - Uploading the Avatar to Firebase (Part 6) 12:28
    • 116: 5-20 Creating Dashboard - Displaying User Avatar and Names Initials (Part 7) 07:37
    • 117: 5-21 Add Create-Room Button and Functionality 17:36
    • 118: 5-22 Creating Chat Rooms Lists - Part 1 08:49
    • 119: 5-23 Creating Chat Rooms List - Rooms' context (Part 2) 05:47
    • 120: 5-24 Creating Chat Rooms List - Show rooms and use them as links (Part 3) 06:12
    • 121: 5-25 Creating Nested Layout for Homepage 06:42
    • 122: 5-26 Creating Chat Page Layout:Component 05:06
    • 123: 5-27 Context API Problem and a Potential Solution 02:41
    • 124: 5-28 Context API Problem in Practice - Creating Current Room Context 07:55
    • 125: 5-29 Creating Initial Chat - Top Part 06:44
    • 126: 5-30 Denormalizing Data - Creating Chat Bottom 14:31
    • 127: 5-31 Display Last Message in Room List 03:24
    • 128: 5-32 Working With Denormalized Data 10:21
    • 129: 5-33 Displaying Chat Messages 07:17
    • 130: 5-34 Display User Profile Data 04:54
    • 131: 5-35 Adding Real-time Presence - Part 1 08:32
    • 132: 5-36 Adding Real-time Presence - Part 2 07:43
    • 133: 5-37 Adding Edit Room Drawer 08:33
    • 134: 5-38 Role-based Access & Security Rules 09:57
    • 135: 5-39 Role-based Access Management 08:43
    • 136: 5-40 Adding Programmatical Hover With Hooks 02:51
    • 137: 5-41 Creating IconControl Component - Likes (Part 1) 06:20
    • 138: 5-42 Likes Functionality (Part 2) 07:21
    • 139: 5-43 Handle Delete Operation 06:23
    • 140: 5-44 Adding the Upload Component - Part 1 12:40
    • 141: 5-45 Store Uploaded Files in Database - Part 2 04:16
    • 142: 5-46 Display and Download Uploaded Files - Part 3 06:10
    • 143: 5-47 Record and Upload Audio Messages - Part 4 08:40
    • 144: 5-48 Display Audio and Delete File - Part 5 04:51
    • 145: 5-49 Group Chat Feed by Dates 06:57
    • 146: 5-50 Pagination and Control of Scrolled Position 12:52
    • 147: 5-51 Deployment to Firebase Hosting 02:09
    • 148: 6-1 Firebase Project Plan 01:55
    • 149: 6-2 What are Serverless and Containers? 03:31
    • 150: 6-3 Cloud Messaging - How is Everything Connected? 01:28
    • 151: Note: Firebase FCM 01:00
    • 152: 6-4 Storing Device Tokens in the Database 08:07
    • 153: 6-5 Adding Service Worker 03:18
    • 154: 6-6 Setup Cloud Functions and Node Version Manager (NVM) 06:36
    • 155: 6-7 Notifications Flow in our app - Types of Cloud Functions 01:57
    • 156: 6-8 Creating FCM Cloud Function 19:56
    • 157: 6-9 Fix Cloud Function Errors 01:16
    • 158: 6-10 Sending and Displaying Notifications Using Cloud Functions 15:02
    • 159: 6-11 Managing FCM Users 11:27
    • 160: Security rules note 02:00
    • 161: Final Project 01:00
    • 162: 7-1 Key Features of React 00:28
    • 163: 7-2 React Portals 04:42
    • 164: 7-3 Error Boundaries 05:52
    • 165: 7-4 Code Splitting 04:41
    • 166: 7-5 Conclusion 00:35
    • 167: 7-6 Summary - Knowledge you Have Gained 02:20
    • 168: 7-7. Future moves 04:09

Course media

Description

Is this course exactly what you are 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

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 14-day money-back guarantee! You can sign up today with zero risks.

What are you waiting for? Enroll today!

Who is this course for?

  • Anyone who wants to develop scalable web-apps with React
  • Programmers who want to increase their value as web developers
  • People who are eager to learn how modern web-apps are working and how everything is connected
  • Anyone who wants to develop applications like Facebook or Twitter
  • Anyone who wants to become a freelancer or an independent web app developer

Requirements

  • HTML + CSS fundamentals
  • Basic comprehension of programming (i.e variables, loops)
  • JavaScript basic knowledge would be a PLUS, but NOT essential
  • NO prior experience with JS-frameworks is required

Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.

Certificates

Reed courses certificate of completion

Digital certificate - Included

Will be downloadable when all lectures have been completed

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.