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.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 57s

Working with Data

22m 8s

Building the Game Interface

13m 38s

Numbers Selection

14m 9s

Game State

22m 33s

2

React Fundamentals

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

Introducing React

17m 15s

Components

45m 51s

JSX

44m 19s

Events

20m

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.

3

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 31s

4

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

20m 2s

5

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

6

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.

7

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

8

Mastering React Testing with Jest

Description

Testing web applications is one of the most important parts of the development process and Jest, the testing framework from the makers of React, is one of the newest and most powerful tools for doing so. In this course, we'll fully implement a suite Jest tests. The course will begin with a detailed overview of the Jest API and several hands on examples demonstrating how it works. Following that, we'll put together a full React application and then test a variety of its components using Jest and React Test Tools. Successful students of this course will be able to understand and apply the concepts of dependency mocking, testing Node modules, and testing asynchronous functionality.

Table of contents

Course Overview

1m 27s

Introduction to Testing React Applications with Jest

22m 32s

An In-depth Look at the Jest API

16m 17s

Scaffolding the App

17m 4s

Implementing Basic Tests for a React Application with Jest

20m 18s

Advanced React Testing with Jest

33m 5s

Conclusion to React Testing with Jest

6m 48s

9

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.