Building Web Applications with React

Paths

Building Web Applications with React

Authors: Cory House, Samer Buna, Peter Kellner, Jake Trent, Daniel Stern, Liam McLennan, Hendrik Swanepoel

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

Related topics

HTML CSS JavaScript

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 29, 2020 / 2h 43m

2h 43m

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 how Higher Order Components (HOCs) and Render Props have led the way in achieving code separation. 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. Add Component Styles with Tailwind CSS
  4. Building a React Web App and Refactoring into Components
  5. Implementing Higher Order Component (HOC) and Render Props
  6. Using React Context and the useContext React Hook for Component Data Sharing
  7. Master Performance Monitoring, Error Reporting, and Debugging of Components
  8. Component Techniques Including Optimistic UI and 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

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
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