Skip to content
TagsReact

What is React?

React is a JavaScript library for building user interfaces. It was created by Facebook and open-sourced in 2013, it's now one of the most widely used tools in frontend development.

With React, instead of manually updating the page when data changes, you describe what your UI should look like, and React handles the rest. You build interfaces out of components, which are self-contained pieces of UI that manage their own logic and can be reused across your app. A button, a navigation bar, or a product card are all examples of components that you compose together to build something larger.

Since React was released, an ecosystem of tools such as React Router, Redux, Zustand, and full-stack frameworks like Next.js and Remix have grown around it, making it a popular choice among developers. If you're learning web development and looking to level up your skills by learning a framework, React is a great place to start.

Why learn React?

Since React is such a popular framework, learning React lays a great foundation for plenty of other things in web development. Once you understand how it works, picking up related tools like Next.js becomes much easier, and if you ever want to explore other frameworks like Vue or Svelte, the core concepts carry over.

In addition to that, most mid-to-large product teams working in JavaScript are running React directly or using a framework built on top of it, like Next.js or Remix, which makes React knowledge valuable and transferable across the industry.

Practice React on Frontend Mentor

Picking up a framework can be challenging, and things like reading docs and following tutorials will only take you so far. Real learning happens when you're building actual projects and engaging in problem-solving that tutorials don't cover.

Frontend Mentor challenges are based on real design files and real-world UI patterns such as dashboards, multi-step forms, and API-driven apps. When you build them with React, you'll be making the same decisions you'd face on the job: how to structure components, how to fetch and manage data, and how to handle edge cases cleanly.

Recommended React challenges

Hand-picked challenges to help you practice React at every skill level.

  • Free

    Interactive rating component

    • HTML
    • CSS
    • JS
    newbie

    This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!

  • Free

    Notifications page

    • HTML
    • CSS
    • JS
    junior

    This project will be a brilliant test of your HTML, CSS, and basic JavaScript skills. You'll use JS to toggle the visual state of the notifications.

  • Free

    Product list with cart

    • HTML
    • CSS
    • JS
    junior

    Practice updating the UI in multiple places based on user actions. The starter download also includes a JSON file to help you practice populating the DOM dynamically.

  • Free

    Browser extension manager UI

    • HTML
    • CSS
    • JS
    junior

    This project will be a fun way to practice working with dynamic data, filtering data, color theming, building a responsive grid, and more!

  • Free

    Todo app

    • HTML
    • CSS
    • JS
    intermediate

    The classic todo app with a few twists! This app includes a dark/light theme toggle and drag & drop reordering for anyone wanting an extra test.

  • Free

    Interactive comments section

    • HTML
    • CSS
    • JS
    intermediate

    This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!

  • Premium

    Note-taking web app

    • HTML
    • CSS
    • JS
    advanced

    This project has many fun and challenging features to add, including color and font themes. It can also be built as a full-stack web app!

  • Free

    Multi-step form

    • HTML
    • CSS
    • JS
    advanced

    An excellent test for your form-building and JS skills, this project will pose many challenges along the way to completion.

  • Premium

    Kanban task management web app

    • HTML
    • CSS
    • JS
    guru

    In this project, you'll build a fully-functional task management app with a light/dark mode toggle. We provide a JSON file, so you can practice working with JSON data.

View more challenges

Solutions made with React

View more solutions

Take your React skills further

Want a more structured approach? This learning path guides you through curated React challenges—from first principles to real-world projects.

advanced

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you reinforce knowledge and gain hands-on experience with your chosen framework.

Join 1,147,161 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in