ReactJS Advanced Course

  Description

To begin with, it is important to note that, these projects have been sourced from an exceptional Udemy Course.

👤 Instructed by a proficient and expert educator, "Maximilian Schwarzmuller".

• Step into my GitHub repository and witness the fruits of my labor in learning ReactJS. This array of projects chronicles my journey through the course and reflects my growth as a developer.
• Each project has been carefully crafted to showcase my grasp of ReactJS concepts and best practices. Whether it's a basic application or a complex one, this repository attests to my unwavering commitment and zeal for web development.

So, delve into the repository and unearth the diverse projects I have created. I trust you'll find them informative and motivational, and I eagerly await your feedback!

Projects  

⒈ React Behind The Scenes =
          🏷️{ Understanding & Optimizing React Behind the Scenes }

⒉ Toggle User List =
          🏷️{ How to Build Class-Based Components }

⒊ Place Picker =
          🏷️{ Data Fetching & HTTP Requests }

⒋ Movies List =
          🏷️{ Connecting a Backend & Database }

⒌ { Simple Counter,
      Simple Task App,
      Place Picker } =
          🏷️{ Building Custom React Hooks }

⒍ { Login Form,
      User Input } =
          🏷️{ Working with Forms & User Input }

⒎ Ordering Food =
          🏷️{ Data Fetching & HTTP Requests }

⒏ Newsletter =
          🏷️{ Step 1:   Building a Multi-Page SPA with React Router
                 Step 2:   Adding Authentication }

⒐ Blog Post =
          🏷️{ Deploying React Applications }

⒑ React Events =
          🏷️{ Data Fetching with Tanstack Query }

---

  React Behind The Scenes

Pre-built Project

This project had already been developed and provided to me, and my focus is on Understanding and Optimizing React Behind the Scenes.

🗝️ Which Concepts Have I Covered :

•  How React Updates The DOM
  • Analyzing Component Fn Executions via React's DevTools Profiler
    
    
•  Avoiding Unnecessary Updates
  •   Avoiding Component Fn Executions with memo()
    
  •   Avoiding Component Fn Executions with Clever Structuring:
    • Move the JSX code away from the App component and put it in its own component.
  •   Understanding the useMemo() Hook:
    • To cache a calculation between re-renders
      
      
•  A Closer Look at Keys
  •   Using key to keep track of the Selected Item in a Counter History when State Change.
  •   Using Key For Resetting Counter Component
    
    
•  State Scheduling & State Batching
  
  
•  Optimizing React with MillionJS
  •   The drop-in optimizing compiler for React. Gain big performance wins for UI and data heavy React apps.

Give it a go in real-time and give me a Star     React Behind The Scenes

React-Behind-Scenes.mp4

---

  Toggle User List

Pre-built Project

This project had already been developed and provided to me, and my focus is on how we may Build Class-Based Components.

🗝️ Which Concepts Have I Covered :

•  What are Class-Based Component & Why They Exist
  • They was required in the past, when using React prior to version 16.8
    
    
•  Working with Class-Based Component
  • Adding a User Class-based Component
  • Managing and Working with State & Events in Class-based Component
  • Lifecycle Methods In Class-based Component:
    • componentDidMount ()
    • componentDidUpdate ()
    • componentWillUnmount ()
  • Class-Based Components & Context, using:
    • static contextType = UsersContext;
      
      
•  Error Boundaries
  • To catch some specific Errors & Prevent of Clashing the Application or Website

Give it a go in real-time and give me a Star     Toggle User List

Toggle-User-List.mp4

---

  Place Picker

Pre-built Project

This project had already been developed and provided to me, and my focus is on Data Fetching and HTTP Requests.

🗝️ Which Concepts Have I Covered :

•  How To Connect a Backend / Database
  • Sending HTTP Requests { GET Request } via fetch() method & useEffect to prevent Infinite Loop
    
    
•  Fetching Data
  • Using async await for Fetching Data
  • Displaying Loading States Based on Data Fetching
  • Handling HTTP Errors with try...catch When Fetching Data
  • Transforming Fetched Data According to the User Location
    
    
•  Sending Data
  • Sending Data with POST Requests
  • Using Optimistic Updating & Handling Error:
    • Optimistic updating showing changes in the UI before the server confirms them.
      It gives users a faster and more responsive experience,
      but the changes can be undone if the server doesn't accept them.
  • Deleting Data (via Delete HTTP Requests)

Give it a go in real-time and give me a Star     Place Picker

Important

Turn on your Location
Allow the application to access your location
In some cases you may need to use a VPN

PlacePicker.mp4

---

  Movies List

Pre-built Project

This project had already been developed and provided to me, and my focus is on Connecting a Backend & Database.

🧩 Utilizing data sourced from SWAPI (The Star Wars API) as my REST API to issue "GET Requests".
🧩 Subsequently, I switched to employing Firebase as the Backend API for sending "POST Requests".

🗝️ Which Concepts Have I Covered :

