Universal JavaScript with React, Node, and Redux

Leverage the power of React, Redux and Node to build complete web applications in pure JavaScript

Created byPackt Publishing

Last updated 9/2017

English

English [Auto],

What you'll learn

Concepts of Universal JavaScript and its application
Fundamentals of technologies for Universal JavaScript developer.
Foundation react features and frameworks.
Redux data flow and integration with React.
Running react and Redux on the server
Application platforms for building production ready universal React apps

Course content

6 sections • 27 lectures • 2h 8m total length

The Course Overview2:27
This video provides an overview of the entire course.
Defining Universal JavaScript3:16
In this video, we are going to take a look at the evolution in modern web development, highlighting the JavaScript engine in modern browsers and on the server and defining universal JavaScript.
Why Universal JavaScript?4:56
In this video, we will understand the benefits of universal JavaScript and why we would bother with sharing code between the server and the browser. We will also take a look at the advantages of universal JavaScript, and explore the operational as well as functional quality improvements of using universal JavaScript.
Different Categories of Universal JavaScript4:34
In this video, we are going to take a look at two different categories of universal JavaScript code. We’ll look at the simple case of environment-agnostic code and running that to the browser and server. We’ll also look at the more complex category of environment-specific JavaScript code that requires us to do some legwork before reusing the code on the browser or server.
Using Abstractions5:06
In this video, we will dive deeper into building abstractions to better share code between the browser and server. We will create two abstractions that are frequently needed by universal JavaScript applications: 1) Getting and setting cookies and 2) Redirecting requests. These abstractions provide a consistent API across the client and server by encapsulating environment-specific implementation details.
Sharing Views, Routes and Models2:33
In this video, we are going to take a look at the library stack we will be using in the rest of the video course and how we plan on utilizing these libraries to share views, routes and models.

Node.js and NPM6:18
In this video, we are going to take a look at Node.js and how to install it. We will build a simple HTTP server and look more in depth into NPM.
Installing Prerequisites4:31
In this video, we are going to take a look at installing our node modules dependencies by creating a package.json to make our builds reproducible.
Configuring Babel and Webpack4:15
In this video, we are going to setup Babel for compiling ES6 and JSX files and use webpack to build our client bundle.
Building and Running3:19
In this video, we are going create a basic “hello world” React app, run the buil

Pure React4:04
In this video, we are going to take a look at a simple “Hello World” example and discuss React’s virtual DOM.
React in JSX3:03
In this video, we will be using JSX to build react components.
ReactDOM1:44
In this video, we will be using ReactDOM to render our react components.
Passing Properties4:32
In this video, we are going to take a look at specifying properties in an React component, transferring properties down the component hierarchy and finally looking at the spread operator to elegantly transfer properties across multiple layers of components.
React Router4:21
In this video, we are going to discuss routing in general in a single page application. We will also look at react-router, install it and use it in a simple example app.

Redux Basics: Actions, Reducers, and Store10:14
In this video, we are going to take a look at state management in a modern single page application, discuss the basic flow in Redux and look at actions, reducers, and state in Redux.
React-Redux6:01
In this video, we are going to take a look at the concepts of presentational and container components in React, hooking up react components to Redux and making the Redux store available to our react components.
Redux and React Router2:59
In this video, we are going to take a look at connecting React router with a Redux app and reading from the URL to determine the state of the application.

ReactDomServer5:08
In this video, we are going to review the data flow for server-side rendering in an React and Redux application and use the ReactDOMServer class to render react components on the server.
Server: Handling the Request2:00
In this video, we are going to set up the express middleware and using the react-router on the server to match the requested URL.
Server : Generating Initial State8:08
In this video, we are going to run Redux on the server, dispatching asynchronous action to fetch the initial data and pulling the state out of store and pass the state along to the client.
Client : Hydrating and Rendering2:55
In this video, we are going to look at initializing the Redux store with the pre-fetched server state and connecting our client React instance to the virtual DOM used on the server.
Client: Page Transitions3:50
In this video, we are going to take a look at the data flow of a universal web application and demonstrate the client page transitions.

electrode.io6:37
In this video, we are going to take a look at why universal application platforms are needed, what electrode can help with and sample application using electrode.io
mern.io7:04
In this video, we are going to introduce the MERN stack, What mern.io can help with and building a sample application using mern.io
react-server.io9:40
In this video, we are going to be introduced to Facebook's big pipe. We will also build a sample application using react-server.io
next.js4:44
In this video, we are going to look at what next.js provides for building a sample application using next.js

Requirements

This course has the following software requirements:
An editor like Atom, Sublime Text or Visual Studio Code
NodeJS - Version 6_10 XX LTS
React - Version 15.4
Redux - Version 3.6

Description

The latest trend in web development, Isomorphic JavaScript, allows developers to overcome some of the shortcomings of single page applications by running the same code on the server as well as on the client. Leading this trend is React, which when coupled with Node, allows developers to build JavaScript apps that are much faster and more SEO-friendly than single page applications.

Universal JavaScript is the latest evolution in modern web development. It allows developers to overcome some of the shortcomings of single page applications by running the application code interchangeably on the server as well as on the client. This beginner friendly video course is a solid start for building real, production ready universal React apps.

The video will Takes you from a beginner to working with node.js and React on the server and the client. It covers the fundamentals of the full set of technologies that you need to know in order to become an Universal JavaScript developer. Teaches you the skills required to become competent and comfortable sharing your JavaScript application on the client and sever environments.

About the Author :

Maxime Najim is a software architect and full stack web developer. He has been building web applications for over a decade and has worked on software engineering teams at Netflix, Apple, and Yahoo! Maxime is co-author of the O'Reilly Media book entitled "Building Isomorphic JavaScript Apps". He is currently a Sr. Software Architect focused on designing and implementing new systems and frameworks for the Walmart eCommerce team.

Who this course is for:

A good working knowledge of JavaScript and the JavaScript ecosystem.
Some experience building Single Page Applications with a modern front-end framework.

Universal JavaScript with React, Node, and Redux

What you'll learn

Explore related topics

Course content

Concepts of Universal JavaScripts6 lectures • 23min

Setting Up an Isomorphic App Development Environment4 lectures • 18min

React.js and JSX5 lectures • 18min

Redux Data Flow3 lectures • 19min

React and Redux on the Server5 lectures • 22min

Application Platforms for Universal React4 lectures • 28min

Requirements

Description

Who this course is for: