React JS Masterclass - Go From Zero To Job Ready

1. Course Introduction

This introductory video provides an overview of the course's content, the pros and cons of learning about React 18, its features, and what you will learn from the course, along with a brief outline about the instructor.

2. Resources (Important)

In this video, you will learn about the resources used in this course and the multiple tools and code files we will use. The instructor explains everything about the code/resources in detail.

1. React Introduction

This introduction by the instructor delves deep into React, why we should learn it, its features and advantages, and its prerequisites.

2. Environment Setup

In this lesson, we will discuss the environment setup of certain software for Node, certain packages, and how to prepare the system for working on React.

3. Create React App

This lecture demonstrates how to create a React application. We will understand the version and documentation to be used for our learning. We will create the package for our projects, which we will use throughout the course for training.

4. React Behind the Scene

In this lesson, we will explore the folder structures and behind-the-scene processes, including the source folder, public folder, gitignore, and all other dependencies.

5. React Boilerplate / 005

In this video, we will start our coding journey from the basics. We will understand the required functional folders for our React coding operations in detail.

6. Components: Class- and Function-Based / 006

This video discusses components, where you will learn about class-based and function-based components. We will also create a new project setup.

7. JSX: In-Depth Introduction / 007

In this video, you will learn about JSX in-depth, a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

8. Practice: Basic Template Structure / 008

After learning how to create components, add CSS on our website, and add emojis, we will now create a small app based on what we have learned from previous lessons.

1. Why We Need States? / 009

In this lesson, you will learn about a state, the current value of a variable, which can constantly change, increase or decrease based on the function called. The state defines how a variable behaves at any given point.

2. State Introduction: useState / 010

In this video, we will explore further about a state and then understand in detail the useState, a React hook that lets you add a state variable to a component.

3. useState: Multiple Updates / 011

In this video, we will discuss the problems we face when using the setCount. The value of the Count remains constant; hence, when using multiple iterations of a setCount function, the value of the variables does not change either.

4. useState: Array State Value / 012

Here, we will continue to understand the useState, but this time, we will not just use it with integers, we will use arrays. We will create a task list and experiment with using tasks.

5. useState: Array setState Value / 013

We will continue the lessons on useState; here, you will learn more about setTask. The lesson will show you how to delete the tasks we created in the previous lecture.

6. Conditional Templates / 014

This video discusses a conditional template, which allows us to compare multiple elements with True or False return values and apply certain changes. These are templates by which we set up a condition, and it executes a code after satisfying the condition.

7. Quick Hook Advice / 015

In this lesson, we will explore a few quick tips while using hooks in our coding. We will go through the do's and don'ts while using hooks and other exceptions while using hooks.

1. Multiple Components and Fragments / 016

After understanding components, we will now understand the various components in use. We will also create different components and understand what fragments and component trees are.

2. Props: In-Depth Introduction / 017

After learning about components and component trees in this video, we will focus on props in detail. We will understand what props are and how they are used in codes and properties with dynamic values.

3. Props: Children / 018

In this video, you will learn about property child or children, which are offsets of the properties passed on from the parent props to the child props or children props.

4. Prop Drilling / 019

Here, we will understand the concept of prop drilling, which means we dig deep into the properties or props by passing the prop's components from one to another.

1. Global Level Styling / 020

In this video, you will learn about the global level of styling, where the styling of the components or elements are available everywhere and are the generalized stylings applicable throughout, usually referred to as index.css.

2. Component Level Styling / 021

After exploring index.css, we will look at the component-level styling. We will understand the structure of a component that involves styling.

3. Inline Level Styling / 022

Let's examine what inline CSS is and where the style applies to a particular inline segment. We create an object and pass the styling parameters applicable to this inline segment.

4. Dynamic Level Styling / 023

In this lecture, you will learn about dynamic class names and dynamic CSS styling, which involves conditional arguments passed as True or False values and then performing a task assigned to it.

5. Module Level Styling / 024

In this video, we will look at styling the module with CSS, but the scope of the styling is restricted to a particular module only and not applicable elsewhere.

1. Forms and Input / 025

In this lesson, you will learn to create forms and provide user input into the forms to collect data or add and delete tasks. You will learn to control the way the form behaves in accepting inputs.

