Mastering React.Js: Crafting Production-Grade Applications

Mastering React.Js: Crafting Production-Grade Applications
Published 11/2023
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz

Mastering React.js: From Setup to Deployment, A Practical Guide for Building Professional-grade Applications

What you’ll learn

Set up and configure a development environment for ReactJS

Understand the essential tools, exercise files, React CLI, and React Developer Tools.

Bootstrap a ReactJS project with the latest version of Bootstrap (Bootstrap 5).

Construct a responsive layout using Bootstrap and create reusable components.

Differentiate between stateless and stateful React components.

Harness the power of the Hooks API for effective state management.

Handle events, conditional rendering, and form submission.

Implement complex logic with useReducer and create and dispatch actions.
Utilize the Context API to manage the state of your React application globally.

Create a context object and encapsulate application logic with a Provider component.

Allow components to subscribe to context changes and update accordingly.

Integrate Firebase into a React project seamlessly.

Set up a new project in the Firebase Google console and install the Firebase services SDK.

Work with Cloud Firestore to add, manage, and retrieve data.

Sync data into Cloud Firestore and read from collections.

Set up a bucket in Cloud Storage to store and retrieve images.

Implement asynchronous functions for file upload and download.

Update the UI with images and set document dates.

Authenticate and manage users using Firebase Authentication.

Implement state management for user authentication with the Context API.

Secure data in Cloud Firestore and Cloud Storage based on user credentials.

Install and configure React Router v6 for client-side routing.

Create navigation components and configure routes.

Implement conditional rendering and protect routes for enhanced security.

Implement search and filter functionalities in your React application.

Create new actions to handle filtered results and apply side effects.
Master debugging techniques and subscribe to context changes for efficient debugging.

Install the Firebase CLI and initialize a new project for deployment.

Create a production build of your React app.

Deploy your application to Firebase Hosting for a scalable and reliable production environment.

Requirements

Basic Understanding of JavaScript

Familiarity with HTML and CSS

Prior experience with web development concepts and practices will be beneficial but is not mandatory

Students should have a text editor of their choice installed on their machines, such as Visual Studio Code, Atom, or Sublime Text.

NodeJS and npm (Node Package Manager) should be installed on the student’s computer to facilitate the installation of dependencies and the use of the React CLI.

Desire to Learn and Build

Description

Overview

Section 1: Introduction

Lecture 2 What you should know

Lecture 3 The tools and the exercise files

Lecture 4 The React CLI and the React Developer Tools

Lecture 5 Project overview

Lecture 7 Add Bootstrap 5 to your single-page application

Lecture 8 Build a responsive layout with Bootstrap 5

Lecture 9 Build the UI and create reusable components

Lecture 10 Pass props to child components

Lecture 11 Challenge: Thinking in React

Lecture 12 Solution: Breaking up the UI

Section 3: From Stateless to Stateful React Components

Lecture 13 Introduction to Hooks API Reference

Lecture 14 Learn event handling and updating the state

Lecture 15 Handle conditional rendering

Lecture 16 Work with forms

Lecture 17 Submit the form and apply side effects: useEffect

Lecture 18 Validate and submit forms: useMemo

Lecture 19 Handle complex logic with useReducer

Lecture 20 Create and dispatch actions
Lecture 21 Compose and update the UI

Section 4: Manage the State of Your App with the Context API

Lecture 22 Create a context object

Lecture 23 Set up a Provider component to encapsulate the application logic

Lecture 24 Challenge: Manage a global state

Lecture 25 Solution: Allow components to subscribe to context changes

Section 5: Add Firebase to Your React Project

Lecture 26 Introduction to the Firebase Google console

Lecture 27 Create a new project and a new application

Lecture 28 Install the Firebase services SDK

Section 6: Create and Connect to a Database (Firestore)

Lecture 30 Learn to add and manage data

Lecture 31 Set a new document and store and sync data into the Cloud Firestore

Lecture 32 Learn to read data from a collection

Lecture 33 Get documents and display them in the app

Section 7: Create a Bucket to Store Images (Cloud Storage)

Lecture 36 Define an async function to send a file to storage

Lecture 37 Upload a file to the storage

Lecture 38 Download a file URL from storage

Lecture 39 Set documents with images: Update the UI

Lecture 40 Set documents with images: Set the date

Section 8: Authenticate and Manage Users (Firebase Auth)

Lecture 42 Google Cloud Platform: Create new credentials

Lecture 43 Authenticate and manage users from the application

Lecture 44 Manage the state with the Context API: Component Provider

Lecture 45 Manage the state with the Context API: Custom hook

Lecture 46 Subscribe components to the context changes: User connected

Lecture 47 Create new documents with the user connected

Lecture 48 Secure your data in Cloud Firestore and Cloud Storage

Section 9: Client-Side Routing with React-Router V6

Lecture 49 Install React router DOM v6

Lecture 50 Configure the routes and create a navigation component

Lecture 51 Use Link component to navigate between pages

Lecture 52 Allow navigation between multiple views

Lecture 53 Conditional rendering and protected route

Lecture 54 Use the React router hooks: useNavigate

Lecture 55 Use the React router hooks: useLocation

Lecture 56 Create the routes for "NotFound" and "Profile"

Lecture 57 Display the active link

Section 10: Filtering, Searching, and Learning to Debug

Lecture 58 Implement a search and filter function

Lecture 59 Create a new action to return filtered results
Lecture 60 Subscribe to the context changes and apply side effects in the UI

Section 11: Deploy Your React App (Firebase Hosting)

Lecture 61 Install the Firebase CLI and initialize a new project

Lecture 62 Create a production build and deploy your site to the cloud

Section 12: Conclusion

Lecture 63 Conclusion and Code Download

Front-End Developers,Web Developers Seeking Scalability,JavaScript Developers,Intermediate ReactJS Developers,Aspiring Full-Stack Developers,Tech Enthusiasts and Learners,Career Transitioners,Anyone Interested in Building Production-Ready Apps