https://github.com/ritwik880/reactjs-machine-coding-problems

https://github.com/ritwik880/reactjs-machine-coding-problems

Last synced: about 6 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/ritwik880/reactjs-machine-coding-problems
• Owner: Ritwik880
• Created: 2023-10-23T05:26:50.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-14T17:37:19.000Z (9 months ago)
• Last Synced: 2024-02-14T18:46:00.889Z (9 months ago)
• Language: JavaScript
• Size: 5.22 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ReactJS Machine Coding Problems

Welcome to the ReactJS Machine Coding Problems repository! This collection of challenges is designed to help you enhance your React skills through hands-on coding exercises.

## Table of Contents

1. [Introduction](#introduction)

2. [Challenges](#challenges)

3. [How to Use](#how-to-use)

4. [Contributing](#contributing)

5. [License](#license)

## Introduction

Whether you're a beginner looking to solidify your understanding of React or an experienced developer wanting to sharpen your skills, these machine coding problems are tailored to challenge and improve your ReactJS knowledge. Each challenge focuses on a specific aspect of React development, providing you with a practical and fun way to learn.

## Challenges

1. **Challenge 1: [FETCH API](/src/Components/Challenge/Challenge02.jsx):**

   - Make a request using the Fetch API and display the response data in your app.

   - Utilize the fetchData function to fetch data from the provided API endpoint (https://jsonplaceholder.typicode.com/users).

   - Display the fetched data in the console using console.log(incomingData).

2. **Challenge 2: [Counter](/src/Components/Challenge/Challenge03.jsx)**

   - Create a React component that increments a counter when a button is clicked. 

   - Note: The challenge is to implement it in such a way that it doesn't use the useState hook or class state.

3. **Challenge 3: [Puzzle](/src/Components/Challenge/Challenge04.jsx)**

   - Conditional Rendering Puzzle: Build a React component that renders "Hello, World!" initially. After 5 seconds, change the text to "Goodbye, World!" without using any external state management libraries or timers.

4. **Challenge 4: [Form Validation](/src/Components/Challenge/Challenge05.jsx)**

   - Create a form with input fields (e.g., name, email, password) and implement client-side form validation. Display error messages if the user enters invalid data.

5. **Challenge 5: [Implement Controlled & UnControlled Components](./src/Components/Challenge/Challenge06.jsx)**

   - Implement the controlled component approach for the email input field.

   - Utilize the useRef hook to create an uncontrolled component for the password input field.

   - Log the email and password values to the console during form submission.

   - Ensure that the component renders a form with appropriate input fields and a submit button.

## How to Use

To get started with the challenges, follow these steps:

1. Clone the repository to your local machine:

   ```bash

   git clone https://github.com/your-username/reactjs-machine-coding-problems.git

## Contributing

Contributions are welcome! If you have a new challenge idea, found a bug, or want to improve existing challenges, please open an issue or submit a pull request. Follow the contribution guidelines for more details.

## License

This repository is licensed under the MIT License. Feel free to use, modify, and distribute the code for educational purposes.