2. Event / 026

In this video, we will examine the listener that we will work with, which calls a function that will execute a task every time there is a change in the input, an anonymous function, or create a function based on our requirement.

3. Controlled Inputs / 027

In this lecture, you will learn to create a button on our app that will allow us to control the input by resetting the input value in the task name field.

4. Event / 028

Let's learn to create submit buttons, enabling us to accept the input values through forms or input tabs. We can make the submit buttons and get inputs through data storage functions.

5. Add New Task / 029

After learning how to input data or tasks using forms and accepting the tasks or data using the submit button, we will now examine how to create new tasks, which will receive inputs from the tasks and add them to the task list we created earlier.

6. useRef Hook / 030

In this video, we will explore a hook, useRef, which will allow us to reference an unnecessary value for rendering. This is used to reference a value, manipulate a DOM with a reference, and avoid recreating reference content.

1. JSON Server / 031

This lesson will explore the JSON server and how to create front-end APIs. You will also learn to create a fake REST API on the JSON server.

2. useEffect Hook / 032

In this lecture, you will learn to call an API, access the information, and then create the user interface to display the information. We will understand the useEffect hook that accepts a function that contains imperative and possibly effective code.

3. React StrictMode

Let's learn about an interesting feature, a common doubt that may occur in our minds, where we loaded the conole.log once, but the information is repetitive. You will learn how the useEffect hook works here.

4. List Output / 035

In this video, you will learn to complete the user interface for the useEffect hook. We will create a function and fetch a component to create a simple UI to display presentable information.

5. Event / 036

In this lecture, you will learn how to utilize a URL and how to use Async Await, and the functions we will use for the process. You will learn to segregate data based on specified conditions.

6. useCallback Hook / 037

In this video, you will learn about the useCallback hook, as the useEffect hook requires dependencies within the function. In contrast, the useCallback hook does not require a dependency within it and can call dependencies from outside the function.

7. Custom Hook (useFetch) / 038

In this lecture, you will learn how to create a custom hook, which are functions that perform a task or fetches the information. You will learn to create a custom hook and call that hook in the code whenever we need information.

8. Loading State / 039

Let's focus on the new loading feature, where we will create a state to show the loading of elements. Now that you have learned to fetch elements using a hook, you will now learn to load elements and display the loading image as we wait.

9. Handling Errors (try/catch) / 040

In this video, we will discuss handling errors, which include server errors, wrong URLs, and so on.

10. Aborting Fetch Request / 041

In this lesson, we will discuss aborting a fetch request in the middle of an execution. This can be the case if we want to hide a code segment from rendering or change the rendering sequence.

11. Infinite Loops / 042

In this lecture, we will discuss passing primitive values and passing a function using a callback. We will use the useRef hook to create a reference for the elements and values.

1. TaskMate Demo

In this demonstration of the project, you will learn to create displays and we will build the project based on the concepts learned. We will make a project called TaskMate, a to-do list.

2. Project Structure

In this lesson, we will start our project from the basics. We will create the folder structure, create a basic React app, and call it TaskMate. We will create the basic setup for the project.

3. Components / 045

We will work on building the user interface for our TaskMate application. We will create a components folder in the source and develop components, header, Addtask, and Showtask. We will create the input box and basic CSS styles.

4. State: tasklist and setTasklist / 046

We will create a state called tasklist to add tasks, delete tasks, and edit tasks inside the task list. You will learn to add local time and date strings.

5. Function: Edit and Delete / 047

After learning to create the task list to add and delete tasks, we will now look at the functionality of creating the edit option and the delete option.

6. Warning: Undefined Value / 048

In this lecture, we will understand the "Warning: Undefined Value" error. We will understand what the warning means and how to rectify the error.

7. Update Button / 049

In this video, we will quickly learn to add an update button. Using this button, we will be able to make changes to the tasks that we create and modify the contents of the to do list.

8. Local Storage: Store All Tasks / 050

Here, we will focus on our local storage. When we create tasks in our TaskMate, we need to provide the app a local storage to store the tasks that we create.

9. Theme: Change Background / 051

In this video, we will learn to create a state that will allow us to change the background of our TaskMate appearance based on the selection we make.

10. Project Deployment

