ReactJS Basic 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!

List of projects :

⭐ React Essentials     ⭐ Tic Tac Toe
⭐ Investment Calculator     ⭐ Sign in Form
⭐ Styling React Component     ⭐ Final CountDown
⭐ JSX Limitations     ⭐ React Project Management
⭐ Online Clothing Shop     ⭐ Place Picker App
⭐ Simple Login     ⭐ React Quiz
⭐ Food Order Application

React Essentials

In this project, I have utilized the fundamental concepts of ReactJS such as Components, JSX, Props, and State. The aim of this project is to demonstrate how these concepts can be effectively used in building a functional application.
The project showcases the dynamic rendering of content and images, with separate components like Header and CoreConcept being extracted from the main App component.
Furthermore, to enhance the flexibility of my components, I have utilized Forwarding Props (or Proxy Props) to pass down props to child components without having to manually specify each one.
I have also implemented two JSX Slots in my components to allow for dynamic content insertion.
Additionally, I have experimented with setting component types dynamically.
Lastly, I have leveraged hooks like useState and passed custom arguments to Event Functions to optimize the functionality of my components.

Overall, this project serves as a simple yet effective demonstration of the essential concepts of ReactJS. Feel free to explore the code and learn from it!

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

React Essentials

React-Essentials.mp4

Tic Tac Toe

Tic Tac Toe is a classic game that has been enjoyed by people of all ages for generations. It is a two-player game where each player takes turns marking a 3x3 grid with their symbol (either X or O) until one player successfully places three of their symbols in a row, column, or diagonal.
Overall, this Tic Tac Toe application is a fun and interactive way to experience the classic game while also demonstrating my proficiency in React development.

In this project, I have undertaken an in-depth exploration of numerous key concepts.

🔑 Which Concepts Have I Covered :

🔓 Splitting Components by feature 🔓 Reusing Components
🔓 Conditional Content - A Suboptimal Way Of Updating State
🔓 Updating State Based On Old State
🔓 Rendering Multi-Dimensional Lists
🔓 Updating Object State Immutably 🔓 Lifting State Up
🔓 Computed Values - Avoid Unnecessary State Management
🔓 Deriving State From Props 🔓 Sharing State Across Components
🔓 Lifting Computed Values Up 🔓 and several other concepts as well.

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

Tic Tac Toe Game

TicTacToe-Game.mp4

Investment Calculator

React-powered Investment Calculator
In this project, the website visitors can use to calculate the future value or multiple future values for given investment parameters.

🔑 Which Concepts Have I Covered :

🔓 Build an "Investment Calculator" Web App
🔓 Build, Configure & Combines Components
🔓 Manage Application State 🔓 Output List & Conditional Content
🔓 Handling Events | Using Two-Way-Binding 🔓 Lifting State Up
🔓 Computing Values | Properly Handling Number Values

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

"Investment Calculator" Web App

Investment-Calculator.mp4

SIGN IN FORM

Styling React Components

The main objective of this project is to enhance the visual appearance of "React applications" by applying various styling techniques.

➖ The web page is not functional as clicking "Create a new account" or "SIGN IN" does not do anything.
➖ However, entering invalid credentials will highlight the input fields with a red background color and border, indicating that conditional styles are present.

Initially, I will utilize Vanilla CSS to style the application.
After that, I will switch to CSS-in-JS styling using "Styled Components".
Finally, in the last step of the project, I will modify the style of the application using Tailwind CSS.

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

SignIn-Form.mp4

Styling React Component

Pre-built Project

Throughout my work on this project, I focused solely on the styling of the React Component, which had already been developed and provided to me.

To accomplish this task

I practiced utilizing various styling techniques such as Inline Styles, Styled Components, and CSS Modules.
By applying these techniques, I was able to modify the appearance of the component to meet the desired design specifications.

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

Styling React Component

Stylin-ReactComponent.mp4

Final CountDown

This section is about Refs and Portals. Two slightly more advanced React concepts which you definitely don't need in all React apps you are going to build.

🔑 In this project, I have undertaken some key concepts :

🔓 Accessing DOM Elements with Refs 🔓 Managing Values with Refs
🔓 Forwarding Refs to Custom Components using forwardRef function
🔓 Exposing Component APIs via the useImperativeHandle Hook
🔓 Detaching DOM Rendering from JSX Structure with portals

It is kind of a Game where website visitors can start different timer challenges with the goal of estimating when time is up and stopping the timer early enough before it expires.

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

Final CountDown

Final-CountDown.mp4

JSX Limitations

Pre-built Project

Throughout my work on this project, I focused solely on the JSX Limitations, which had already been developed and provided to me.

