Paths

React

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

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.

1

React: The Big Picture

by Cory House

Nov 21, 2017 / 1h 11m

Beginner • 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 Overview
    1m 26s
  2. Why React?
    25m 55s
  3. Tradeoffs
    23m 32s
  4. Why Not React?
    20m 36s
2

React.js: Getting Started

by Samer Buna

Jun 13, 2015 / 1h 43m

Beginner • 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 Overview
    1m 38s
  2. Introduction
    29m 44s
  3. Working with Data
    22m 8s
  4. Building the Game Interface
    13m 38s
  5. Numbers Selection
    14m 9s
  6. Game State
    22m 28s
3

React Fundamentals

by Liam McLennan

Mar 19, 2014 / 2h 44m

Intermediate • 2h 44m

Start Course
Description

This course covers the features offered by React and explains their advantages and disadvantages relative to the other popular options available. Important topics include: React's one-way reactive data flow, the virtual DOM, and JSX syntax for describing markup.

Table of contents
  1. Introducing React
    17m 15s
  2. Components
    45m 51s
  3. JSX
    44m 19s
  4. Events
    20m
  5. Forms
    36m 42s

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.

4

Building Applications with React and Flux

by Cory House

Aug 12, 2015 / 5h 8m

Intermediate • 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. Intro
    21m 15s
  2. Environment Setup
    37m 20s
  3. React Core Concepts
    21m 14s
  4. React: Creating Components Introduction
    24m 13s
  5. React Lifecycle
    18m 45s
  6. React Composition
    15m 35s
  7. React Router
    38m 43s
  8. React Forms
    53m 6s
  9. Flux
    23m 28s
  10. Flux Demos
    54m 24s
5

Building Applications with React and Redux in ES6

by Cory House

May 20, 2016 / 6h 13m

Intermediate • 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 Overview
    1m 36s
  2. Intro
    10m 13s
  3. Environment Setup
    46m 53s
  4. React Component Approaches
    16m 7s
  5. Initial App Structure
    18m 41s
  6. Intro to Redux
    12m 41s
  7. Actions, Stores, and Reducers
    19m 18s
  8. Connecting React to Redux
    17m 38s
  9. Redux Flow
    51m 4s
  10. Async in Redux
    26m 37s
  11. Async Writes in Redux
    43m 41s
  12. Async Status and Error Handling
    25m 28s
  13. Testing React
    26m 25s
  14. Testing Redux
    37m 33s
  15. Production Builds
    19m 48s
6

Building Scalable React Apps

by Hendrik Swanepoel

Oct 27, 2016 / 3h 48m

Intermediate • 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 Overview
    1m 25s
  2. Getting Started
    23m 44s
  3. An Introduction to Building Components with react-boilerplate
    12m 43s
  4. Loading Data from the Server with Redux-saga
    19m 31s
  5. Handling Events with Redux-saga
    22m 17s
  6. Styling Your Components with CSS
    32m 4s
  7. Adding Routes to your Application
    25m 43s
  8. Building Forms to Gather User Input
    36m 10s
  9. Achieving Component Reuse
    19m 30s
  10. Tackling a Realistically Complex Feature with Your New Skills
    35m 44s
7

Styling React Components

by Jake Trent

Jan 5, 2016 / 1h 29m

Intermediate • 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 Overview
    1m 29s
  2. UIs in React
    7m 37s
  3. Inline Styles
    24m 38s
  4. Radium
    13m 13s
  5. A Webpack Intro for CSS
    8m 29s
  6. CSS Stylesheet
    13m 37s
  7. CSS Modules
    20m 26s

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.

8

Advanced React.js

by Samer Buna

Jul 21, 2017 / 3h 54m

Advanced • 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 Overview
    1m 25s
  2. Introduction
    5m 9s
  3. Full-stack JavaScript with React.js
    59m 48s
  4. Working with an Asynchronous API
    33m 49s
  5. The Context API and Higher Order Components
    27m 30s
  6. Subscribing to State
    42m 32s
  7. Performance Optimization
    40m 46s
  8. Production Deployment Best Practices
    23m 55s
9

Testing React Applications with Jest

by Daniel Stern

May 11, 2018 / 3h 36m

Intermediate • 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
    1m 43s
  2. Course Introduction
    14m 40s
  3. Understanding Testing
    22m 24s
  4. Introduction to Jest
    24m 31s
  5. Test Running with Jest
    37m 29s
  6. Mocking Functions and Modules
    24m 53s
  7. Snapshot Testing
    23m 56s
  8. Testing Components
    43m 58s
  9. Advanced Jest Matchers
    17m 31s
  10. Conclusion
    5m 9s
10

Building a Full-Stack App with React and Express

by Daniel Stern

Aug 17, 2015 / 3h 24m

Advanced • 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. Introduction
    30m 40s
  2. Scaffolding the App
    43m 19s
  3. Creating a React Front-End
    43m 47s
  4. Completing the Front End
    19m 19s
  5. Implementing an Express Back End
    21m 58s
  6. Adding MongoDB
    28m 3s
  7. Making the App Isomorphic
    17m 45s

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.

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