Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahramshakiba/reactjs-basic-course
🔵ReactJS Basic 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-basic-course
coding-style reactjs
Last synced: 2 days ago
JSON representation
🔵ReactJS Basic 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-basic-course
- Owner: ShahramShakiba
- Created: 2023-12-09T08:57:54.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-05T10:11:11.000Z (9 months ago)
- Last Synced: 2024-03-05T11:28:50.187Z (9 months ago)
- Topics: coding-style, reactjs
- Language: JavaScript
- Homepage: https://www.linkedin.com/in/shahramshakiba/
- Size: 8.03 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/8442b840-a18c-4dbe-829d-c4fbfc7e8de6
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/20b0bc44-1519-4882-8279-f19444a2f2ed
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/3a177e59-5e14-4db4-aab2-bc8c35e9ce1a
***
### 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
Sign in Form
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/9143a0d3-7d0a-49c8-9388-306bb0d760ef
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/347f279f-f3ef-470f-a948-46f2eceabf5e
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/7c820fee-0d50-4dac-b4c0-d85242c1f377
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/933d2ab3-3e8a-4b81-bf6f-abf56138f9fe
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/3921b229-04c4-49f2-a8dd-38a76d5e10f9
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/b0ccf5d6-9c07-4f20-98b8-8111c4eef2f2
***
### 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
https://github.com/ShahramShakiba/ReactJS-Course-Showcase/assets/110089830/383aabf4-7cc5-4db3-8173-1ccc7d9bf1b4
***
### 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
https://github.com/ShahramShakiba/ReactJS-Basic-Course/assets/110089830/2424ac28-55f9-466b-b7d0-1b10ecc9a85f
***
### 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
https://github.com/ShahramShakiba/ReactJS-Basic-Course/assets/110089830/3c86a976-e766-4f84-8752-a9b7dc7170b6
***
## 
Find me around the Web :
