React.js: Building Production Ready Apps, Start to Finish
4.4 (197 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,391 students enrolled

React.js: Building Production Ready Apps, Start to Finish

Professional web development using React and Reactive Extensions
4.4 (197 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,391 students enrolled
Last updated 11/2016
English [Auto]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 17.5 hours on-demand video
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the core concepts of React.js, and learn how to apply them to REAL web applications or games
  • Truly understand the benefits of a uni-directional, reactive, event based architecture and the related patterns
  • Build a production-quality build pipeline for our client, server, and test code with WebPack, Babel, Jasmine, and Gulp
Course content
Expand all 77 lectures 17:37:06
+ Introduction
3 lectures 33:53

This video shows a bird's eye view of how React fits into the architecture of a single page JavaScript application.

Preview 14:37

Here we see an overview of how React uses the shadow DOM to keep our physical DOM up to date.

Preview 12:29
+ React Primer
11 lectures 02:07:20
Setting Up

For our first bit of real-world React, we take a look at how we can interact with it to create shadow DOM elements and render them to the physical DOM.

Components and the Shadow DOM

Now we’re going to see how JSX can be used to create our shadow DOM, instead of having to rely in createElement.

Introduction to JSX

This video goes over what component state is and how we can properly handle events in our React applications.

State and Events: Part 1

We finish our counter application example by talking about how we can modify a component’s state.

State and Events: Part 2

We start our todo example by putting together a basic form that allows us to toggle a checkbox.

Todos: Part 1 - Checkbox

Next up we take a look at how we can create stateless components.

Todos: Part 2 - Stateless Components

One of the most important things to be able to do in React is to render lists of elements. In this video we go over how to do that.

Todos: Part 3 - Lists

Now we take a look at how we can handle events in React.

Todos: Part 4 - Events

We wrap up our todo application with a discussion of how to deal with forms and component lifecycle events.

Todos: Part 5 - Forms and Lifecycle
+ Project: Asset Pipeline
19 lectures 04:41:45

We kick off our project by creating some of the basic folders and files that will be needed to continue building our build system.

Folder Structure

Before we continue with configuring our project, we need to install and configure the core babel compiler as well as the babel plugins that we will be using in this course.

Babel Installation

With Babel installed and configured, we can move on to setting up eslint.

Eslint Configuration

With eslint configured properly, we then integrate it into our editor to provide instant feedback while we work.

Eslint with Visual Studio Code

Now we install gulp, and configure it to allow us to compile our server code. We also take a look at how we can use sourcemaps in node applications.

Build: Server

With our build step out of the way, we now implement our watch and run tasks for our server - allowing us to be able to have our server be restarted automatically on file changes.

Watch and Run: Server

This video shows a basic way that we can hook unit tests into our application using the jasmine testing framework.

Watch and Run: Tests

In this video we create a basic express app that servers out a templated view as well as our app’s favicon image.

HTTP Server

To speed up the next few videos, in this video we install all the necessary packages for webpack.

Webpack: Installation

Now we put together the configuration for our webpack client build.

Webpack: Basic Configuration

In this video we finish the production configuration, integrate the webpack compiler with our gulpfile, and include font awesome into our project.

Webpack: Production and Gulp Builds

Next up we implement our final gulp tasks, and integrate them into being able to launch an entire development environment with a single command. We also setup the webpack dev server to serve out our client code when in development.

Webpack: Dev Server

With our development server running, we next put together our configuration for hot module replacement; allowing us to hot-reload our styles without having to refresh the browser window.

Webpack: HMR 1 - Styles

Before we can take a look at hot-reloading our components, first we must install react and react-dom and take a look at how we will be using them in the context of our module loader.

Writing React Components

We finish our build pipeline with enabling hot module replacement for react components.

Webpack: HMR 2 - Scripts

We take a look at how we can debug our client code inside of both chrome and Visual Studio Code.

Debugging in Chrome and Visual Studio Code

Finally we see how we can debug node applications inside of Visual Studio Code with sourcemap support.

Debugging Node with Visual Studio Code

To conclude this section, we recap how to work with the project structure we created in this section. This video is for people who wish to use the bundled project structure starter pack instead of going through the set themselves.

Project Structure Overview
+ Project: Client
28 lectures 06:30:43

To start with, we install the rest of the NPM packages that we will be using in this course. We also switch from using babel-runtime to using babel-polyfill, as well as change a potentially annoying eslint rule.

Packages and Setup

The first thing we do is configure react-router to instantiate the proper top-level components for the two screens that we will have in this project (lobby and game).

React Router

Before we start implementing our components, we have to style our application’s base layout.

Global Page Styles

We kick off our implementation of the lobby component with our JSX markup and styles for our sidebar buttons as well as our game list

Lobby: Part 1 - Game List

Before finishing our lobby, we take a look at how we can use react to create reusable input controls.

Text Input Component

We finish our lobby by implementing our chat box.

Lobby: Part 2 - Chat

Before we start implementing our dispatcher, stores and actions, we look at a high level overview of how our client-side architecture will come together.

Architecture Overview

We start off our implementation of the dispatcher with unit tests that describe the API surface of our dispatcher.

Dispatcher: Part 1 - Tests

With our tests out of the way, we put together the implementation of the dispatcher.

Dispatcher: Part 2 - Implementation

In this video we stub out our store classes.

Store Stubs

To finish off our basic infrastructure for our action framework, we need a way to access our dispatcher and stores from within certain components in our application. In this video, we use React contexts to achieve that.

Container Base

Our first action and store observable will be for our implementation of a dialog subsystem. In this video, we implement the dialog action as well as the observable sequence for keeping track of them being open.

Dialogs: Part 1 - Action and Store

We finish our dialog subsystem by implementing the part where they become rendered, as well as the required styles to go along with it.

Dialogs: Part 2 - Rendering and Styles

Before we start our login dialog, we implement a way to show us our actions as they get dispatched for debugging reasons.

Print Action Utility

In this video we finish our login dialog.

Login Dialog

One of the most important things we deal with is managing our operations, such as logging in or selecting a card. In this video we put together the code that will handle operations for us mostly automatically.


We finish up most of the lobby by integrating it with our dispatched operations.

Lobby: Part 3 - Operations

In this video we hook up our router to our action dispatcher so that we can properly navigate between the lobby and the game components.

Hooking up our Router

Before we start writing our game components, we first implement a basic dummy store for our game so that we have some data to work with.

Game Store

The first game component we implement is the game sidebar.

Game Sidebar

In this video we create our main game component that wraps our game setup and game board sub-components.

Game Component

In this video we build the component, markup, and interaction logic of our game setup component - which is used to set game options.

Game Setup Component

We wrap up our game setup component by implementing the styles for the markup we’re generating.

Game Setup Styles

In this video we stub out all of the rest of the components we need to finish the client. In addition, we wire them all up to the game board component.

Game Board

The first sub component we implement is our card component, which will be used frequently on our game board.

Card Component

The next component we implement is our stacks, which are used to display the currently played cards in the game.

Stacks Component

Our final component is our player hand. In this video, we wrap up all of the rest of our React code that we will be writing in this course.

Player Hand
+ Project: Server
14 lectures 03:26:09

This video goes over the high level architecture of our server code.

Architecture Overview

We start off our implementation of the diff function with a basic test harness.

Diff: Part 1 - Tests

Our next diff function will handle diffing arrays.

Diff: Part 2 - Arrays

We finish our simple diff function with being able to handle objects.

Diff: Part 3 - Objects

Next up we implement our merge function that accepts diffs in the form of those generated by the makeDiff function.


In this video we load up our cards into a special data structure.

Card Database

Our first “room” that we implement is the application. In this video, we also create our client class and hook it into so that the server can now send actions directly to the clients. / Client / Application

This video completes the app store, by integrating it into the SET_VIEW action as well as connection events.

App Store and Views

Next up we implement the server-side code for our lobby, and see how we will be handling events from the client.


Now we stub out a few of the classes we’ll need for our game implementation and finish our implementation of the lobby.

Game Stub

The first game handlers that we implement are for setting game options and sending messages.

Game Setup

Next up we implement many of the core bits of the game logic.

Game Logic

The final bit of server code we have to write is the state machine for the game!

Game State Machine and Conclusion
+ Deployment and Conclusion
2 lectures 17:16

In this video we wrap up the project with showing how to deploy our application to Heroku, as well as demonstrating some of the potential issues that may come up.

Deploying to Heroku
  • Have a basic understanding of how to navigate your platform's terminal or command line

This course is a complete view into building production ready applications using React and Reactive Extensions!

React is a view library created by Facebook that has taken the JavaScript community by storm over the last few years. It's largely responsible for a paradigm shift in web development, emphasizing the creation of reusable, modular components that are easy to understand and manipulate. Used properly, React can eliminate most, if not all, of the error-prone, long-winded, DOM manipulation code you may have had to write in the past!

Reactive Extensions (RXJS) is a library that allows us to write reactive code in JavaScript. As you'll see in this course, RXJS and React go hand in hand to provide a complete, modern, easy to understand architecture for our applications. While we use RXJS in lieu of Redux or Flux, inspiration from both are heavily borrowed; so you will leave this course with a leg up in understanding the core principles of those patterns as well!

This series is a project-based look at using all of the technologies that are becoming commonplace in the web development world. We use Gulp, WebPack, Babel, SASS, and Jasmine to put together a real-world asset pipeline that will support the development and deployment of our application.

This course has four main sections:

  • React Primer: we start with an introduction to React terminology and syntax by putting together a few simple applications.
  • Asset Pipeline: next, we begin our main project in this course by wiring together Gulp, WebPack, Babel and SASS in order to create an asset pipeline that is necessary to support a React application.
  • Project Clientthe "meat" of this course; in this section we build all of our client-side code, and use RXJS and React to establish the architecture that will support our project.
  • Project Server: the final main section will focus on the creation of a socket-io server that will provide all of the server-side logic of our application.

Finally, at the end of this course, we will deploy our application to a free Heroku hosting account!

The goal of this course is simple: to be a start to finish, end to end, complete look at how we can architect an application properly using modern patterns and techniques while taking advantage of the React library!

Who this course is for:
  • This course is NOT an introduction to JavaScript
  • You MUST understand JavaScript syntax
  • Familiarity with the language features of ES2015 is a plus, but not required (you'll get plenty of practice!)
  • This course is for people who want to learn how to use React.js to create production-ready applications and games
  • This course is ESPECIALLY for people who want to build reactive, real-time applications in JavaScript, using React, ReactiveExtensions, and!
  • To get the most out of this course, it is HIGHLY recommended that you follow along with implementing the project during the course (source code is provided if you get stuck)