Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/reactjs-advanced-course
ReactJS Advanced Course | Your time and consideration in reviewing my work are greatly appreciated. Please feel free to explore and share your thoughts (🔵ReactJS)
https://github.com/shahramshakiba/reactjs-advanced-course
advanced-programming advanced-react reactjs
Last synced: 2 days ago
JSON representation
ReactJS Advanced Course | Your time and consideration in reviewing my work are greatly appreciated. Please feel free to explore and share your thoughts (🔵ReactJS)
- Host: GitHub
- URL: https://github.com/shahramshakiba/reactjs-advanced-course
- Owner: ShahramShakiba
- Created: 2024-03-13T08:08:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-09T15:16:15.000Z (7 months ago)
- Last Synced: 2024-04-10T01:04:07.894Z (7 months ago)
- Topics: advanced-programming, advanced-react, reactjs
- Language: JavaScript
- Homepage:
- Size: 6.75 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/4c9b39c0-7658-4a5a-9ebb-52e7fdd8258d
***
### _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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/d94fffd9-bbb6-445b-9f25-917c77d1d2b2
***
### _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
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/f2e5acdf-bdbd-477f-8fd0-7edb1781760d
***
### _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 `.
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/b28ff117-a542-478a-a441-01399a67c410
***
### _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.
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/2603ca2c-36c7-454b-88ae-3dc23e1e0b8d
***
### _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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/7b595cd9-0da4-4143-8a9d-da680b9b020f
***
### _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.
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/f7867f18-c84d-4f88-9649-d2d97f941776
***
### _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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/1f54d6b6-29f6-46ce-a77f-a4a18e82d0fe
***
### _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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/ea65750d-a1ff-4708-97eb-16a34fe607d9
***
### _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_
https://github.com/ShahramShakiba/ReactJS-Advanced-Course/assets/110089830/61e56b83-5044-46bb-9b9f-425a3b226e60
***
## 
Find me around the Web :
