Learn React
React is a JavaScript library developed at Facebook for building user interfaces. This Track will give you a solid foundation for working with React.
React allows you to describe how your app should be displayed in an easy to understand way. It also helps eliminate the complexity that comes with updating your DOM elements when users interact with your application. React will change the way you think about building web applications!
Before enrolling in this Track, we recommend the courses JavaScript Loops, Arrays, and Objects, and Object-Oriented JavaScript as prerequisites.
We'll begin with an introductory course on React, where you'll learn about components, props, state, and a few other foundational things.
The next part of the Track will walk you through how to set up a React App, and then you'll level-up your React skills by gaining a better understanding of functional components, useState and useEffect hook, and how to split your UI into reusable and composable components.
We'll learn how to fetch data in your React apps. Then, our React Router 6 Basics course will teach you to use React Router v6, a declarative routing solution for React, to manage navigation and rendering of components in your applications.
Finally, we'll put all this knowledge to use with using the Context API, learning how to add authentication to your apps and finishing it off by building and deploying your very own portfolio to show to potential employers.
Ready to get started working with React? Let's get started!
-
An entry-level salary for the technologies covered in this track is about $90,000 / yr on average.
-
Some companies that use these technologies regularly include: Netflix, Airbnb, Facebook, Home Depot, IBM Design
Ready to start learning?
Treehouse offers a 7 day free trial for new students. Get access to 1000s of hours of content. Learn to code, land your dream job.
Start Your Free Trial-
- 1
- 2
- 3
- 4
React Basics
React is a JavaScript library for building user interfaces. React makes building and maintaining your application's user interface faster and easier by breaking it up into smaller, reusable components. It also helps eliminate the complexity of updating your DOM elements when the user interacts with your application.
-
11 minPractice
Practice React Component Rendering
Sharpen your React skills by practicing JSX, creating and rendering components, passing down props, as well as iterating over data, and more.
Viewed -
21 minWorkshop
How to Set Up a React App
React is a popular JavaScript library used for building user interfaces. In this workshop, you will learn how to set up a React app from scratch using Create React App and Vite. In this course, you'll learn step-by-step how to create a new React project, the starter files each built tool starts you off with and the default commands it comes with.
Viewed -
- 1
- 2
- 3
- 4
- 5
React Components
Components are the core building blocks of a React application. This course will level-up your React skills by providing a better understanding of functional components, state and lifecycle methods, and how to split your UI into reusable and composable components.
-
15 minPractice
Practice State in React
Practice initializing and managing state in React by building a star rating component.
Viewed -
43 minWorkshop
Data Fetching in React
Learn different methods for fetching external data in React, and how to display the data in your app.
Viewed -
- 1
- 2
- 3
React Router v6 Basics
Learn to use React Router v6, a declarative routing solution for React, to manage the navigation and rendering of components in your applications.
-
54 minWorkshop
React Context API
In the typical React data flow, components communicate with each other via props. A parent passes props down to child components. Sometimes the intermediary components get props passed to them with the sole purpose of passing that data down one (or several) more levels deep. This cascade of props is often referred to as "prop drilling". The React Context API provides a way to pass data to components without having to pass props manually at every single level.
Viewed -
- 1
- 2
- 3
React Authentication
In this course, you will learn how to implement the Basic Authentication scheme in a React application using an Express REST API.
-
19 minWorkshop
Deploying a React App
Learn how to create a production build of your React application and deploy it to a server using free tools and services like Vercel and Netlify.
Viewed -
24 minWorkshop
Create a Portfolio Using React
Build an impressive portfolio with React that showcases your skills to potential employers. We'll start with provided styles and focus on creating components and adding interactivity. The portfolio will have a mobile-first design and be user-friendly for everyone. By the end, you'll have a simple yet impressive portfolio to show to potential employers.
Viewed -
2 minInstruction
Can AI Write React Applications?
Explore the fusion of AI and React through tutorials and live demonstrations, discovering how tools like ChatGPT and GitHub Copilot enhance development efficiency and user experience, while witnessing real-time examples of AI-powered React applications....(continue reading)
Viewed -
2 minInstruction
Next Steps and Practice Opportunities
Discover the next steps in mastering React hooks, including exploring useReducer and custom hooks, along with hands-on practice opportunities through Code Adventures....(continue reading)
Viewed -
Track Completion
This course includes:
- React Basics 2 hours
- Practice React Component Rendering 11 min
- How to Set Up a React App 21 min
- React Components 2 hours
- Practice State in React 15 min
- Data Fetching in React 43 min
- React Router v6 Basics 91 min
- React Context API 54 min
- React Authentication 106 min
- Deploying a React App 19 min
- Create a Portfolio Using React 24 min
- Can AI Write React Applications? 2 min
- Next Steps and Practice Opportunities 2 min