Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kelvintechnical/react-compound-projects


https://github.com/kelvintechnical/react-compound-projects

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
# React Compound



**React Compound** is a curated collection of React projects aimed at equipping developers with the skills and confidence to tackle real-world challenges. This repository serves as both a learning hub and a portfolio builder for aspiring and experienced developers alike.



Each project is designed to teach specific React concepts, progressively introducing more advanced topics. By the end of this series, developers will have a solid foundation in React, along with an impressive portfolio of projects to showcase their skills.



---



## 📖 Purpose of This Repository



- **Learn React Step-by-Step**: Start with foundational projects to build core skills in JSX, state management, and component-based architecture.

- **Master Advanced Concepts**: Progress to extended projects that incorporate React hooks, routing, context API, and lifecycle methods.

- **Portfolio Building**: Each project is structured to be a portfolio-worthy example of your React expertise.

- **Real-World Scenarios**: Simulate common development challenges, from form validation to dynamic dashboards, to prepare for real-world applications.



Whether you’re a beginner taking your first steps into React or a developer looking to solidify your knowledge, this repository has something for everyone.



---



## 📫 How to Reach Me:



**Email**: [[email protected]](mailto:[email protected])  

**LinkedIn**: [Kelvin R. Tobias](https://www.linkedin.com/in/kelvin-r-tobias-211949219/)  

**Bluesky**: [@kelvintechnical.bsky.social](https://bsky.app/profile/kelvintechnical.bsky.social)  

**Instagram**: [@kelvinintech](https://www.instagram.com/kelvinintech/)  



---



## About Me



Hi, my name is **Kelvin R. Tobias**, and I’m currently pursuing my **Software Engineering** degree at **Western Governors University**. My studies and personal projects have helped me gain experience in programming languages and frameworks, including **Python**, **JavaScript**, **Java**, **React**, and **C#**.



## Table of Contents

1. [Introduction to React: Basic Setup and "Hello, World!"](##1-introduction-to-react-basic-setup-and-hello-world)

2. [Understanding React Components](##2-understanding-react-components)

3. [State in React (useState)](##3-state-in-react-usestate)

4. [Handling User Input (Forms)](##4-handling-user-input-forms)

5. [Conditional Rendering in React](##5-conditional-rendering-in-react)

6. [Introduction to useEffect Hook](##6-introduction-to-useeffect-hook)

7. [Event Handling in React](##7-event-handling-in-react)

8. [Use of Arrays and Objects in State](##8-use-of-arrays-and-objects-in-state)

9. [Updating State Based on Previous State](##9-updating-state-based-on-previous-state)

10. [Dynamic Rendering of Multiple Components](##10-dynamic-rendering-of-multiple-components)

11. [Managing Feedback in the App (State and Conditional Rendering)](##11-managing-feedback-in-the-app-state-and-conditional-rendering)

12. [Working with Timers and Delays (setTimeout and setInterval)](##12-working-with-timers-and-delays-settimeout-and-setinterval)

13. [Code Review and Refactoring](##13-code-review-and-refactoring)

14. [Integrating Clipboard Functionality](##14-integrating-clipboard-functionality)

15. [Building the Final Project: Line-by-Line Code Training](##15-building-the-final-project-line-by-line-code-training)



---



## 1. Introduction to React: Basic Setup and "Hello, World!"



**Goal:** Learn to set up a React app and display a basic output in the browser.

- Create a simple React app with `create-react-app`.

- Render the text "Hello, World!" inside a `
` tag.



## 2. Understanding React Components



**Goal:** Learn about functional components in React.

- Create a simple component to display a greeting message.

- Use JSX to render content inside the component.



## 3. State in React (useState)



**Goal:** Learn how to use React state with `useState`.

- Create a button that toggles between two messages ("Hello" and "Goodbye").

- Use `useState` to update the state and re-render the component.



## 4. Handling User Input (Forms)



**Goal:** Learn to handle user input through forms.

- Create an input field and a button.

- Use `useState` to capture the input and display it dynamically.



## 5. Conditional Rendering in React



**Goal:** Learn to conditionally render content based on the state.

- Display different content based on whether a user has typed something in the input field or not.



## 6. Introduction to useEffect Hook



**Goal:** Learn how to run side effects in React components using `useEffect`.

- Set up an effect that runs when the component mounts.

- Display a message when the component is first rendered.



## 7. Event Handling in React



**Goal:** Learn how to handle user actions such as clicks.

- Add a button that, when clicked, updates a state variable.

- Display feedback based on the button click (e.g., "Button clicked!").



## 8. Use of Arrays and Objects in State



**Goal:** Learn how to store and manipulate arrays/objects in state.

- Set up a list of items in state and display them dynamically.

- Add functionality to add new items to the list.



## 9. Updating State Based on Previous State



**Goal:** Learn to update state based on the previous state.

- Create a counter that increments or decrements by 1 when buttons are clicked.



## 10. Dynamic Rendering of Multiple Components



**Goal:** Learn how to dynamically render components from an array.

- Render a list of components based on an array in state.

- Use the `.map()` method to iterate through the array and display the components.



## 11. Managing Feedback in the App (State and Conditional Rendering)



**Goal:** Learn to provide feedback to users based on actions (correct/incorrect).

- Create a simple feedback system that displays success or error messages after form submission.



## 12. Working with Timers and Delays (setTimeout and setInterval)



**Goal:** Learn how to use JavaScript timers in React.

- Create a timer that shows a countdown and then triggers a specific action (like showing feedback).



## 13. Code Review and Refactoring



**Goal:** Learn to refactor code for readability and maintainability.

- Refactor the previous projects into smaller reusable components.

- Separate logic, UI, and feedback into different functions or components.



## 14. Integrating Clipboard Functionality



**Goal:** Learn how to interact with the browser’s clipboard API.

- Create a "Copy to Clipboard" feature that copies some text or code from the page.

- Provide user feedback on whether the copy operation succeeded.



## 15. Building the Final Project: Line-by-Line Code Training



**Goal:** Combine all the learned skills into the final app.

- Create a stateful app that displays code lines and their corresponding explanations.

- Allow users to input their code and provide real-time feedback (correct or incorrect).

- Use state to manage the growing project code and user input.



---



## Conclusion



By the end of these 15 projects, you'll have gained a solid understanding of React's core concepts, and you'll have built a full-featured app that teaches users how to code line-by-line. Each project in this guide builds on the previous one, enabling you to develop the necessary skills in a progressive, easy-to-follow manner.



## 20. Debugging with React Strict Mode

**Skills:** React Strict Mode, Lifecycle Methods  

- Create a timer app where users can start/stop/reset a timer.  

- Use Strict Mode to catch potential issues with state updates and effects.  

[Link to Project](#)