In this video, you will learn how to deploy our project on an online server. The first method involves pushing our project from the local system to a GitHub repository to Netlify or any other server we choose. The second way is to push the project directly on Netlify.

1. React Router Introduction / 053

In this video, you will learn how to use the React-Router and its components to create, which we will use in our project. This will help us to include more links and pages to our project in the future.

2. React Router Setup / 054

In this video, you will learn how to install the React router; we will understand how to activate the functionality, what syntax we need to use to include this route functionality.

3. Project Structure / 055

In this video, we will learn how to improve the structure of our project. We will learn to create proper header and footer components and import them from the components folder. This will be the base structure on which the project will be built on.

4. Navigation / 056

Here, we will delve deep into navigation in the React structure. There are two ways, where we will use the "useNavigate" hook, or use a navigate component.

5. Route Parameters / 057

In this lesson, we will understand the parameters that are defined to a route, which helps to avoid repetitive tasks, especially in the scenario of large volumes of data.

6. No Route Found / 058

This lesson will teach us how to create a condition for the page 404, "no page found," "no route found," etc. We will define a path in the route that loads a component.

7. Nested Routes / 059

In this video, we will understand the concept of nested routes. When we create a route and then link other routes with a common hook, then we can create a super route that has the components that can be used in all other subsequent routes.

8. Project Restructuring / 060

In this lecture, we will examine how to improve the folder structure and how to import and export elements or components from different folder structures.

1. Introduction and Demo

This video demonstrates the Tailwind CSS framework use in detail, which is packed with classes like flex, pt-4, text-center, and rotate-90 that can build any design directly in the markup.

2. Common Properties

In this video, we will look at a showcase of how to install the Tailwind CSS and set up to use in our current project. We will understand installing Tailwind CDN versus Tailwind CLI. We will then learn to apply different kinds of common properties to our CSS.

3. Hover, Focus, and Other States

In this lesson, you will learn to apply custom properties in special states, like when working with buttons, we will use "hover", "focus" properties for fonts, and other states that can be customized to our project requirements.

4. Responsive Design

We will learn to use multiple breakpoints, which is defined as responsive design and using responsive utility variants to build adaptive user interfaces.

5. Dark Mode

In this lecture, we will understand about the dark mode feature and use Tailwind CSS to style our site in dark mode, which is a first-class feature of many operating systems.

6. Custom Configuration / 206

Here, we will discuss configuration and customizing our Tailwind installation, a framework used for building bespoke interfaces using the "tailwind.config.js" file to define any customizations.

7. Project Demo / 207

This video illustrates a project demo, which we will call SoundMate, which is a simple landing page, where we will apply many Tailwind concepts and learn to apply customizations.

8. Header and Hero Section/ 208

We will take the project styling further, and look at creating the separate header and Hero sections. The Hero section will have a tagline and subtitle and then the other section with the cards and other components.

9. Footer / 209

In this lesson, we will learn to create our footer for the SoundMate project. We will define parameters to alter its appearance at the bottom of the page to our requirements.

10. Responsive Screen and Component Tools / 210

Here, we will examine and explore the various possible settings related to our responsive screen. We will define page sizes, appearance of components on different pages, etc.

1. Cinemate Demo

This video showcases the project that we will build called Cinemate, which is basically an information provider of popular movies, and is a movies based API project.

2. Project Setup

This video explores the components of the project. We will import the index.js file from the previous project and we will create all the required folder structures for the Cinemate project.

3. Tailwind Introduction / 063

This video will explain Tailwind and its functional components to load the style components into our React project, the Cinemate, and add the required dependencies for the project.

4. TMDB API: Documentation / 064

In this lesson, we will learn to use the TMDB API, a free API that showcases movies and we will register to create our account on the API. We will then examine the documentation, send links, and other parameters to work with.

5. UI Design (Tailwind and Flowbite) / 065

Now, we will focus on creating a basic user interface. We will define the page structure and how Cinemate, using Tailwind and Flowbite, works.

6. Navigation Structure

In this video, we will complete the header section of the Cinemate project and increase font sizes, change logo appearance, activate the navigation link, adding dynamic classes and add hidden variables.

7. Dark Mode Integration / 067

