Client-side Web Development with React.js

Full-Stack Engineering

12642 learners

This course sets the stage for exploring front-end development through React.js, turning the complexities of UI/UX design into an exciting journey. Here, you'll learn to harness the power of React.js, a popular library for building dynamic, high-performing user interfaces, transforming your skillset and your perception of front-end development.

HTML

JavaScript

React

See path

7 lessons

35 practices

4 hours

Front-End Development

Lessons and practices

Lesson 1: Introduction to React: Building Your First Application

Launching Your Portfolio into the Web Universe

Personalize Your Welcome Message

Greeting Message Not Displaying

Welcome Aboard the Cosmos Explorer

Mars Mission: Crafting the Welcome Message

Lesson 2: Exploring Components and Props in React.js

Assembling the React Robot

Adding a Body to Our React Robot

Component Contraption Confusion

Assembling the Robot Components

Assembling the React Robot

Lesson 3: React.js Fundamentals: Managing State with useState Hook

Player Health Meter Tracker

Starting Hits Adjustment

Hit Counter Not Counting

Initializing Health State and Visual Representation in a Game Environment

Creating a Treasure Counter in React

Lesson 4: Diving Into React.js: Learn How to Handle Forms and States

Embarking on a Digital Journey: Run the Registration Form

Add Destination to Astronaut Form

Astronaut Application Form Troubleshooting

Controlling the Mission Name

Astronaut Application Form: Final Frontier Challenge

Lesson 5: Navigating Single-Page Applications with React Router

Navigating the Cosmos: React Router in Action

Navigating the Cosmos: Refining Routes in the Space Gallery

Cosmic Route Corrections

Navigating the Cosmos: Adding Links and Routes in React Router

Navigating the Stars with React Router

Lesson 6: React.js: Fetching and Displaying Data with Axios

Fetching Social Media Posts in React

Fetching First Post Text in Social Media App

Cosmic Post Visibility Issue

Fetching and Displaying Data in the Cosmos

Creating a Social Media Feed Component

Lesson 7: Mastering Real-Time Interaction with State Management via the Context API in React.js

Personalized Greeting in Online Shopping Cart

Adding State to Context

Rectify the Shopping Cart Display

Adding Context to the Shopping Cart

Creating Your Own Online Shopping Cart with React Context

Meet Cosmo:

The smartest AI guide in the universe

Our built-in AI guide and tutor, Cosmo, prompts you with challenges that are built just for you and unblocks you when you get stuck.

From our community

Hear what our customers have to say about CodeSignal Learn

I'm impressed by the quality and can't stop recommending it. It's also a lot of fun!

Francisco Aguilar Meléndez

Data Scientist

+11

I love that it's personalized. When I'm stuck, I don't have to hope my Google searches come out successful. The AI mentor Cosmo knows exactly what I need.

Faith Yim

Software Engineer

+14

It's an amazing product and exceeded my expectations, helping me prepare for my job interviews. Hands-on learning requires you to actually know what you are doing.