The Complete React Bootcamp 2023 (Updated)

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 analyse 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 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 JS ...

... 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 JS 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

• Serverless backend with cloud functions

• 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 are you waiting for? Start the class today!

Who this course is 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

• Introduction
• Requirements
• Updates & Issues
• Introduction to the First Section
• Installing Git + Git Bash (Windows)
• Change Git Bash Appearance (Windows only)
• Install Git (macOS)
• Installing VSCode (Windows)
• Install VS Code (macOS)
• VSCode Configuration & Extensions
• Working with Git - Part 1
• Working with Git - Part 2
• Working with Git - Part 3
• Installing Node.js (Windows)
• Installing Node.js (macOS)
• Node.js & NPM - Part 1
• Node.js & NPM - Part 2
• What are Prettier and ESLint?
• What are Server, JSON, REST API and GraphQL?
• Client Side Rendering (SPA) VS. Server Side Rendering (dynamic and static)
• VS Code Shortcuts
• Introduction to JavaScript
• 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 Code, Callstack, and Event Loop
• Async and Sync Code - Promises and Async Await
• ECMAScript Modules
• ECMAScript or JavaScript
• What is React?
• Component-based Approach
• Functions vs. Classes
• React Under the Hood
• Boilerplates and Project Bundlers
• TicTacToe project overview
• Creating and configuring new project with Vite
• Eslint and Prettier extensions
• What are React components and props
• How to apply CSS styles. Configuring SASS
• React State with useState hook, React events
• Creating game board state
• Add players X and O
• Show next player and winner messages
• Showing game draw
• Implementing game history
• Adding game reset button
• Highlighting game winner (winning combination)
• Final Touch. Correcting styles, adding font, inline styling
• Deployment to surge
• Summary
• Extra. Adding CSS background circles.
• Box Office app overview
• Creating the project with Create React App
• Cleaning up redundant files
• React Router v6 introduction. Creating pages
• Layouts and Navigation between pages
• Inputs. One-way and two-way data binding
• Form submission. Getting shows data from TV Maze API
• Rendering show data from TV Maze API
• Fix Prettier not working
• Radio buttons. Add search for actors
• Moving search form logic to its own component
• Displaying cards for both shows and actors
• Pages with dynamic content. Creating Show page
• Introduction to useEffect hook
• Fetching TV Maze API data with useEffect
• Custom react hooks. Extracting and reusing hook logic
• Data fetching with libraries. React Query
• Assignment. React Query on Home page
• Using React Query to search data on Home page
• Displaying information on Show page
• Adding Go Back button on Show page
• Introduction to useReducer as alternative to useState
• Starred shows p1. Creating state with useReducer
• Starred shows p2. Extract starred shows logic in a custom hook
• Starred shows p3. Fetch shows from the API on Starred page
• Assignment. Custom hook usePersistedState on top of useState
• Implementing custom hook usePersistedState
• Introduction to Styled Components. CSS-IN-JS as alternative for styling
• Styling the app p1. Global styles, theme, React router active link
• Styling the app p2. Styled Components dynamic styles based on props
• Styling the app p3. FlexGrid animation and useRef hook
• Deployment to Github Pages
• PWA (Progressive Web App). Service worker
• Fixing base URL to correctly resolve images on Github Pages
• Final touch. Creating favicons
• Summary. Gained knowledge
• What is Firebase?
• Overview of Firebase Services
• Firebase Security
• Firebase Pricing
• Project Overview
• Chat app Updates are Coming up!!
• 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
• 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
• Key Features of React
• React Portals
• Error Boundaries
• Code Splitting
• Conclusion
• Summary - Knowledge you Have Gained
• Your Future Moves