React

Paths

React

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

React is a Javascript library, developed in 2013 by Jordan Walke of Facebook. You’ll find React is both very popular (it’s the 5th most starred JS library on GitHub) and used on... Read more

What you will learn:

  • Component state
  • Props object
  • JSX
  • Component lifecycle
  • Events and event binding
  • React forms
  • Performance enhancements
  • Styling

Pre-requisites

This path is intended for a novice learner with no prior experience in React. Prior knowledge and understanding of JavaScript is required. Prerequisite path: JavaScript Skill Path

Beginner

The courses in this section will teach you the fundamentals for React including component states, the special Props object, and JSX. These topics are the perfect foundation for you to move to the intermediate level.

React: The Big Picture

by Cory House

Nov 21, 2017 / 1h 12m

1h 12m

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

Feb 25, 2019 / 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

React Fundamentals

by Liam McLennan

Jun 21, 2018 / 4h 13m

4h 13m

Start Course
Description

The web has become the dominant programming model of our time, but building rich web applications can become extremely complicated. In this course, React Fundamentals, you will learn foundational knowledge of React. First, you will learn how to structure an application out of components and how to build those components with React. Next, you will discover JSX syntax and how to use it to connect React components together. Finally, you will explore application state management with Redux. When you are finished with this course, you will have the skills and knowledge of React needed to build your own complete web applications.

Table of contents
  1. Course Overview
  2. Introducing React
  3. Components
  4. JSX
  5. Events
  6. Forms
  7. State

Using React Hooks

by Peter Kellner

May 3, 2019 / 1h 54m

1h 54m

Start Course
Description

React versions 16.8 and higher include React Hooks which solves several problems that went unaddressed in previous versions. React Hooks provide a direct API to React concepts you already know about, like props, state, context, refs and lifecycle events. This is not a beginner course on React itself; if you are not comfortable building simple React apps that use state, start out with the React: Getting Started course. In this course, Using React Hooks, you’ll learn both basic and advanced techniques for using React Hooks in React functional components where previously there was no good way to manage state or lifecycle events. First, you'll see how to use all of the built-in React Hooks provided by the React team. Next, you’ll discover that you can combine the base React Hooks into your own custom React Hooks. Finally, you’ll explore how to incorporate Hooks into a real-world React App. When you are finished with this course, you’ll confidently be able to combine functional components with React Hooks to build first class React apps.

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. Integrating Authentication into Your App with React Hooks
Project

Build a Quiz Component with React

by Jon Friskics

Jun 1, 2018 / 2h 30m

2h 30m

Start Project
Description

In this project you’ll follow along with our instructions and build a simple quiz component with React 16.x. You’ll create several components across different files, pass data as props, and propagate events up and down a chain of components.

Project overview
  1. Setup15m
  2. Creating a Quiz Component20m
  3. Creating a QuizQuestion Component20m
  4. Creating a QuizQuestionButton Component20m
  5. Creating a QuizEnd Component15m
  6. Displaying Quiz Questions and Handling Events30m
  7. Displaying An Error Message Based on State15m
  8. Resetting the Quiz15m

Intermediate

These intermediate courses will take you through some of the more intricate elements within React, including working with Flux and Redux. Once you fully comprehend the topics in this area, you'll be ready to move to the advanced section.

Securing React Apps with Auth0

by Cory House

Nov 30, 2018 / 3h 18m

3h 18m

Start Course
Description

Learn how to use Auth0 to handle authentication and authorization in your React apps. In this course, Securing React Apps with Auth0, you will learn how to add secure login, signup, and API calls to your React app, using Auth0 and Express. First, you will learn modern security protocols including OAuth 2.0, OpenID Connect, and JWT tokens. Next, you will implement login, logout, and signup with React and Auth0. Then, you will secure Express APIs using scopes, rules, and roles and endpoints via React. Finally, you will explore the variety of ways you can customize React and Auth0 to your auth related needs using React Router, React's context, and the Auth0 dashboard. When you're finished with this course, you will have the fundamental authorization and authentication skills needed to secure a modern React app with Auth0.

Table of contents
  1. Course Overview
  2. Authorization and Authentication Standards
  3. Create a React App
  4. Configure Auth0
  5. Implement Login
  6. Logout, Signup, and User Profile
  7. API Authorization Fundamentals
  8. API Authorization with Scopes, Rules, and Roles
  9. Customization and Enhancements

Building Applications with React and Flux

by Cory House

Jun 19, 2019 / 5h 12m

5h 12m

Start Course
Description

Get started with React, React Router, and Flux by building a real-world style data-driven application that manages Pluralsight course data. This course uses a modern client-side development stack including create-react-app, Node, Webpack, Babel, and Bootstrap.

Table of contents
  1. Course Overview
  2. Intro
  3. Environment Setup
  4. React Core Concepts
  5. Creating React Components
  6. Props, State, Lifecycle Methods, and Keys
  7. Hooks, Component Composition, and PropTypes
  8. React Router
  9. Forms
  10. Flux
  11. Flux Demos

Building Applications with React and Redux

by Cory House

Mar 12, 2019 / 6h 39m

6h 39m

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

Building Scalable React Apps

