LEARNING PATH: Web Development with React, Node, and Redux
3.2 (3 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.
7 students enrolled

LEARNING PATH: Web Development with React, Node, and Redux

Create stunning React applications combining Bootstrap with Node and Redux
3.2 (3 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.
7 students enrolled
Created by Packt Publishing
Last updated 3/2018
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 downloadable resource
  • 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
  • Get to know Redux architecture with React and Node .js
  • Learn to integrate Bootstrap's nav component and third-party APIs such as facebook
  • Understand how to create small applications using Bootstrap and React npm modules
  • Explore the concepts of Universal JavaScript and develop applications using them
  • Learn Redux data flow and its integration with React
  • Understand how to run React and Redux applications on the server
  • Develop isomorphic applications with React and Redux
  • Get familiar with different application platforms for building production-ready universal React applications
Course content
Expand all 42 lectures 03:15:55
+ Learning React Application Development with Redux and Node.JS
15 lectures 01:07:36

This video gives an overview of the entire course.

Preview 02:27

As we know, in Single Page Applications (SPAs) when we have to contract with state and time, its difficult to handgrip state over time. Let’s see how redux helps us solve this problem.

What Is Redux?
05:24

Redux is inspired by the Flux pattern, so it also follows its architecture. That means state changes will be sent to the store and the store will handle actions to communicate between components. This video shows us the redux architecture in detail.

Architecture of Redux
01:38

We have seen that Redux's architecture is very powerful and it has reusability as well. Let's look at a practical example to see how Redux works with React. In this video, we will create our Add Ticket form application in Redux.

Redux Setup
07:52

We have learned about the Redux architecture and how we can handle the two states, the data state and the UI state, to create single page applications or components. Let's look at some of the advantages of the React router.

Preview 01:56

The React router has been packaged as a different module outside the React library. Let’s explore in this video how to install and setup application.

Installing the Router and Application Setup
02:00

As we've already created HTML, now we need to add a Bootstrap navbar component in bootstrap-navbar.js that we created earlier. This video will guide us in configuring the routing.

Creating Routes
01:10

Suppose if we need a different layout for every component, such as the home page, with two columns, and other pages should with column, and they both share common assets such as headers and footers. Let’s see how we can do we create this kind of layout.

Page Layout
01:28

We are done with creating layout-specific components, but we still need to look at how we can create nested routes for them so that the components are passed into parents with props.

Nested Routes
06:39

When we are talking about the React API, it's the first step to getting into the React library. Different uses of React will provide different outputs. Let’s take a look at the React Top-level API.

React API Component
02:45

A declared variable gets overridden if we declare it again beneath its declaration, the same way as ReactDOM.render overrides its declared properties. This video shows how we can have a custom wrapper in an API.

Object-Oriented Programming
01:34

React integration is nothing but converting a web component to a React component using JSX, Redux, and other React methods. Let's see a practical example of React integration with another API.

React Integration with Other APIs
13:20

We need to create a package.json file for our project, which includes the project information and dependencies of the npm modules. npm is very useful for JavaScript developers to create and share reusable code to build an application and solve particular problems while developing it.

Installing npm
06:00

Let’s include and modularize our Bootstrap application that we have developed so far. In the application, we will see a static user profile raising helpdesk tickets online and rendering React components server-side.

A Responsive Bootstrap Application with React and Node
10:30

React provides the tools for developers to debug React code. It allows us to inspect a Reactrendered component with the component hierarchy, props, and state.

React Developer Tools
02:53
Test Your Knowledge
5 questions
+ Universal JavaScript with React, Node, and Redux
27 lectures 02:08:19

This video provides an overview of the entire course.

Preview 02:27

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.

Defining Universal JavaScript
03:16

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.

Why Universal JavaScript?
04:56

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.

Different Categories of Universal JavaScript
04:34

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.

Using Abstractions
05:06

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.

Sharing Views, Routes and Models
02:33

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. 

Preview 06:18

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.

Installing Prerequisites
04:31

In this video, we are going to setup Babel for compiling ES6 and JSX files and use webpack to build our client bundle.

Configuring Babel and Webpack
04:15

In this video, we are going create a basic “hello world” React app, run the build and run our application. 

Building and Running
03:19

In this video, we are going to take a look at a simple “Hello World” example and discuss React’s virtual DOM.

Pure React
04:04

In this video, we will be using JSX to build react components.

React in JSX
03:03

In this video, we will be using ReactDOM to render our react components.

ReactDOM
01:44

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.

Passing Properties
04:32

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.

React Router
04:21

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.

Redux Basics: Actions, Reducers, and Store
10:14

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.

React-Redux
06:01

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.

Redux and React Router
02:59

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.

ReactDomServer
05:08

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: Handling the Request
02:00

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.

Server : Generating Initial State
08:08

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 : Hydrating and Rendering
02:55

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.

Client: Page Transitions
03:50

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

electrode.io
06:37

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

mern.io
07:04

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

react-server.io
09:40

In this video, we are going to look at what next.js provides for building a sample application using next.js

next.js
04:44
Test Your Knowledge
5 questions
Requirements
  • Basic knowledge of HTML, CSS, and JavaScript is required
  • Prior knowledge on Node .js, React, and Redux will be beneficial
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. So, if you're a developer who is looking forward to build upon your existing JavaScript skills by developing isomorphic applications, then go for this Learning Path.

Packt’s Video Learning Path is a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

The highlights of this Learning Path are:

  • Create efficient object interaction patterns for faster and more efficient app development
  • Achieve faster perceived page load times with React rendering on the server

Let's take a quick look at your learning journey. This Learning Path starts off with explaining the Redux architecture and setting up Redux. You will then learn routing with React wherein you will create routes and nested routes. You will also get to know  React API components and will learn to integrate it with other APIs.

Next, you will build a responsive Bootstrap application with React and Node. You will learn the concepts of universal JavaScript such as sharing views, routes, and models. You will then learn to set up an isomorphic application development environment for developing isomorphic applications. You will also understand the benefits of using JSX.

Moving ahead, you will learn the basics of Redux such as actions, reducers, and store. Next, you will learn how to handle the server-side request for React and Redux applications and how to hydrate and render applications on the client-side. Finally, you will explore application platforms for building production-ready universal React applications such as electrode .io, mern .io, react-server .io, and next .js.

By the end of this Learning Path, you will be able to build isomorphic applications that are much faster and more SEO-friendly.

Meet Your Experts:

We have the best works of the following esteemed authors to ensure that your learning journey is smooth:

Harmeet Singh is a senior UI developer working for CIGNEX Datamatics with varied experience in UI. His expertise includes HTML5, JavaScript, jQuery, Angular JS, and Node .js. He has given various presentations and conducted many workshops on UI development. On the academic front, Harmeet is a graduate in IT, and is a GNIIT diploma holder from NIIT, specializing in software engineering.        

Mehul Bhatt has over 11 years of experience and serves as a user experience and user interface practice manager at CIGNEX Datamatics. As a manager, he handles a wide range of onshore and offshore teams. His expertise includes HTML5, CSS3, JavaScript, jQuery, application development, guiding and mentoring developers, and more—all to help clients take their business to the next level in the open market. He has also won many awards for his excellence. He is Microsoft-certified in HTML, CSS, and JavaScript.

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. He is co-author of the O'Reilly Media book entitled Building Isomorphic JavaScript Apps. He is currently a senior software architect focused on designing and implementing new systems and frameworks for the Walmart eCommerce team.

Who this course is for:
  • This Learning Path is for developers who are looking to build upon their existing JavaScript skills by developing isomorphic applications.