Building Web Applications with React

Paths

Building Web Applications with React

Authors: Cory House, Samer Buna, Peter Kellner, Jake Trent, Daniel Stern, Liam McLennan, Nitin Singh, Hendrik Swanepoel, Anthony Alampi, Christian Wenz, Soham Kamani, Mat Warger

React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.... Read more

What You Will Learn

  • React fundamentals
  • Design and style components
  • Manage state
  • Server-rendering
  • Testing components
  • Optimizing performance
  • Redux

Pre-requisites

  • HTML
  • CSS
  • JavaScript

Building Web Applications with React

This path starts off by introducing the fundamentals of React. It then dives into how to design, style and server render components, manage state and test and optimize your application.

React: The Big Picture

by Cory House

May 11, 2020 / 1h 10m

1h 10m

Start Course
Description

You've heard of React, but is it right for you? In this course, React: The Big Picture, you will first learn why React has become so popular. Next, you will learn the tradeoffs inherent in React's design. Finally, you will explore some drawbacks to consider. After watching this course, you'll have a clear understanding of React's core use cases, advantages, and drawbacks so you can make an educated decision on whether React is right for you.

Table of contents
  1. Course Overview
  2. Why React?
  3. Tradeoffs
  4. Why Not React?

React: Getting Started

by Samer Buna

Apr 20, 2020 / 4h 2m

4h 2m

Start Course
Description

Building efficient web and mobile interfaces is often challenging and requires the use of imperative logic. React enables you to declaratively describe user interfaces in terms of their state, and it will do the heavy lifting of natively building them for you. In this course, React: Getting Started, you will delve into the fundamental concepts about React and use them to build practical web applications. First, you will see how to design class components and stateful function component, how to one-way flow data and behavior in a component tree, and how to read and update state elements. Then, you will delve into modern JavaScript features used with React like arrow functions, destructuring rest and spread operators, classes, async/await, and more. Next, you will learn some core React tasks like taking input from the user, reading data from an API, managing side effects like timers, and sharing stateful logic with custom hooks. Finally, you will explore how to configure and use a local JavaScript development environment on your machine. When you are finished with this course, you will have the skills and knowledge you need to understand React projects, and start simple React applications from scratch.

Table of contents
  1. Course Overview
  2. The Basics
  3. Modern JavaScript Crash Course
  4. The GitHub Cards App
  5. The Star Match Game
  6. Setting up a Development Environment

Designing React Components

by Peter Kellner

May 10, 2021 / 3h 55m

3h 55m

Start Course
Description

Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your web app. In this course, Designing React Components, you will gain the ability to architect and build high quality web apps, that ensures just the right components re-render as the data in your applications changes. First, you will learn how separation of concerns applies to building React components. Next, you will discover the various primitive methods for sharing data and methods between components. Finally, you will explore how to use Context for establishing shared information and use custom hooks for advanced state management. When you are finished with this course, you will have the skills and knowledge of React component design needed to leverage re-usability and ensure consistency in your apps and code with less bugs.

Table of contents
  1. Course Overview
  2. Designing Better Components with React
  3. Managing React State in a Component Hierarchy
  4. Asynchronously Updating React State Using Custom React Hooks
  5. Using React Context and the useContext React Hook for Component Data Sharing
  6. Use React Context to Share a Speaker Data and CRUD Functions
  7. Master Performance Monitoring, Error Reporting, and Debugging of Components
  8. Use Higher Order Components and Render Props with Course Takeaways

Managing React State

by Cory House

Aug 20, 2020 / 5h 5m

5h 5m

Start Course
Description

There are many types of state. In this course, Managing React State, you’ll learn how to effectively declare state to create rich, interactive React apps. First, you’ll discover eight ways to handle state in React apps. Next, you’ll explore how to manage each of these types of states including route state, component state, and refs in both function and class components. Finally, you’ll learn when to consider global state via context and third party state libraries. When you’ve finished this course, you’ll have the skills to build complex, interactive React apps in the real world.

Table of contents
  1. Course Overview
  2. Deciding How and When to Declare State
  3. Managing Local and Remote State
  4. Implementing Routing
  5. Managing Shared, Derived, and Immutable State
  6. Implementing Form Validation
  7. Managing State via Refs
  8. Managing Complex State with useReducer
  9. Sharing State and Functions via Context
  10. Managing State in Class Components
  11. Managing State via Third Party Libraries

Styling React Components

by Jake Trent

May 21, 2020 / 1h 8m

1h 8m

Start Course
Description

When it comes to styling React components, there are many, many options to consider. In this course, Styling React Components, you’ll learn how to choose what options will fit your projects best by learning a little of each. First, you’ll explore the current state of styling in React. Next, you’ll discover many of the most popular and promising styling technologies available through a set of examples. Finally, you’ll learn how to set up potential projects for CSS. When you’re finished with this course, you’ll have the skills and knowledge of styling in React needed to make an informed decision between the options and start styling your next project.

Table of contents
  1. Course Overview
  2. What React Has Done for Styling
  3. A Catalogue of Styling Techniques
  4. Comparing Styling with Examples
  5. Potential Project Configurations for CSS in React

