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.
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.
This challenge is inspired by the React.js tutorials from DropxOut's YouTube playlist: React.js Playlist.
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 30DaysOfReactjsLet the challenge begin! 🚀