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.js: Getting Started

by Samer Buna

Jun 13, 2015 / 1h 43m

1h 43m

Start Course
Description

This course covers the basics of React.js and prepares the student to start developing web applications with the library. React.js is a an open-source JavaScript library for creating user interfaces with a focus on the UI that's abstracted from the DOM, and a one-way reactive data flow. The course will explain using an example web application how to use React.js. The application will be a simple in-browser, math skills kids' game.

Table of contents
  1. Course Overview1m
  2. Introduction29m
  3. Working with Data22m
  4. Building the Game Interface13m
  5. Numbers Selection14m
  6. Game State22m

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.

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

by Cory House

May 20, 2016 / 6h 13m

6h 13m

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. In Building Applications with React and Redux in ES6, you will learn how to use Redux, React Router, and ES6 to build powerful and fast React applications from the ground up, as well as use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme. Finally, you will create a rapid feedback development environment that runs linting and tests, transpiles ES6 to ES5, starts up Express as a webserver, opens the application, and hot reloads changes every time you hit save and deploys with a single command. When you're finished with this course, you will have a foundational knowledge of React and Redux in ES6 that will help you as you move forward building robust, scalable React applications using a custom, rapid feedback development environment.

Table of contents
  1. Course Overview1m
  2. Intro10m
  3. Environment Setup46m
  4. React Component Approaches16m
  5. Initial App Structure18m
  6. Intro to Redux12m
  7. Actions, Stores, and Reducers19m
  8. Connecting React to Redux17m
  9. Redux Flow51m
  10. Async in Redux26m
  11. Async Writes in Redux43m
  12. Async Status and Error Handling25m
  13. Testing React26m
  14. Testing Redux37m
  15. Production Builds19m

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

1h 29m

Start Course
Description

React has changed the way that people think about writing UIs. It has encouraged a community where ideas about how to style UIs have changed as well. There are now several compelling options for how to style your React components. Some are more traditional, some are more progressive. You'll be excited at the options available to you. Try a few out, and it could change the way you approach your next project.

Table of contents
  1. Course Overview1m
  2. UIs in React7m
  3. Inline Styles24m
  4. Radium13m
  5. A Webpack Intro for CSS8m
  6. CSS Stylesheet13m
  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

Aug 17, 2015 / 3h 24m

3h 24m

Start Course
Description

In this course, we'll build a full-featured web application which emphasizes lighting-fast load times and live updates. We'll learn how to use React.js to build a front-end web application, and use Browserify and Gulp to load the app isomorphically in Node.js. We'll also learn how to implement Express for handling HTTP requests, and how to integrate Mongoose with Express for fast and expressive long-term data storage.

Table of contents
  1. Introduction30m
  2. Scaffolding the App43m
  3. Creating a React Front-End43m
  4. Completing the Front End19m
  5. Implementing an Express Back End21m
  6. Adding MongoDB28m
  7. Making the App Isomorphic17m

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

Register for FREE. Get your Pluralsight IQ.

You’ll get unlimited access to adaptive skill assessments that help you validate your skills in as little as 5 minutes, and you'll get to see the Pluralsight platform first-hand.