Introducing React30: Master React.js in 30 Days by building 30 practical projects
Introduction
Welcome to React30, a journey where we will build 30 React projects in 30 days and learn core React.js fundamentals along the way. This series is designed to cover a wide range of topics, ensuring you master the complete React.js ecosystem and it’s related modules. Each project focuses on specific aspects, including all major React hooks, user authentication in MERN stack, how to build full-stack applications, Instagram Stories UI in web app, handling API calls, creating chart visualizations, media handling and building a developer portfolio.
I have personally tried to include all concepts I have learnt in the past 8 years in this series for learners who are trying to become better in frontend development.
Projects Overview
- Student ID Card generator
In this project we walk through the process of creating an ID card generator using Vanilla JavaScript. This project serves as a great exercise to refresh and solidify our JavaScript fundamentals before diving into more complex libraries like React.
Article link: Project 1
2. Clicker App:
In this project we will build a clicker app using React.js. This project will help us understand the basics of JSX rendering and introduce us to the useState hook, an essential feature in React.
Article link: Project 2
3. Digital Clock App:
In this tutorial, we’ll create a simple digital clock app using React.js. This project will teach us how to utilize setInterval for real-time updates and introduce the useEffect hook to manage side effects in React applications.
Article link: Project 3
4. User Feed App:
In this tutorial, we’ll create a user feed app using React.js. We’ll make an API request using Axios to fetch user data and display it as a scrollable feed on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.
Article link: Project 4
5. Image Gallery App:
In this tutorial, we’ll create an image gallery app using React.js. We’ll make an API request using Axios to fetch a list of images and display them as a scrollable gallery on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.
Article link: Project 5
6. Quote Generation API
In this tutorial, we’ll create a backend API for generating quotes using Express.js. We’ll start by using local JSON data, and later replace it with data from a MongoDB database.
Article link: Project 6
7. Random Quote Generator with Redux Toolkit
In this tutorial, we’ll create a random quote generator using React.js, Redux Toolkit, and Redux Thunk. We’ll also learn how to use the useEffect hook to make API calls.
Article link: Project 7
8. Navbar using React Router
In this tutorial, we’ll create a navbar using React.js and React Router to navigate between different pages.
Article link: Project 8
9. User authentication using Express.js and MongoDB
In this tutorial, we’ll create a backend APIs for implementing user login/registration process using Express.js and MongoDB. We will learn how session creation works and how to validate user data on backend.
Article link: Project 9
10. User Authentication Forms in Frontend
In this tutorial, we’ll create login and registration forms using React.js and React Router to handle user authentication in frontend.
Article link: Project 10
11. Cryptocurrency listing app
In this tutorial, we’ll create a Cryptocurrency listing app using React.js. We’ll learn how to use the render table from JSON array fetched from API call.
Article link: Project 11
12. Instagram Stories feed
In this tutorial, we’ll create a Instagram Stories Feed using React.js. We’ll learn how to use the render categories grid and show stories with text to users.
Article link: Project 12
13. SpaceX Launch Info app
In this tutorial, we’ll build a SpaceX latest launch info app using React. The app will fetch data from the SpaceX API and display launch information along with a video player using the react-player npm package.
Article link: Project 13
14. Building charts visualisation
In this tutorial, we’ll build a React app that fetches India’s GDP data from the World Bank API and visualizes it using bar and area charts. We’ll use the axios library for API requests and the recharts npm package for chart visualization.
Article link: Project 14
15. Building developer portfolio
In this tutorial, we’ll build an online developer portfolio using React.js. We’ll take the static site resume code from the Start Bootstrap repository and convert the static HTML code to JSX for rendering in React. This will allow us to leverage the benefits of React’s component-based architecture for creating a dynamic and interactive developer portfolio.
Article link: Project 15
16. Implementing Theme Switching
In this tutorial, we’ll walk through the process of implementing theme switching (Dark theme/Light theme) in a basic web app using React and Bootstrap. We’ll use the useContext hook to manage the theme state, providing a seamless user experience with the ability to switch between different themes.
Article link:- Project 16
17. React Query Implementation
In this tutorial, we’ll explore how to integrate React Query into a basic web app.
Article link: Project 17
18. Shopping cart app by utilising useReducer hook
In this tutorial, we’ll create a simple Shopping Cart application demonstrating how useReducer simplifies state updates.
Article link: Project 18
19. Implementing Lazy Loading in React using Suspense API
In this tutorial, we’ll guide you through building a practical mini project that incorporates lazy loading using React’s Suspense API.
Article link: Project 19
20. Building a Game Release Website with Styled Components
In this article, we’ll guide you through the process of building a game release website using React and adding style to your components with the powerful Styled Components library.
Article link: Project 20
21. Building a Text-Only Social Media Website with useMemo in React
In this guide, we’ll explore the process of building a text-only social media website using React. To optimize performance, we’ll leverage the useMemo hook for efficient memoization of data.
Article link: Project 21
22. Building a Job Portal with useCallback in React
In this article, we’ll explore the process of building a job portal using React and optimizing its performance with the useCallback hook.
Article link: Project 22
23. Setting Up a React Project Using Webpack and Babel
In this tutorial, we’ll guide you through the process of setting up a React project using Webpack and Babel from scratch.
Article link: Project 23
Part 24:Writing test cases with react-testing-library
In this tutorial, we will set up and use react testing library for writing test cases in react.
Article link: Part 24
Part 25: Simulating user interactions with react-testing-library
In this guide, we’ll cover simulating clicks and events, testing input and forms, and navigating and routing.
Article link: Part 25
Part 26: Mocking data in API calls using react-testing-library
In this guide, we’ll cover how to mock API calls using react testing library.
Article link: Part 26
Project 27:Building a Home Decor Website with Material-UI in React
In this article, we’ll explore how to build a home decor website using Material-UI in React.
Article link: Project 27
Project 28: Building a VR Headset Launch Website with Tailwind CSS in React
In this article, we’ll explore the creation of a VR headset launch website using Tailwind CSS in a React application.
Article link: Project 28
Project 29: Building a Markdown Editor in React
In this article, we’ll explore the steps to build a Markdown editor website in a React application
Article link: Project 29
Project 30: Building an Image Recognition App using TensorflowJS
In this article, we’ll explore the process of building an image recognition app in React.
Article link: Project 30
Benefits of React30
- Comprehensive Learning:
Covers the entire spectrum of React.js concepts and tools.
- Practical Application
Apply learned skills in real-world scenarios through diverse projects.
- Hands-On Experience:
Gain hands-on experience with APIs, charts, authentication, and more.
- Portfolio Development:
Complete your journey by building your developer portfolio.
- Problem-Solving Skills:
Tackle challenges and refine your problem-solving abilities.
Conclusion
Embark on the React30 journey to become a proficient React.js developer. Each project is a step toward mastering the React ecosystem. Follow the articles, build the projects, and witness your React skills flourish. Happy coding!
Check out my YouTube channel for more content:
