React.js: Building Production Ready Apps, Start to Finish
4.3 (148 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,171 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React.js: Building Production Ready Apps, Start to Finish to your Wishlist.

Add to Wishlist

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

Professional web development using React and Reactive Extensions
4.3 (148 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,171 students enrolled
Last updated 11/2016
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 17.5 hours on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Have a basic understanding of how to navigate your platform's terminal or command line
Description

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 is the target audience?
  • 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 socket.io!
  • 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)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
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
13:03

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
16:42

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
13:34

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

State and Events: Part 1
20:30

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

State and Events: Part 2
06:29

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

Todos: Part 1 - Checkbox
10:21

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

Todos: Part 2 - Stateless Components
08:08

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
09:05

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

Todos: Part 4 - Events
08:27

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
18:08

Conclusion
02:53
+
Project: Asset Pipeline
19 Lectures 04:41:45
Introduction
02:21

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
17:41

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
16:32

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

Eslint Configuration
19:25

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

Eslint with Visual Studio Code
06:48

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
19:31

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
17:03

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

Watch and Run: Tests
19:15

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
15:18

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

Webpack: Installation
12:43

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

Webpack: Basic Configuration
18:43

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
16:12

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
15:03

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
12:37

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
09:39

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

Webpack: HMR 2 - Scripts
19:44

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
15:56

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

Debugging Node with Visual Studio Code
07:51

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
19:23
+
Project: Client
28 Lectures 06:30:43
Introduction
02:11

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
04:48

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
19:01

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

Global Page Styles
13:37

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
19:45

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

Text Input Component
13:40

We finish our lobby by implementing our chat box.

Lobby: Part 2 - Chat
18:31

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
10:36

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

Dispatcher: Part 1 - Tests
14:29

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

Dispatcher: Part 2 - Implementation
16:43

In this video we stub out our store classes.

Store Stubs
08:04

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
19:41

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
18:51

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
15:26

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
05:02

In this video we finish our login dialog.

Login Dialog
08:41

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.

Operations
19:54

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

Lobby: Part 3 - Operations
17:50

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
19:45

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
19:01

The first game component we implement is the game sidebar.

Game Sidebar
13:35

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

Game Component
10:32

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
18:01

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

Game Setup Styles
05:19

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
20:00

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

Card Component
14:04

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

Stacks Component
12:25

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
11:11
+
Project: Server
14 Lectures 03:26:09
Introduction
02:14

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

Architecture Overview
08:03

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

Diff: Part 1 - Tests
12:48

Our next diff function will handle diffing arrays.

Diff: Part 2 - Arrays
20:30

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

Diff: Part 3 - Objects
08:51

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

Merge
12:39

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

Card Database
17:18

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

Socket.io / Client / Application
19:31

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

App Store and Views
11:03

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

Lobby
19:21

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
19:06

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

Game Setup
20:45

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

Game Logic
17:29

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

Game State Machine and Conclusion
16:31
+
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
16:02

Conclusion
01:14
About the Instructor
3D BUZZ Programming and Digital Art training
4.5 Average rating
3,667 Reviews
60,796 Students
17 Courses

3D Buzz is a company dedicated to providing the world with quality technical education over 3D animation, programming, game design, and much more. We have been producing training videos since 2001, always pushing the envelope in the development of informative lessons with an engaging and personable format. We try to make the viewer feel more like they're involved in a classroom discussion with an energetic teacher as opposed to being stuck in a dry, uninspired, run-of-the-mill training video.

But 3D Buzz is so much more than just training videos. We maintain one of the most helpful online communities on the internet. We do our very best to keep in close contact with our community, and to make sure that when you're here, you feel at home.

Nelson LaQuet
4.6 Average rating
1,083 Reviews
5,521 Students
5 Courses
Software Developer

Nelson is a software developer with fluency and professional experience in C#, C++, HTML/CSS, JavaScript and PHP.

Since 2007 he has worked professionally as a web developer, game developer and app developer in a variety of different languages and platforms.

He began teaching programming in 2010 as an instructor for 3dbuzz.com. While at 3dbuzz, he developed training video series, hosted live training webinars, and became the lead programming instructor and administrator for the site.

His training style emphasizes deep understanding of the material and hands-on practice - with most of his training programs centered around the development of complete, real world applications.