Paths

React

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 major sites including on Facebook, Netflix, and Khan Academy. You’ll love the flexibility of using React with your favorite web technologies (except for jQuery!), and this path will take you from the fundamentals all the way up to building full apps with custom styling. ... Read moreRead less

Related topics

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

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

Course Overview

1m 26s

Why React?

25m 55s

Tradeoffs

23m 32s

Why Not React?

20m 36s

2

React.js: Getting Started

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

Course Overview

1m 38s

Introduction

29m 44s

Working with Data

22m 8s

Building the Game Interface

13m 38s

Numbers Selection

14m 9s

Game State

22m 28s

3

React Fundamentals

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

Course Overview

1m 18s

Introducing React

21m 30s

Components

37m 1s

JSX

35m 29s

Events

31m 39s

Forms

59m 48s

State

1h 6m 13s

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

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

Intro

21m 15s

Environment Setup

37m 20s

React Core Concepts

21m 14s

React: Creating Components Introduction

24m 13s

React Lifecycle

18m 45s

React Composition

15m 35s

React Router

38m 43s

React Forms

53m 6s

Flux

23m 28s

Flux Demos

54m 24s

5

Building Applications with React and Redux in ES6

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

Course Overview

1m 36s

Intro

10m 13s

Environment Setup

46m 53s

React Component Approaches

16m 7s

Initial App Structure

18m 41s

Intro to Redux

12m 41s

Actions, Stores, and Reducers

19m 18s

Connecting React to Redux

17m 38s

Redux Flow

51m 4s

Async in Redux

26m 37s

Async Writes in Redux

43m 41s

Async Status and Error Handling

25m 28s

Testing React

26m 25s

Testing Redux

37m 33s

Production Builds

19m 48s

6

Building Scalable React Apps

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

Course Overview

1m 25s

Getting Started

23m 44s

An Introduction to Building Components with react-boilerplate

12m 43s

Loading Data from the Server with Redux-saga

19m 31s

Handling Events with Redux-saga

22m 17s

Styling Your Components with CSS

32m 4s

Adding Routes to your Application

25m 43s

Building Forms to Gather User Input

36m 10s

Achieving Component Reuse

19m 30s

Tackling a Realistically Complex Feature with Your New Skills

35m 44s

7

Styling React Components

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

Course Overview

1m 29s

UIs in React

7m 37s

Inline Styles

24m 38s

Radium

13m 13s

A Webpack Intro for CSS

8m 29s

CSS Stylesheet

13m 37s

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

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

Course Overview

1m 25s

Introduction

5m 9s

Full-stack JavaScript with React.js

59m 48s

Working with an Asynchronous API

33m 49s

The Context API and Higher Order Components

27m 30s

Subscribing to State

42m 32s

Performance Optimization

40m 46s

Production Deployment Best Practices

23m 55s

9

Testing React Applications with Jest

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

Course Overview

1m 43s

Course Introduction

14m 40s

Understanding Testing

22m 24s

Introduction to Jest

24m 31s

Test Running with Jest

37m 29s

Mocking Functions and Modules

24m 53s

Snapshot Testing

23m 56s

Testing Components

43m 58s

Advanced Jest Matchers

17m 31s

Conclusion

5m 9s

10

Building a Full-Stack App with React and Express

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

Introduction

30m 40s

Scaffolding the App

43m 19s

Creating a React Front-End

43m 47s

Completing the Front End

19m 19s

Implementing an Express Back End

21m 58s

Adding MongoDB

28m 3s

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.

Batch Offer Codes

Be sure to only enter offer codes separated by line breaks and does not include commas.