The dark appearance, known as Dark Mode, implements an interface style that many apps already adopt. We will learn to integrate the dark mode into the Cinemate project.

8. Movie List Structure / 068

In this video, we will create the homepage for the Cinemate project and we will define the appearance of the movie list structure on the project.

9. API Fetch: Movie List / 069

In this video, we will learn to fetch specific movies on the Movie list API. We will create a default empty list. We will then learn to send fetch requests to the URLs.

10. Custom Hook: useFetch / 070

Let's understand how to deal with errors in a fetch API. If errors are encountered during a fetch() call, it is often necessary to halt the compiler from reading the following few lines of code, rectifying the code, and re-fetching the API.

11. API Fetch: Movie Search / 071

Here, you will learn how to clean up the Fetch API, which provides a JavaScript interface for accessing and manipulating protocol parts, such as requests and responses.

12. Tailwind CSS Customization / 072

Here, you will learn more about a styled-component module, which allows us to write CSS within JavaScript in a very modular and reusable way in React instead of having one global dynamic class.

13. Page Not Found / 073

In this video, you will learn how to effectively handle the chaining of fetch calls to avoid nesting them together, clean up our component code, and abstract those details away from our component code.

14. Individual Movie Information / 074

You will learn to create forms to collect information and validate user information such as billing address, mode of payment, and more.

15. Scroll Restoration: Scroll to Top / 075

In this video, we will understand cleaning up a bloated render method in a React component by extracting a layout component.

16. Dynamic Page Title / 076

In this lecture, the next step is to start building the homepage of the eCommerce site. We will use components to tell React what we want to see on the screen.

17. Style Update / 077

This video demonstrates updating and stylizing the product list based on specific eCommerce store sales criteria.

18. Project Deployment / 078

In this video, we will understand the first cloud deployment model, the private model, single-tenant environments accessible by a single organization.

19. Development Branch on Git and GitHub

Here, you will learn how to develop and deploy the project branch on Git and GitHub.

20. Solved: Netlify Error / 079

In this lesson, you will learn to deploy Netlify, which helps accelerate the time to deploy website and app integrations and APIs on one powerful serverless platform.

1. Assignment Statement and Demo / 080

In this lesson, you will learn about the project details, what we will build, and the components required to implement the project.

2. Solution: Project Setup

In this video, you will learn how to create the basket layout for storing the chosen products and increase or decrease the quantity of the items or delete the items from the list.

3. Solution: Components / 082

After creating a ledge for the basket page, you will now learn to add functionality to the basket and start receiving items from the product list and the function buttons to work.

4. Solution: Pages / 083

In this video, you will learn how to use the React router and its components to create a single-page application as a detail page.

5. Assignment Deployment

In this video, you will learn to create basket icons, implement them individually, and test them for functionality.

1. Global State Management

After implementing the shopping basket and all the functions it needs, we will execute the tasks required to make the basket add up the totals of the prices of each product multiplied by the number of items and add other features such as coupons, discounts, and so on.

2. Project Structure / 086

In this video, you will learn to validate our forms in React. Here, the form will force us to enter details before we are taken to the product confirmation page.

3. Context / 087

This is a continuation of the previous lesson, where we will continue validating the information we place on the form before checking out.

4. Reducer / 088

After creating a ledge for the basket page, you will now learn to add functionality to the basket and start receiving items from the product list and the function buttons to work.

5. Methods / 089

In this video, you will learn to validate our forms in React. Here, the form will force us to enter details before we are taken to the product confirmation page.

6. Project Deployment / 090

For the final checkout page to perform the next set of actions, you will learn how to implement an order confirmation before proceeding with the last payment order.

1. Redux Introduction

Redux is an open-source JavaScript library used to manage application state. React uses Redux for building the user interface.

2. Project Structure / 091

We will explore the most common and most accessible structure in use. I call it the flat structure as it has minimal directory nesting.

3. Slice and Action / 092

A "slice" is a collection of Redux reducer logic and actions for a single feature in your app, typically defined together in a single file.

4. Reducers: Add and Remove / 093

This lesson creates a new reducer method called removeFromCart, which accepts a value and removes an item from the basket. We will then add an handler to our remove button.

5. Redux Store State / 094

Redux is a popular data store for JavaScript and React applications. It follows a central principle that data binding should flow.