Server Rendering React Components

by Daniel Stern

Apr 17, 2020 / 1h 30m

1h 30m

Start Course
Description

When users access our applications, a fast, seamless experience can be the difference between a big sale and an unsatisfied customer. In this course, Server Rendering React Components, you'll gain the skills you need to create high-performance and professional applications that integrate both client and server. First, you'll learn about the server rendering workflow and create a scaffold with Babel and Webpack. Next, you'll build a client application with React and add interactivity. Finally, you'll use Express to render the application on the server and deliver a seamless user experience. When you're finished with this course, you'll have a broad range of React, Express, and server-rendering skills you can apply to both personal projects and full-scale enterprise applications.

Table of contents
  1. Course Overview
  2. Understanding Server Rendering React Components
  3. Scaffolding an Environment for Server Rendering
  4. Server Rendering Basic React Components
  5. Rehydrating Interactive React Components
  6. Summary

Testing React Components

by Liam McLennan

May 22, 2020 / 2h 23m

2h 23m

Start Course
Description

React introduced a new style of web user interface development, but it is not obvious how to properly test React components in all different scenarios. In this course, Testing React Components, you'll gain the ability to write automated tests for your React user interfaces. First, you'll learn how to write testable components. Next, you'll discover how to write tests for React components. Finally, you'll explore advanced testing topics such as mocking dependencies and testing asynchronous operations. When you're finished with this course, you'll have the skills and knowledge of testing needed to automate the testing of your React user interfaces. Software required: node.js, npm.

Table of contents
  1. Course Overview
  2. Getting Started
  3. Testing Component Rendering
  4. Testing Component Events
  5. Testing Components with State and Effects
  6. Testing Components with State Management

Implementing Forms in React

by Nitin Singh

May 13, 2021 / 1h 48m

1h 48m

Start Course
Description

Forms are the primary mode of collecting user input on web apps. In this course, Implementing Forms in React, you will learn to create forms for your web app that are not only performant, user friendly, and consistent but are built using components that are reusable and have rock solid data validation.

First, you will explore how a basic form works with Vanilla React and how to manage its state and handle user input. You will also see how to create a form using a library called Formik to avoid writing a whole lot of boilerplate code that is needed when using Vanilla React.

Next, you will explore adding sync and async data validation to your forms using the various mechanisms provided by Formik and how to create custom self-sufficient form elements that can be reused across screens in your app to provide that consistent look and experience to the end user.

Finally, you will learn how to implement uncontrolled forms and alternative ways of implementing forms that rely solely on uncontrolled components like the React Hook Form library and what advantages that brings.

When you are finished with this course, you will be very comfortable creating forms in React that can not only support a wide variety of user inputs but are smooth, consistent, and air tight when collecting data from the user.

Table of contents
  1. Course Overview
  2. Creating Forms Using Vanilla React
  3. Creating Forms Using Formik
  4. Implementing Data Validation
  5. Creating Reusable Custom Form Elements
  6. Implementing Uncontrolled Forms Using Vanilla React
  7. Using React Hook Form to Create Uncontrolled Forms

Optimize Performance for React

by Hendrik Swanepoel

Apr 16, 2020 / 55m

55m

Start Course
Description

React app performance can suffer due to components rendering too often. It's also common for React app bundles to end up too large and take too long to download. In this course, Optimize Performance for React, you’ll learn how to identify and address common React performance issues. First, you’ll explore how to analyze and fix wasted renders on both class and functional components. Next, you’ll see how to cache expensive operation results. Finally, you’ll learn how to reduce your app bundle size using production builds and lazy component loading. When you’re finished with this course, you’ll have the skills and knowledge of React performance needed to ensure that your React apps download and execute as fast as possible.

Table of contents
  1. Course Overview
  2. Getting Started
  3. Fixing Wasted Rendering Issues
  4. Fixing Large Bundles and Expensive Operation Issues

Building Applications with React and Redux

by Cory House

Mar 12, 2019 / 6h 37m

6h 37m

Start Course
Description

React is a library with so much power, but so few strong opinions. So building something significant requires a large number of decisions and work to build the foundation.

  • Learn how to use React Redux, React Router, and modern JavaScript to build powerful and fast React applications from the ground up.
  • Use Webpack, Babel, ESLint, npm scripts, Jest, React Testing Library, Enzyme, and more.
  • Create a rapid feedback development environment that runs linting and tests, transpiles modern JavaScript, runs a local webserver, opens the application, and reloads changes when you hit save.
  • Deploy with a single command.
This React Redux tutorial lays out a clear path for building robust, scalable React applications using today's modern and popular technologies.

Table of contents
  1. Course Overview
  2. Intro
  3. Environment Build
  4. React Component Approaches
  5. Initial App Structure
  6. Intro to Redux
  7. Actions, Stores, and Reducers
  8. Connecting React to Redux
  9. Redux Flow
  10. Async in Redux
  11. Async Writes in Redux
  12. Async Status and Error Handling
  13. Testing React
  14. Testing Redux
  15. Production Builds

