10 Basic React Projects for Beginners

Key takeaways

Building hands-on projects is a highly effective way to transition from learning React concepts to applying them. Here's what to know:

• React was the most commonly used web framework among professional developers in 2023, used by 40.6 percent of respondents to the Stack Overflow Developer Survey [1].

• Beginner projects teach you how to think in components, a mental model that is central to modern front-end development.

• You can build a compelling portfolio to show to employers by completing the projects listed below, starting with a simple to-do list.

Learn how to build your experience in React by completing basic projects. Then, practice these skills in a structured environment by enrolling in the Meta Front-End Developer Professional Certificate. You'll have the opportunity to create a website, practice skills using React, Figma, and Bootstrap, and prepare for job interviews in as little as seven months.

1. To-do list app: Managing state and events

A to-do list app is a classic first React project because it introduces how components store and update data in real time. You can use the useState hook to manage the current input and the list of tasks. When a state value changes, React re-renders the component to keep the interface up to date.

You can map over your tasks to display them and assign a unique key to each item so React can track updates efficiently. Creating a TodoItem component and passing data via props from the parent component demonstrates the distinction between read-only props and mutable state.

2. Weather app: Fetching API data and displaying dynamic content

Building a weather app helps you practice working with an external application programming interface (API) to update the user interface dynamically. You can use asynchronous functions to fetch data from a service like the OpenWeather API and display it.

Structure your app into sections for the current conditions, details like humidity and wind speed, and a multi-day forecast. This project helps you learn to connect React components with external data sources and manage asynchronous updates.

Is React easy to learn?

If you already understand basic HTML, CSS, and JavaScript, you may find React's fundamental concepts intuitive. It often takes practice to get comfortable with components, props, and state. The more you experiment and apply what you learn, the more familiar React can feel.

3. Calculator: Handling user input and functional components

A calculator project strengthens your understanding of how React manages user interactions and state updates. User actions, such as button clicks, are handled by event handlers that update the component's state.

You can organize your user interface (UI) into reusable components, like Display and Button components. Using the useState hook to track the current input and calculation result lets you practice state management and event handling in a clear context.

4. Recipe book: Using props and component composition

A recipe book gives you practical experience with component composition, a core React pattern. You can create a parent RecipeBook component and child components like RecipeCard and IngredientList to display consistent layouts for each recipe.

Using props to share data from parent to child components helps maintain a clear data flow and makes your app easier to update. Managing a list of recipes with the useState hook deepens your understanding of how React components communicate.

5. Tic-tac-toe game: Implementing game logic

Building a tic-tac-toe game helps you understand how React manages data flow and component interaction. React's official tutorial uses this exact project to demonstrate key concepts like state, props, and conditional rendering.

Dividing the app into Board, Square, and Game components lets you practice handling events and managing shared state. You can use conditional logic to determine the winner and display the game status dynamically.

6. Movie search app: Practicing API calls and filtering

A movie search app helps you learn how to fetch data from external APIs and render results dynamically. Creating a search bar that captures user input can trigger a data request to a public movie API. 

Storing the returned data in state using useState and mapping over it to display titles and posters provides hands-on experience with API integration. You can add conditional rendering to display a message if the search returns no results.

7. Expense tracker: Working with forms

An expense tracker app helps you strengthen your understanding of controlled components and dynamic rendering. When users submit new transactions, React can capture their input through form elements and update the component's state to reflect the change.

You can build an interface with a form to add expenses and a list that shows each transaction. Using the useState hook to track user entries and total reinforces how React re-renders a component whenever a state variable changes.

8. Quiz app: Managing state across multiple components

A quiz app is an effective way to learn how to share and manage state across several components. Each question, answer choice, and score display can be its own component, connected through props and state.

Using the useState hook in the main component to store the current question index and total score demonstrates how React updates the interface instantly as the user progresses. Conditional rendering can display different screens, like the start page and results summary.

9. Countdown timer: Using the useEffect hook

A countdown timer helps you understand how React manages time-based updates and cleanup with hooks. This project focuses on how components can perform actions at regular intervals.

Using the useState hook to store the timer value and the useEffect hook to handle starting or clearing an interval keeps the timer synchronized. Implementing a cleanup function in the effect prevents memory leaks by stopping the timer when the component unmounts or the countdown ends.

Is React backend or frontend?

React is a front-end JavaScript library you can use to build user interfaces. This includes the parts of a web application that users see and interact with: buttons, forms, and navigation. While React focuses on the client side, it can work together with backend tools and APIs to handle data and server logic.

10. Simple blog: Routing and dynamic pages

A simple blog project introduces you to page navigation and dynamic content in React. With routing, users can move between pages like a homepage and individual article view without reloading the browser.

Setting up routes for each section of the blog teaches you how single-page applications manage navigation. A main layout component can hold shared elements, while dynamic routes let you generate pages based on a post's ID. Using static data to store posts and mapping over them to render a list gives you practice with routing and dynamic rendering.

Tips for getting more value from React projects

As you build projects, you develop habits that help you think in components and troubleshoot confidently. Use these strategies to turn hands-on practice into lasting skills:

• Start small: Focus on the essentials first: components, props, and state.

• Break down work: Divide projects into small steps and test often.

• Write clear code: Keep components simple and readable for easier debugging.

• Reinforce learning: Try rebuilding projects from memory to strengthen your understanding.

• Iterate: Add one new feature at a time, like search, sorting, or filters.

• Review and reflect: Look over your code after you finish to spot patterns and improvements.

• Practice consistently: Repetition builds confidence and speed.

Learn more: What Is a React Developer? (And How to Become One)

How to learn React

React is a foundational tool for modern front-end developers. According to the 2023 Stack Overflow Developer Survey, it is one of the most commonly used web frameworks, with 40.6 percent of professional developers reporting they use it extensively [1].

As you build, pairing hands-on practice with trusted learning resources can accelerate your projects. Official documentation, guided courses, and active developer communities provide support as you explore new features and deepen your understanding.

• Explore the official React documentation to master the core concepts.

• Solidify your foundation with MDN Web Docs to review essential JavaScript and web fundamentals.

• Follow a structured path through online courses and Specializations to learn React and React Native.

• Experiment and test code safely in an online sandbox environment.

• Get real-world insights by joining developer communities to learn from other programmers.

Explore our free resources for front-end developers

Exploring a new career path? Subscribe to our newsletter Career Chat to stay up to day with what's happening in the industry. Then check out the following sources as you plan your next steps.

• Take the Quiz: Web Developer Career Quiz: Is It Right for You? Find Your Role

• Watch this video: Career idea: Front-end developer!

• Bookmark this page: Web Development Terms and Definitions

Accelerate your career growth with a Coursera Plus subscription. When you enroll in either the monthly or annual option, you’ll get access to over 10,000 courses. 

Build job-ready skills with Coursera Plus

Start 7-day free trial

• 
• 
• 
• 

Start 7-day free trial