•  How do React Apps Interact with Database
  • React Apps do not establish direct communication with Databases.
    Instead, they interface with a Backend App, such as a Node.js or PHP application, which in turn manages the connection to the Database.
    This approach is adopted due to Security Concerns, such as the risk of exposing sensitive Credentials.
    
    
•  Sending HTTP Request & Using Response
  • Sending an HTTP-Request (GET Request) with fetch Method to a Backend (SWAPI API) to get Movies-Data.
  • Refactor fetch Method to Async Await Method
  • Using useEffect & useCallback For Sending HTTP Requests
  • Sending a POST Request
    
    
•  Handling Errors & Loading State
  • Handling Loading & Data States to let Users know which State your Application currently has.
  • Handling HTTP Errors

Give it a go in real-time and give me a Star     Movies List

Note

This demonstration currently showcases Basic POST and GET Requests.

MoviesList.2.mp4

---

  Simple Counter | Simple Task App | Place Picker

Pre-built Projects

These projects had already been developed and provided to me, and my focus is on Building Custom React Hooks across 3 different projects.

🧩 Custom Hooks are a powerful feature of React that allows you to encapsulate common functionality to outsource Stateful logic into reusable functions.

🧩 They are a great way to make your code more Organized, Reusable, and Maintainable.

🧩 When you have component logic that needs to be used by multiple components, we can extract that logic to a Custom Hook.

🗝️ Which Concepts in Have I Covered :

•  Rules of Hooks
  • Only call Hooks inside of Component or Other Hook Functions
    • Hooks must not be nested in (if statements), (nested functions) or (for loops)
  • Only call Hooks on the Top Level
    
    
•  Creating a Custom Hook
  • Managing State & Returning State Values
  • Exposing Nested Functions From The Custom Hook
  • Using A Custom Hook in Multiple Components

Give it a go in real-time and give me a Star     SimpleCounter-CustomHooks

Give it a go in real-time and give me a Star     SimpleTaskApp-CustomHooks

Give it a go in real-time and give me a Star     PlacePicker-CustomHooks

Warning

In certain situations, it might be necessary to employ a VPN due to the utilization of Firebase.

CustomHooks-3Project.mp4

---

  User Input | Login Form

Pre-built Projects

These projects had already been developed and provided to me, and my focus is on working with Forms & User Input across 2 different projects.

🧩 A Form is a collection of inputs fields used to collect information from Users.
🧩 Validating a form is important because it ensures that the data entered by users is accurate, complete, and in the correct format.

🗝️ Which Concepts in Have I Covered :

•  What Is Difficult About Forms
  • Form Submission   ⇡
    • Extract the values entered by the user :
      1. entered values can be managed via state
      2. alternatively, they can be extracted via refs
      3. or via FormData and native browser features
  • Input Validation   ✓
    • Validate the data that is provided by the user
      • Validate on every keystroke when using State → errors may be shown too early
      • validate on lost focus when using State → errors may be shown too long
      • validate on form submission when using Refs & FormData → errors may be shown too late
        
        
•  Handling Form Submission & Validating User Input
  • Getting User Inputs via State | Two-Way Binding
  • Getting User Input via Refs
  • Validating Input on Every Keystroke via State
  • Validating Input Upon Lost Focus (Blur)
  • Validating Input Upon Form Submission via Refs
  • Validating Input via Built-in Validation Props | "required" attribute
  • Password Validation
    
    
•  Using Built-in Form Features
  • Getting Input values via FormData | Native Browser APIs
  • Restting Form | e.target.reset();
    
    
•  Building Custom Solutions
  • Building & Using a Reusable Input Component
  • Outsourcing Validation Logic
  • Creating a Custom useInput Hook
  • Refactor Custom Input Hook Using useReducer
    
    

Give it a go in real-time and give me a Star     User Input

Give it a go in real-time and give me a Star     Login Form

LoginForm-GitHub.mp4

---

  Ordering Food

Pre-built Project

These projects had already been developed and provided to me, and my focus is on working with Data Fetching & HTTP Requests

🧩 This project is a basic Food Order App that features a menu of available meals for selection. Users can choose meals from the menu and add them to their cart, with the ability to adjust quantities as needed, also submit the order.

🗝️ Which Concepts in Have I Covered :

•  Checkout | Order Form
  • Creating A Checkout Form Component
  • Reading Form Values via Refs
  • Adding Form Validation
    
    
•  Submitting Orders to a Backend Server(HTTP)
  • Submitting and Sending Ordered-Data & User-Data to the Backend
  • Adding Submitting State for better User Feedback
    
    
•  Fetching Meals Data
  • Moving Meals Data To The Backend & Store them in the Firebase Realtime Database
  • Fetching Meals via HTTP Request (GET Request)
  • Handling the Loading State 🔍
  • Handling the Errors State 🚫

Give it a go in real-time and give me a Star     Ordering Food

Warning

In certain situations, it might be necessary to employ a VPN due to the utilization of Firebase.

Ordering-Food-HTTP.mp4

---

  Newsletter

⒈ React Router

Client side routing allows your app to update the URL from a link click without making another request for another document from the server.
Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.