Using React Hooks

by Peter Kellner

Apr 9, 2021 / 3h 20m

3h 20m

Start Course
Description

React Hooks reduce the complexity associated with managing state and lifecycle events exclusively in React Functional Components. What previously was complex, and often required middleware to implement, can be easily done and extended using React Hooks. They are called “hooks” because they allow the developer to hook into existing pre-built functionality. In this course, Using React Hooks, you'll gain the ability to consume pre-built React Hooks, as well as author your own custom React Hooks. First, you’ll learn all about the six most commonly used React Hooks that are built into the React core library. Then, you’ll see how they compare to the corresponding state and lifecycle events in more traditional legacy React Class Components. Next, you’ll explore how to both consume and author your own re-usable custom React Hooks. Finally, you’ll be shown how to combine React Context with React Hooks state management to integrate a Redux-like state management solution into your React app. When you are finished with this course, you’ll confidently be able to build fully capable functional components that use React Hooks.

Table of contents
  1. Course Overview
  2. Start Using React Hooks with useState, useEffect, and useRef
  3. Using More Hooks: useContext, useReducer, useCallback, and useMemo
  4. Migrating Your Existing Apps to React Hooks
  5. Learn How to Combine Existing React Hooks into New Combined Hooks
  6. Using useContext and useReducer to Make a Redux-like Global State

Choosing a React Framework

by Anthony Alampi

Mar 10, 2021 / 1h 6m

1h 6m

Start Course
Description

There are many different React frameworks to choose from, and it can be a struggle to choose the optimal one for your use case. In this course, Choosing a React Framework, you’ll learn to compare and select React frameworks for web projects. First, you’ll explore the different kinds of available React frameworks. Next, you’ll discover which kinds of criteria frameworks can be compared by, and how each one stacks up. Finally, you’ll see how the most popular frameworks compare to one another. When you’re finished with this course, you’ll have the skills and knowledge of React frameworks needed to choose the best one for your web project.

Table of contents
  1. Course Overview
  2. Factors to Consider When Choosing a Framework
  3. Framework Basics and “create-react-app”
  4. Third Party Framework Options
  5. Comparing Frameworks

Calling APIs with React

by Christian Wenz

Mar 16, 2021 / 2h 14m

2h 14m

Start Course
Description

Single-page applications commonly use APIs to retrieve data from the server. In this course, Calling APIs with React, you’ll learn to use React to communicate with APIs. First, you’ll explore how to send HTTP requests and use the results from React. Next, you’ll discover more advanced mechanisms to call APIs, such as React Query and SWR. Finally, you’ll see how to test your APIs and use proper error handling. When you’re finished with this course, you’ll have the skills and knowledge of React needed to work with APIs.

Table of contents
  1. Course Overview
  2. Making HTTP Requests
  3. More HTTP Request Options
  4. Advanced Data Retrieval
  5. Testing and Error Handling

Managing Large Datasets in React

by Soham Kamani

May 5, 2021 / 51m

51m

Start Course
Description

As websites scale, they’re required to handle more data. In this course, Managing Large Datasets in React, you’ll learn how to engineer your website to handle large datasets while remaining fast and performant. First, you’ll explore how to measure the performance of your application, and how it’s affected by rendering large datasets. Next, you’ll discover how to render components efficiently using pagination. Finally, you’ll learn about more efficient and dynamic implementations like infinite scroll and windowing. When you’re finished with this course, you’ll have the skills and knowledge needed to build lightning fast applications capable of handling millions of rows of data at a time.

Table of contents
  1. Course Overview
  2. Analyzing Performance with React Developer Tools
  3. Improving Performance through Pagination
  4. Optimizing Renders with Infinite Scroll and Windowing
  5. Eliminating Needless Renders

Building React Apps with TypeScript

by Mat Warger

Mar 25, 2021 / 57m

57m

Start Course
Description

Building complex modern web applications with React can be prone to errors. In this course, Building React Apps with TypeScript, you’ll learn to leverage TypeScript to develop React applications that provide type-checking at compile-time to help avoid run-time errors. First, you’ll explore how to get TypeScript working in an existing React application (and see how to start one from scratch). Next, you’ll discover how to declare both function and class components with help from TypeScript. Finally, you’ll learn how to use TypeScript types with React hooks. When you’re finished with this course, you’ll have the skills and knowledge of how to use TypeScript and React together to build modern React web applications in a type-safe way.

Table of contents
  1. Course Overview
  2. Configuring TypeScript in a React Application
  3. Declaring Components and Props using TypeScript
  4. Using Hooks with TypeScript
Offer Code *
Email * First name * Last name *
Company
Title
Phone
Country *

* Required field

Opt in for the latest promotions and events. You may unsubscribe at any time. Privacy Policy

By providing my phone number to Pluralsight and toggling this feature on, I agree and acknowledge that Pluralsight may use that number to contact me for marketing purposes, including using autodialed or pre-recorded calls and text messages. I understand that consent is not required as a condition of purchase from Pluralsight.

By activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit