Skill Path

Create a Front-End App with React

Learn to build front-end web apps with JavaScript and React.

Includes JavaScript, React, HTTP, Web Apps, Front-End Development, Web Framework, and more.

To start this Skill Path, upgrade your plan.
This skill path includes
Start
50,910 learners enrolled
This skill path includes
  • Skill level

    Intermediate
  • Time to complete

    Average based on combined completion rates — individual pacing in lessons, projects, and quizzes may vary
     
    37 hours
  • Projects

    25
  • Prerequisites

    1 course
     
    We suggest you complete the following courses before you get started with Create a Front-End App with React:
    • Basic HTML

About this skill path

Front-end skills are in high demand, and plenty of people know HTML and CSS. Set yourself apart by building a foundation in JavaScript. Then, you’ll create interactive applications with React—the library that powers Facebook and Netflix.

Skills you'll gain

  • Build interactive web apps
  • Understand the React library
  • Use and call APIs

Syllabus

9 units • 24 lessons • 25 projects • 17 quizzes
  • 1

    Introduction to JavaScript and Building Apps

    Learn the fundamentals of JavaScript and set up your computer for web app development.

  • 2

    JavaScript Functions, Arrays, and Loops

    Learn common programming tools in JavaScript such as conditionals and control flow, functions, arrays, and loops.

  • 3

    JavaScript Iterators, Objects, and Classes

    Learn to use higher-order functions, array methods, objects, and classes in JavaScript.

  • 4

    Modern JavaScript: Modules and Browser Compatibility

    Learn JavaScript’s module syntax to write more reusable code, and learn how to manage modern ES6+ JavaScript to work with all browsers.

  • 5

    Introduction to React

    Learn JSX, build your first React Components, and start the Ravenous Project.

  • 6

    React: Components Interacting

    Create nested components and complete part two of the Ravenous project.

  • 7

    React: Component State

    Manage component data with React state, and manage multi-component apps using stateless and stateful components.

  • Certificate of completion available with Plus or Pro

    Earn a certificate of completion and showcase your accomplishment on your resume or LinkedIn.

The platform

Hands-on learning

Animated GIF of an AI provided error explanation within Codecademy's learning environment
An AI-generated hint within the instructions of a Codecademy project
Animated GIF of Codecademy's Job Readiness Checker tool generating a compatibility report for a senior software engineer role
Animated GIF of building a phone screen interview using Codecademy's Interview Simulator
A fill-in-the-blank JavaScript question in a Codecademy assessment

Earn a certificate of completion

Show your network you've done the work by earning a certificate of completion for each course or path you finish.
  • Show proofReceive a certificate that demonstrates you've completed a course or path.
  • Build a collectionThe more courses and paths you complete, the more certificates you collect.
  • Share with your networkEasily add certificates of completion to your LinkedIn profile to share your accomplishments.

Reviews from learners

  • The progress I have made since starting to use codecademy is immense! I can study for short periods or long periods at my own convenience - mostly late in the evenings.
    Chris
    Codecademy Learner @ USA
  • I felt like I learned months in a week. I love how Codecademy uses learning by practice and gives great challenges to help the learner to understand a new concept and subject.
    Rodrigo
    Codecademy Learner @ UK
  • Brilliant learning experience. Very interactive. Literally a game changer if you're learning on your own.
    John-Andrew
    Codecademy Learner @ USA

Our learners work at

  • Google Logo
  • Meta Logo
  • Apple Logo
  • EA Logo
  • Amazon Logo
  • IBM Logo
  • Microsoft Logo
  • Reddit Logo
  • Spotify Logo
  • Uber Logo
  • YouTube Logo
  • Instagram Logo
How it works

Skill paths help you level-up

  1. Get a specialized skill

    Want to level up at work? Gain a practical, real-world skill that you can use right away to stand out at your job.
  2. Get step-by-step guidance

    We guide you through exactly where to start and what to learn next to build a new skill.
  3. Get there quickly

    We’ve hand-picked the content in each Skill Path to fast-track your journey and help you gain a new skill in just a few months.

Ready to learn a new skill?

Get started on Create a Front-End App with React with a free Codecademy account.Start

What's included in skill paths

  • Practice Projects

    Guided projects that help you solidify the skills and concepts you're learning.
  • Assessments

    Auto-graded quizzes and immediate feedback help you reinforce your skills as you learn.
  • Certificate of Completion

    Earn a document to prove you've completed a course or path that you can share with your network.