6. Project Deployment / 095

This video provides a detailed introduction to the concepts covered in this course section, including JavaScript and its topics.

1. Codebook Demo / 097

This video demonstrates updating and stylizing the product list based on specific eCommerce store sales criteria.

2. Installations / 098

Here, you will learn more about a styled-component module, which allows us to write CSS within JavaScript in a very modular and reusable way in React instead of having one global dynamic class.

3. Project Structure / 099

In this lesson, we will understand the styled system, a collection of utility functions that add style props to your React components and allow you to control styles based on criteria.

4. Header Component - I / 100

Let's start by designing a static product tile to use as the template for the generated product tiles. Create a file named "components".

5. Header Component - II / 101

Here, you will learn more about a styled-component module, which allows us to write CSS within JavaScript in a very modular and reusable way in React instead of having one global dynamic class.

6. Home Page / 102

In this video, we will understand cleaning up a bloated render method in a React component by extracting a layout component.

7. Products Page / 103

In this lecture, the next step is to start building the homepage of the eCommerce site. We will use components to tell React what we want to see on the screen.

8. API: Product List / 104

This video discusses the context in React, a method to pass props from parent to child component(s) by storing the props in a store. We will create a "cart" context to store items in our shopping cart.

9. Rating Component / 105

For the final checkout page to perform the next set of actions, you will learn how to implement an order confirmation before proceeding with the last payment order.

10. Individual Product Component / 106

You will learn tips and tricks for better searching using the debouncing technique, up, down, and clear, and developing a clear search feature.

11. Dark Mode / 107

You will learn to create forms to collect information and validate user information such as billing address, mode of payment, and more.

12. ScrollToTop Component / 108

This video describes how to use elastic load balancing with your auto scaling group to distribute traffic across the instances in your auto scaling group.

13. Product Search / 109

Here, we will discuss operator precedence, which determines the order in which an arithmetic operation is performed.

14. Dynamic Title / 110

Here, you will learn more about a styled-component module, which allows us to write CSS within JavaScript in a very modular and reusable way in React instead of having one global dynamic class.

15. Filter: Context and Reducers / 111

Let's understand UserContext Hook, which makes it easy to pass data throughout your app without manually passing props down the tree, and UseReducer Hook, which allows for a more straightforward, predictable, and organized way to update our component.

16. Filter: Initial Product List / 112

We will create a checkout page, which will require us to handle the items in the product list, make final calculations, and add any other info if needed; reloading the page should allow us to make changes in the total by adding or removing items in the product list.

17. Filter: Properties / 113

This lesson will teach us more about props or properties used in React. Here, the properties are transferred from the parent to child components.

18. Clear Filter / 114

This lesson demonstrates how to cover key concepts required to filter successfully and concisely.

19. Dropdown Option / 115

After learning to use the React state hook, we will look at storing variables passed with the () event to put in the product display.

20. User Account and Cart

This video discusses the context in React, a method to pass props from parent to child component(s) by storing the props in a store. We will create a "cart" context to store items in our shopping cart.

21. Login and Registration Page / 118

Let's get acquainted with registering an account so we can explore many relevant services to become a user of the application.

22. React-Toastify / 119

This lesson will teach us more about props or properties used in React. Here, the properties are transferred from the parent to child components.

23. API: Login/Register Endpoint / 120

In this video, we will look at the React root component, namely the app, the dashboard, the admin, and other elements of the project that form the tree structure of React.

24. Session Storage / 121

In this lesson, you will learn about the local storage of information. When we place items in a basket and refresh or reload the page, it should be able to retain the items placed in the list until the transaction is processed.

25. Toggle Dropdown (Hide) / 122

In this video, you will learn how to effectively handle the chaining of fetch calls to avoid nesting them together, clean up our component code, and abstract those details away from our component code.

26. Cart Interface / 123

The shopping cart page is designed to allow buyers to see all the products they have added to the shopping cart. It contains a detailed list of products.

27. Cart: Context and Reducers / 124

In this tutorial, we will use useReducer and useContext to maintain a global state available throughout the project and the state variable.

28. Cart: Provider / 125

The context API simplifies sharing of cart data between components. Create a new function called CartProvider and add the reducer.

29. Add to Cart / 126