by Hendrik Swanepoel

Oct 27, 2016 / 3h 49m

3h 49m

Start Course
Description

In this course, Building Scalable React Apps, you will remove the guesswork with the React-Boilerplate stack so that you can keep on delivering features, without needing to evolve your stack with every new addition. First, you'll learn how to use redux-saga to elegantly attach side effects to your app. Next, you'll focus on learning how to use reselect to compute values on top of your redux store. Finally, you'll learn how to design your components to keep them as simple, portable, and testable as possible. After watching this course, you'll be able to tackle large React applications alone, or with a team.

Table of contents
  1. Course Overview
  2. Getting Started
  3. An Introduction to Building Components with react-boilerplate
  4. Loading Data from the Server with Redux-saga
  5. Handling Events with Redux-saga
  6. Styling Your Components with CSS
  7. Adding Routes to your Application
  8. Building Forms to Gather User Input
  9. Achieving Component Reuse
  10. Tackling a Realistically Complex Feature with Your New Skills

Styling React Components

by Jake Trent

Mar 13, 2019 / 1h 23m

1h 23m

Start Course
Description

When writing React components, you have so many great options for styling. Which do you choose? In this course, Styling React Components, you will gain the ability to choose which makes the most sense for you to use on your project. First, you will learn some of the origins for a proliferation of new and progressive options. Next, you will discover how to use several of the most popular methods of styling and implementing a small styling project in each. When you’re finished with this course, you will have the skills and knowledge of styling React with CSS needed to make your components beautiful in a way that works well for you. Software required: Node.js, an editor, and a web browser.

Table of contents
  1. Course Overview
  2. UIs in React
  3. Inline Styles
  4. Radium
  5. A Webpack Intro for CSS
  6. CSS Stylesheet
  7. CSS Modules

Advanced

In this section, you'll explore more advanced topics like the context API, HOCs, external state, performance optimization, production deployment, testing and building a full-stack app using React.

Advanced React.js

by Samer Buna

Jul 21, 2017 / 3h 55m

3h 55m

Start Course
Description

Have you ever wanted to create full-stack Javascript applications with React.js? This course, Advanced React.js, covers many advanced topics and best practices about React.js. First, you'll learn how to configure and customize full-stack JavaScript environments. Next, you'll explore how to work with async data and manage an application state both internally and externally. Additionally, you'll dive into components context API, and learn how to use it with higher order components, pure components, presentational and container components, and all components lifecycle methods. Finally, you'll discover performance analysis and optimization, how to use immutable data structures, and how to create production builds for both React.js and Node.js. By the end of this course, you'll be able to efficiently use presentational and stateful React components in production.

Table of contents
  1. Course Overview
  2. Introduction
  3. Full-stack JavaScript with React.js
  4. Working with an Asynchronous API
  5. The Context API and Higher Order Components
  6. Subscribing to State
  7. Performance Optimization
  8. Production Deployment Best Practices

Testing React Applications with Jest

by Daniel Stern

May 11, 2018 / 3h 36m

3h 36m

Start Course
Description

At the heart of building durable and reliable React applications is a solid understanding of testing, starting with Jest. In this course, Testing React Applications with Jest, you will learn everything you need to do to create solid tests for your React components and applications. First, you’ll learn how to install Jest on any machine, run tests with it via the command line, and integrate it with any Node project. Next, you’ll dive into the various testing techniques, including globals, mocking, and snapshot testing that you can use to make your tests more readable and efficient. Finally, you'll explore how to use all these techniques to test React components and the applications they belong to. When you’re finished with this course, you’ll be able to immediately start writing tests for your React applications, discuss testing strategies and techniques in the workplace, and facilitate development by setting up and configuring Jest.

Table of contents
  1. Course Overview
  2. Course Introduction
  3. Understanding Testing
  4. Introduction to Jest
  5. Test Running with Jest
  6. Mocking Functions and Modules
  7. Snapshot Testing
  8. Testing Components
  9. Advanced Jest Matchers
  10. Conclusion

Building a Full Stack App with React and Express

by Daniel Stern

Feb 7, 2019 / 3h 14m

3h 14m

Start Course
Description

Making scalable, responsive websites with a secure server component is one of the most daunting tasks in web development. In this course, Building a Full Stack Application with React and Express, you will gain the ability to build high-performance React components and a powerful, secure server, and to link them together with a state-of-the-art database. First, you will learn to build a front-end application using React, Redux, and Webpack. Next, you will develop a server and database component using Express and MongoDB. Finally, you will couple the two elements together using Redux Saga and Axios. When you are finished with this course, you will have the skills and knowledge of JavaScript, React, and Express development needed to build full stack applications from scratch or to integrate seamlessly into most Node.js-based software teams. Software required: GIT, Node.JS, IDE.

Table of contents
  1. Course Overview
  2. Structure of Full Stack Applications
  3. Configuring the Development Environment with Webpack and Babel
  4. Implementing React Components and Redux State
  5. Creating Persistent Data Storage with Node, Express, and MongoDB
  6. Integrating React View Layers with Persistent Data
  7. Authentication Concepts
  8. Deployment Concepts
  9. Conclusion
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