🔑 Which Concepts Have I Covered : :

🔓 One JSX Limitations is you can't return more than one "root" JSX element :
1. Creating a custom Wrapper Component
2. "Fragments" like React fragments can help us overocome JSX limitations.
🔓 Getting a Cleaner DOM with "Portals"
🔓 Working with "Refs"

React Project Management

Project management is a system that allows users to create and manage multiple projects in one place. Users can add new projects, select a desired project to open, and then add tasks within the project. Tasks and projects can be cleared, or deleted as needed.
This system helps users stay organized and on track with their project goals.

For this project, I plan to incorporate all the concepts covered in the course up to this point.
🔑 Which Concepts Have I Covered :

🔓 Configure & Re-use Components
🔓 Managing State to Switch Between Components
🔓 Access DOM Elements & Browser APIs with Refs
🔓 Collecting User Input with Refs, using ForwardRef
🔓 Validating User Input & Showing an Error Modal via useImperativeHandle
🔓 Prop Drilling 🔓 Styling via Tailwind CSS

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

React Project Management

Project-Management.mp4

Online Clothing Shop

Pre-built Project

During the course of this project, my primary focus was dedicated to devising solutions for the issue of Shared-State (Prop Drilling), which had already been developed and provided to me.
It is important to note that this establishment does not constitute a comprehensive online retail platform, rather, it serves solely as a shop with functionality limited to the cart feature.

🔑 Which Concepts Have I Covered :

🔓 Working on solutions for the problem of Shared-State(Prop Drilling)
🔓 Embracing Component Composition 🔓 Sharing State with Context
🔓 Managing complex state with Redusers

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

Online Clothing Shop

Online-Clothing-Shop.mp4

Place Picker Application

Pre-built Project

This application is a Place Picker that enables us to select destinations we may want to visit in the future.
It also provides the option to remove places from our list if we decide not to visit them.
You must allow browser location access to retrieve places based on your current location.

🔑 Which Concepts Have I Covered :

🔓 Understanding Side Effects & useEffect()
🔓 How to use useEffect() 🔓 How to manage useEffect() Dependencies
🔓 When NOT to use useEffect()

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

Place Picker Application

Place-Picker.mp4

Simple Login

Pre-built Project

In this project, the authentication process is not authentic.
All you need is a valid email address and a password with a minimum length of 7 characters.
Once you click on the login button, you will be directed to the welcome screen, and the log out button will return you to the previous page.

🔑 Which Concepts Have I Covered :

🔓 Working with (Side) Effects 🔓 Managing more complex State with Reducers
🔓 Managing App-Wide or Component-Wide State with Context API
🔓 Working with forwardRef & useImperativeHandle

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

Simple Login

Simple-Login.mp4

React Quiz

This React Quiz Application is a comprehensive and engaging platform designed to test your knowledge of React concepts, including side effects and many other key topics.
With a wide range of multiple choice questions, users can challenge themselves and enhance their understanding of React while having fun.
Whether you're a beginner looking to learn more about React or an experienced developer wanting to test your skills,
this quiz app is the perfect tool for expanding your knowledge and honing your expertise in React.

In this project, I have undertaken an in-depth exploration of numerous key concepts.

🔑 Which Concepts Have I Covered :

🔓 Deriving Computed-Values from State 🔓 Updating State based on Old-State
🔓 Working with useEffect to Manage setTimeout and setInterval
🔓 Workin with useCallback to Skipping re-rendering of components
🔓 Using Effect Cleanup Functions 🔓 Using Keys for Resetting Components
🔓 Splitting Components Up 🔓 Moving State Down

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

React Quiz

React-Quiz.mp4

Food Order Application

This project serves as a larger application that integrates all the key concepts I learned throughout the course.
It provides a context to see these concepts in action within a bigger project, covering essential React features like Components, State, and more from the basics.
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.

In this project, I have undertaken an in-depth exploration of numerous key concepts.

🔑 Which Concepts Have I Covered :

🔓 Set up the Components and then Isolate them.
🔓 Working with re-usable & pre-styled Utilities Component
🔓 Adding a Modal via a React Portal
🔓 Managing State & Props with Prop Drilling instead of using Context to make Modal more re-useable & does not tie it to one specific case.
🔓 Work with Context to Manage all Cart Data through Context
🔓 Utilizing the Reducer Hook to handle the Addition and Removal of items from the Cart
🔓 State & Conditional Rendering
🔓 Working with Refs & Forward Refs
🔓 Using the useEffect Hook
🔓 Using CSS Modul for Styling

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

Food Order Application

Food-Order-App.mp4

shahramshakiba / reactjs-basic-course Goto Github PK