This lesson will teach us about the local information stored in a basket. When we place items in a basket and refresh or reload the page, it should be able to retain the items placed in the list until the transaction is processed.

30. Condition Check: Already in Cart / 127

For the final checkout page to perform the next set of actions, you will learn how to implement an order confirmation before proceeding with the last payment order.

31. Out of Stock Products / 128

Near the bottom of the "Show Results For" section, you can click the button for "Include Out of Stock".

32. Protected Routes / 129

In this video, you will learn to validate our forms in React. Here, the form will force us to enter details before we are taken to the product confirmation page.

33. Checkout Modal / 130

We will create a checkout page, which will require us to handle the items in the product list, make final calculations, and add any other information if needed; reloading the page should allow us to make changes in the total by adding or removing items in the product list.

34. Undefined Value Warning / 131

This video demonstrates how we can refactor product listing categories based on certain specifics, update any changes made to the products, or take them off the listing.

35. Order Submit Function / 132

In this lecture, the next step is to start building the home page of the eCommerce site. We will use components to tell React what we want to see on the screen.

36. Order Page / 133

In this video, you will learn how to create the basket layout for storing the chosen products and increase or decrease the quantity of the items or delete the items from the list.

37. Dashboard: Condition 1 / 134

In this video, we will explore the admin dashboard and look at the few available features on the dashboard.

38. Dashboard: Condition 2 / 135

After exploring the basics of the EC2 dashboard, you will now learn to create your EC2 instance, launch an example, and deploy a Linux-based AMI.

39. Auth Service: API End Points / 136

In this lesson, you will learn to deploy and accelerate the time to deploy website and app integrations and APIs on one powerful serverless platform.

40. Data Service: API Endpoints / 137

In this lesson, we will understand the styled system, a collection of utility functions that add style props to your React components and allow you to control styles based on criteria.

41. Product Service: API End Points / 138

This lesson will teach us how to fetch and get product information by ID. This code uses the fetch() function to call the Web API Product controller class.

42. Page Not Found / 139

Now, we will focus on creating a stylized interface for the store. We will define the page structure, the Events, and how the store behaves.

43. Dynamic Page Title / 140

In this video, you will learn to validate our forms in React. Here, the form will force us to enter details before we are taken to the product confirmation page.

44. Error Handling / 141

This video elaborates on debugging React applications to resolve errors and make the app functional and proper.

45. ENV / 142

After completing all the lessons in the section, ultimately implementing the project and testing out the project, this video provides a detailed recapitulation of the concepts learned in this project for the React app.

46. Frontend Deployment / 143

This is the final cloud deployment model, the virtual private cloud, which maintains the same security restrictions as a private cloud but offloads apps or workloads as a public cloud.

47. Backend Deployment / 144

In this video, we will understand the second cloud deployment model, the community model, when many organizations share similar infrastructure needs.

48. Update Environment Variables / 145

Let's discuss the arithmetic operators available in JavaScript to perform operations on constants and variables and look at the different operators available in JavaScript.

49. Login as Guest

In this lesson, we will create a guest user and understand how to log in and what features the user is provided with.

50. Solved: Netlify Errors / 147

In this lesson, you will learn to deploy Netlify, which helps accelerate the time to deploy website and app integrations and APIs on one powerful serverless platform.

1. Statement and Demo / 157

This video will explain the advantages of using a password versus an SSH key authentication.

2. Solution: WordCount / 158

In this video, we will look at a demonstration to add an extra layer of security to the user and plain password authentication.

1. Testing Introduction / 148

Learn software testing with an introduction, software development lifecycle, design, development, testing, quality assurance, and quality control.

2. React Testing Library and Jest / 149

In this video, we will continue to implement and test the operator functions by clicking the operator buttons we created on the calculator.

3. Project Setup

This video focuses on the concepts of cloud computing, the advantages and disadvantages of cloud computing, and the different types of service models in cloud computing.

4. Testing Structure / 151

This is a continuation of how to connect to and communicate with a MariaDB database featuring a demo app and code samples.

5. Test: Component Rendering / 152

In this lesson, we will look at a term to describe the ability to render different user interface (UI) markup if a condition is true or false, the conditional rendering.

6. Test: Fire Events and User Events / 153

