30 Days of React.js

Welcome to the 30 Days of React.js challenge! This journey will take you through the core concepts of React.js, helping you build a solid foundation and develop interactive and dynamic web applications. Each day covers a specific topic or functionality, guiding you from the basics to more advanced concepts.

Table of Contents

Day 1: Hello World Get started by creating your first React.js application that displays "Hello World" on the screen.

Day 2: Counter Build a simple counter component that increments and decrements a value.

Day 3: User Input Learn how to handle user input in React.js by capturing and displaying text entered in a form.

Day 4: Display List Render a list of items using React.js, iterating over an array of data.

Day 5: Toggle Switch Create a toggle switch component to enable or disable a feature.

Day 6: Fetch Data Learn how to fetch data from an API and display it within your React.js application.

Day 7: Timer Implement a timer component that counts up or down based on user input.

Day 8: Background Change Create an interactive component that changes the background color of the page.

Day 9: Router Set up routing in your React.js application using react-router-dom to navigate between different pages.

Day 10: Random Quote Build a random quote generator that fetches and displays a new quote each time a button is clicked.

Day 11: Upload Image Implement an image upload feature that allows users to upload and display an image.

Day 12: Login and Registration Form Create a login and registration form with input validation and submission handling.

Day 13: Weather API Fetch and display weather data from an external API based on the user's location or input.

Day 14: Search Items Build a search functionality that filters items based on user input.

Day 15: Pagination Implement pagination to display a limited number of items per page, with navigation controls.

Day 16: Color Picker Create a color picker component that allows users to select and apply colors to elements.

Day 17: Responsive Hamburger Menu Develop a responsive hamburger menu for navigating between different sections of your app.

Day 18: Switch Theme Implement a theme switcher that toggles between light and dark modes in your application.

Day 19: Shopping Cart (Add and Remove) Build a shopping cart component that allows users to add and remove items.

Day 20: Counter App Using useReducer Learn how to manage complex state using the useReducer hook by building a counter app.

Day 21: TODO App Using useReducer Create a TODO list application using the useReducer hook for state management.

Day 22: Pagination Using useReducer Implement pagination in your app using useReducer to manage state.

Day 23: Logging Example Using Context Learn how to use React Context for state management by building a logging example.

Day 24: Draggable Div Create a draggable div component that users can move around the screen.

Day 25: App Language Translate Implement a language translation feature in your app to support multiple languages.

Day 26: Multiple Data Fetch Learn how to fetch and display multiple data sets in a React.js app.

Day 27: Multiple States in One State Manage multiple states within a single state object to streamline your state management.

Day 28: Image Gallery Build an image gallery that displays a collection of images and allows for navigation between them.

Day 29: TODO List Create a fully functional TODO list application to manage tasks.

Reference

This challenge is inspired by the React.js tutorials from DropxOut's YouTube playlist: React.js Playlist.

Get Started

Clone this repository and start your React.js journey by following the day-wise challenges. Happy coding!

Copy code
git clone https://github.com/ashishalf/30DaysOfReactjs.git
cd 30DaysOfReactjs

Let the challenge begin!