Build Production-Ready Apps in React

Build Production-Ready Apps in React

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 4h 26m | 944 MB

Do you need to build applications with ReactJS, the popular JavaScript front-end framework developed by Meta (formerly Facebook)? In this course, web developer and trainer Sandy Ludosky guides you through the process of building a single-page application efficiently, using built-in utilities and out-of-the-box tools. Learn how to set up the tools and files that you will need for this course, then step through starting a new React project. Explore tools to help you move from stateless to stateful React components, and go over how to use the Context API to manage the state of your app. Find out how to add the Firebase to your React project, then connect to a Cloud Firestore database. Dive into functionality like creating a bucket to store images, authenticating and managing users, and implementing client-side routing with React-Router V6. Learn about filtering, searching, and debugging. Plus, go over how to deploy your React app using Firebase Hosting.

Table of Contents

1 Build a stellar single-page application with React

Getting Started and Setting Up
2 What you should know
3 The tools and the exercise files
4 The React CLI and the React Developer Tools
5 Project overview

Start a New React Project
6 Add Bootstrap 5 to your single-page application
7 Build a responsive layout with Bootstrap 5
8 Build the UI and create reusable components
9 Pass props to child components
10 Challenge Thinking in React
11 Solution Breaking up the UI

From Stateless to Stateful React Components
12 Introduction to Hooks API Reference
13 Learn event handling and updating the state
14 Handle conditional rendering
15 Work with forms
16 Submit the form and apply side effects useEffect
17 Validate and submit forms useMemo
18 Handle complex logic with useReducer
19 Create and dispatch actions
20 Compose and update the UI

Manage the State of Your App with the Context API
21 Create a context object
22 Set up a Provider component to encapsulate the application logic
23 Challenge Manage a global state
24 Solution Allow components to subscribe to context changes

Add Firebase to Your React Project
25 Introduction to the Firebase Google console
26 Create a new project and a new application
27 Install the Firebase services SDK

Create and Connect to a Database (Firestore)
28 Get started with the Cloud Firestore
29 Learn to add and manage data
30 Set a new document and store and sync data into the Cloud Firestore
31 Learn to read data from a collection
32 Get documents and display them in the app
33 Define React environment variables

Create a Bucket to Store Images (Cloud Storage)
34 Get started with Cloud Storage on the web
35 Define an async function to send a file to storage
36 Upload a file to the storage
37 Download a file URL from storage
38 Set documents with images Update the UI
39 Set documents with images Set the date

Authenticate and Manage Users (Firebase Auth)
40 Start with Firebase Authentication and select the provider
41 Google Cloud Platform Create new credentials
42 Authenticate and manage users from the application
43 Manage the state with the Context API Component Provider
44 Manage the state with the Context API Custom hook
45 Subscribe components to the context changes User connected
46 Create new documents with the user connected
47 Secure your data in Cloud Firestore and Cloud Storage

Client-Side Routing with React-Router V6
48 Install React router DOM v6
49 Configure the routes and create a navigation component
50 Use Link component to navigate between pages
51 Allow navigation between multiple views
52 Conditional rendering and protected route
53 Use the React router hooks useNavigate
54 Use the React router hooks useLocation
55 Create the routes for NotFound and Profile
56 Display the active link

Filtering, Searching, and Learning to Debug
57 Implement a search and filter function
58 Create a new action to return filtered results
59 Subscribe to the context changes and apply side effects in the UI

Deploy Your React App (Firebase Hosting)
60 Install the Firebase CLI and initialize a new project
61 Create a production build and deploy your site to the cloud

62 Last words and next steps