In this video, we will look at different events such as mouse clicks, mouse overs, mouse out, key down, and document load.

7. Queries, Type, Expect, and More / 154

This video will teach an important concept before moving on to JavaScript and jQuery, the document object model (DOM).

8. Test: API Async Loading / 155

In this video, we will compare the three service models and note the fundamental differences and their advantages of use.

9. Test: Page Component Wrapper / 156

In this lesson, you will learn about strings in JavaScript, which store a series of characters or text in quotes with an example.

1. Firebase Introduction

The Firebase Realtime Database lets you build rich, collaborative applications by allowing secure access to the database directly from client-side code.

2. Webpack Setup / 252

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript but can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.

3. Firebase Setup / 253

React Native Firebase provides access to native code by wrapping the native SDKs for Android and iOS into a JavaScript API.

4. Firebase Connection / 254

When you register your app with Firebase, you will get a Firebase configuration object that you will use to connect your app with your Firebase project.

5. Fetching Documents - I / 255

You can use the Realtime Database Query class to retrieve data sorted by key, by value, or by the value of a child. You can also filter the sorted result.

6. Fetching Documents- II / 256

We can use the on() method to retrieve data. This method takes the event type as "value" and retrieves the snapshot of the data.

7. Adding and Deleting Documents / 257

The simplest way to delete data is to call removeValue() on a reference to the location of that data. We can also delete data by specifying null as the value.

8. Snapshots / 258

A DataSnapshot contains data from a Database location. Any time you read data from the database, you receive the data as a data snapshot.

9. Firestore Queries / 259

Cloud Firestore provides powerful query functionality for specifying which documents you want to retrieve from a collection or collection group.

10. Ordering Data / 260

You can specify the sort order for your data using orderBy() and limit the number of documents retrieved using the limit(). Note an orderBy() clause.

11. Updating Documents / 261

This guide explains how to use the set, add, or update individual documents in Cloud Firestore. If you want to write data in bulk, see transactions.

12. Fetching Individual Document / 262

In Firebase version 9 Cloud Firestore, you can update an existing document using updateDoc() by adding, updating, or deleting the document field.

13. Authentication - I / 263

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app.

14. Authentication - II / 264

Firestore security rules can be evaluated using user authentication metadata, data from incoming queries, and existing data in your database.

1. WriteNode Demo / 159

This demonstration video of another project called WriteNode, uses Firebase, React router DOM, to create the application. We will also understand about Skeleton.

2. Project Structure / 160

In this video, we will work on the structuring part of the project WriteNode. We will create the requisite folder structures and importing the required libraries.

3. Project Styling / 161

In this video, we will understand how to begin with the designing part of this project. We will create the header, footer, logo, and other components required for WriteNode.

4. Homepage / 162

In this lesson, we will begin with creating a section for the homepage and add the individual cards by importing the Postcard state from the components folder.

5. Firebase Setup / 163

The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in real time. We will look at the setup and authentication.

6. Firebase Configuration / 164

In this lesson, we will focus on the configuration part of the Firebase app. We will also work on receiving the information from the Firestore.

7. Conditional Auth Header / 165

In this video, we will understand how to create the header for the WriteNode project with a login popup button. We will use the Event() for the login as conditional authorization.

8. Create Blog Post / 167

After creating the conditional authorization in the previous lesson, we will now create a blog post in the WriteNode application.

9. Error: Object Fetch / 168

While creating our blog post in the last video, we encountered an error. In this video, we will focus on how to fix the error and understand creating and fetching objects for the project.

10. Toggle Update / 169

In this video, we will discuss about two concepts, the first being a toggle and how to delete the card when the recycle icon is clicked and the second concept we will discuss here is the infinite loop.

11. Dynamic Page Title

In this video, we will learn how to create a dynamic page title using a hook "useTitle.js" and place code to update our title as and when required.

12. React Loading Skeleton

Here, we will discuss about an interesting package called the React Loading Skeleton that provides a skeleton structure until we receive a response from the app.

13. Project Deployment / 172

In this final video, we will focus on the deployment process. We will get into the gitignore file and add the .env file. We will then create a new repository on GitHub called WriteNode and place the entire project folder structures here. We will deploy the project using Netlify.