In this project, my primary focus is to create a Multi-Page SPA application using React Router, followed by implementing Authentication.

🗝️ Which Concepts in Have I Covered :

 Using React Router

• Install: npm install react-router-dom
• Navigating between Pages with Links & NavLinks:
• Adding RootLayout and Nested Routes with Outlet
• Showing Error Pages with errorElement
• Navigating Programmatically via useNavigate()
• Defining & Using Dynamic Routes via useParams()

 Data Fetching & Submission

• Data Fetching with a loader() function for EventsPage
• Using Data From A Loader In The Route Component via useLoaderData()
• Reflecting The Current Navigation State in the UI via useNavigation()
• Extracting Error Data with errorElement
• The json() Utility Function for building Responses & Simplification
• The useRouteLoaderData() Hook | Accessing Data From Other Routes
• Submitting Data Programmatically using useSubmit Hook
• Validating User Input & Outputting Validation Errors via useActionData
• Reusing Actions for POST & PATCH the Events via Request Method
• Behind-the-Scenes Work with useFetcher()
• Deferring Data Fetching with defer()

⒉ Authentication

Authentication in React refers to the process of verifying the identity of users accessing a web application. It ensures that only authorized users can interact with the application's protected resources.

Implementing authentication is crucial for Safeguarding Sensitive Data, Maintaining User Privacy, and Preventing Unauthorized Access to the application.

In this segment, my primary focus is on implementing User Authentication in React applications and initiating the process of integrating authentication features into our React applications.

🗝️ Which Concepts in Have I Covered :

 How Authentication Works in React Apps

• Server-Side Sessions:
  • Store unique identifier on server, send some identifier to client
  • Client sends identifier along with request to protected resources
  • Server can then check if the identifier is valid
• Authentication Tokens:
  • Create (but not store) permission token on server & send it to the client
  • Client attaches token to future requests for protected resources
  • Server can then verify the attached token

 Implementing User Authentication

• Working with "Query Parameters" for handling URL Route
• Implementing the Auth Action with help of request & searchParams
• Validating User Input and Outputting Validation Errors
• Attaching Auth Tokens to Outgoing Requests
• Adding User Logout

 Adding Authentication Persistence & Auto-Logout

• Updating the UI Based on Auth Status | Based on Existence Token
• Adding Route Protection
• Adding Automatic Logout
• Managing the Token Expiration

Give it a go in real-time and give me a Star     Newsletter

Newsletter.mp4

---

  Blog Post

Deploying React Applications

• A React Single Page Application (SPA) is a static website that comprises only HTML, CSS, and JavaScript. It is client-side code that does not require server-side execution; instead, the browser handles all the code parsing. A static site host is necessary for hosting this type of application.
• On the contrary, full-stack React applications include server-side code.

In this project, my main objective is to implement Lazy Loading, which involves loading code only when it is required.

🗝️ Which Concepts in Have I Covered :

 Deployment Steps & Pitfalls

• Test Code:
  • Manually & with Automated tests
• Optimize Code:
  • Optimize user experience & performance
• Build App:
  • Run build process to porse, transform & optimize code
• Upload App:
  • Upload production code to hosting server
• Configure Server:
  • Ensure app is served securely & as intended

 Server-side Routing vs Client-side Rouring

• Adding Lazy Loading
• Deploy Static Site on Firbase Hosting

Give it a go in real-time and give me a Star     Blog Post

BlogPost-Deployment.mp4

---

  React Events

Data Fetching with Tanstack Query

• A third-party React library, previously identified as "React Query", serves as a tool for managing HTTP Requests within your React application, facilitating the communication between your React Frontend and Backend Services.

Benefits of utilizing React query:

• If we briefly navigate away from the page and encounter any server-side changes, the updated data will be fetched automatically upon returning to the page without the need for manual refreshing, thanks to the capabilities of Tanstack Query.
• React Query Caches Response Data, allowing us to navigate to different pages on our website and return to find the data instantly available. In contrast, using useEffect and custom fetching logic resulted in a new request being sent each time, fetching all the data again.
• Being able to control how long data is kept around and when new request will be sent.

In this project, I aim to streamline HTTP request management and enhance the communication between my React Frontend and Backend services.

🗝️ Which Concepts in Have I Covered :

 Fetching & Mutating Data

• Install: npm install @tanstack/react-query
• Dynamic Query Functions | Query Keys to cache different-data for different-keys based on the same-query

 Configuring Tanstack Query

• The Query Configuration Object | Aborting Requests
• Enabled & Disabled Queries
• Changing Data with Mutations | useMutation

 Advanced Concepts: Cach Invalidation, Optimistic Updating & More

• Acting on Mutation Success & Invalidating Queries | invalidateQueries()
• Disabling Automatic Refetching After Invalidations for deletion with refetchType set to "none"
• Updating Data with Mutations
• Optimistic Updating for Editing Events
• Using React Router with React Query
• Using the Query Key As Query Function Input | Set a max length for Showing Events

Give it a go in real-time and give me a Star     React Events

React-Events.mp4

---

Find me around the Web :