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.
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 30DaysOfReactjs
Let the challenge begin!