Paths

React

Authors: Samer Buna, Jon Friskics, Cory House, Liam McLennan, Daniel Stern, Hendrik Swanepoel, Jake Trent

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

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

1h 11m

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 Overview1m
  2. Why React?25m
  3. Tradeoffs23m
  4. Why Not React?20m

React: Getting Started

by Samer Buna

Jun 13, 2015 / 4h 1m

4h 1m

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 Overview2m
  2. The Basics57m
  3. Modern JavaScript Crash Course22m
  4. The GitHub Cards App42m
  5. The Star Match Game1h 16m
  6. Setting up a Development Environment40m

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 Overview1m
  2. Introducing React21m
  3. Components37m
  4. JSX35m
  5. Events31m
  6. Forms59m
  7. State1h 6m
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 Overview1m
  2. Authorization and Authentication Standards21m
  3. Create a React App16m
  4. Configure Auth018m
  5. Implement Login29m
  6. Logout, Signup, and User Profile16m
  7. API Authorization Fundamentals22m
  8. API Authorization with Scopes, Rules, and Roles35m
  9. Customization and Enhancements36m

Building Applications with React and Flux

by Cory House

Aug 12, 2015 / 5h 8m

5h 8m

Start Course
Description

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

Table of contents
  1. Intro21m
  2. Environment Setup37m
  3. React Core Concepts21m
  4. React: Creating Components Introduction24m
  5. React Lifecycle18m
  6. React Composition15m
  7. React Router38m
  8. React Forms53m
  9. Flux23m
  10. Flux Demos54m

Building Applications with React and Redux

by Cory House

May 20, 2016 / 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 Overview1m
  2. Intro9m
  3. Environment Build33m
  4. React Component Approaches10m
  5. Initial App Structure16m
  6. Intro to Redux18m
  7. Actions, Stores, and Reducers23m
  8. Connecting React to Redux16m
  9. Redux Flow53m
  10. Async in Redux49m
  11. Async Writes in Redux47m
  12. Async Status and Error Handling45m
  13. Testing React34m
  14. Testing Redux22m
  15. Production Builds18m

Building Scalable React Apps

by Hendrik Swanepoel

Oct 27, 2016 / 3h 48m

3h 48m

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 Overview1m
  2. Getting Started23m
  3. An Introduction to Building Components with react-boilerplate12m
  4. Loading Data from the Server with Redux-saga19m
  5. Handling Events with Redux-saga22m
  6. Styling Your Components with CSS32m
  7. Adding Routes to your Application25m
  8. Building Forms to Gather User Input36m
  9. Achieving Component Reuse19m
  10. Tackling a Realistically Complex Feature with Your New Skills35m

Styling React Components

by Jake Trent

Jan 5, 2016 / 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 Overview1m
  2. UIs in React7m
  3. Inline Styles21m
  4. Radium11m
  5. A Webpack Intro for CSS8m
  6. CSS Stylesheet12m
  7. CSS Modules20m

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

3h 54m

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 Overview1m
  2. Introduction5m
  3. Full-stack JavaScript with React.js59m
  4. Working with an Asynchronous API33m
  5. The Context API and Higher Order Components27m
  6. Subscribing to State42m
  7. Performance Optimization40m
  8. Production Deployment Best Practices23m

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 Overview1m
  2. Course Introduction14m
  3. Understanding Testing22m
  4. Introduction to Jest24m
  5. Test Running with Jest37m
  6. Mocking Functions and Modules24m
  7. Snapshot Testing23m
  8. Testing Components43m
  9. Advanced Jest Matchers17m
  10. Conclusion5m

Building a Full Stack App with React and Express

by Daniel Stern

Feb 7, 2019 / 3h 13m

3h 13m

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 Overview1m
  2. Structure of Full Stack Applications21m
  3. Configuring the Development Environment with Webpack and Babel17m
  4. Implementing React Components and Redux State51m
  5. Creating Persistent Data Storage with Node, Express, and MongoDB23m
  6. Integrating React View Layers with Persistent Data11m
  7. Authentication Concepts35m
  8. Deployment Concepts21m
  9. Conclusion10m

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

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 activating this benefit, you agree to abide by Pluralsight's terms of use and privacy policy.

I agree, activate benefit