Learning Path: High-Performance React With Redux

Before we can start building our React components, we need to set up and configure out environment. Let's do just that in this video.

• Set up npm and node.js
• Integrate webpack to understand what it is
• Get webpack running

In this video, you will learn the basics of setting up the webpack development server.

• Continue configuration with webpack
• Include the webpack development server
• Enable hot refreshing

For the remainder of our course, we will be developing and exploring ES2016. For us to gain access to it, we will configure Babel 6 into our webpack. Once we set things up, we can develop freely in ES6 as it will automatically be transcribed into ES5. In this video, you will learn a few new ES6 Features as well—default function variables and template strings.

• Enable ES6 to run on our server
• Work with npm, webpack, and Babel to run ES6

JSX enables us to easily integrate XML style coding into our programming. In this video, we will configure Babel with webpack to enable us to code in JSX directly in our code. We will take a peek into the basics of JSX as well as use React for the first time.

• Install JSX support in Babel
• Take a look at the basics of JSX

In this video, we will create our first React component class using the new ES6 features.

• Build an ES6 class
• Build a component using JSX

At the heart of React is the capability to reuse components. To do that, we need to extract common component behaviors into separate classes. In this case, we will be extracting a portfolio item and using it to create items.

• Understand what components are
• Learn how to create and use components
• Explore ES6

React JSX components accept properties just like regular HTML properties do (limited to reserved JavaScript keywords such as class). In this video, you will learn how to work with React component properties to create dynamic component output.

• Get introduced to properties and states
• Use JSX properties and understand how they work
• Understand what a property is

Things are getting dynamic but not enough for it to be useful in a really world dynamic component. For us to take advantage of the React dynamic nature, we need to extract data and send it in dynamically into our component. That's exactly what we will do in this video as we explore object deconstructing, importing, and exporting in ES6.

• Understand how components can have children
• Learn importing and exporting classes in ES6
• Learn object destructuring in ES6

So far, every single component we created would never change once it was created, but that is about to change (pun indented). In this video, you will learn how to create a constructor in ES6, integrate callbacks into our component, and bind their callback functions to our object using the bind method.

• Know the difference between properties and states
• Learn how to announce states
• Know how to use states in React

In this last video of this section, we will walk through all the things we did to our components throughout this section as we explore the way arrow functions work.

• Know the main benefits of React
• Understand what the virtual DOM is
• Learn how to work with arrow functions

Now that we know how to create components, it's time for us to focus on building our sections in our site.

• Segregate the three sections of our site into three components

Now that we extracted all of our section components, it's clear that all of our sections share a lot of commonalities. Usually, in JavaScript we would create an inheritance from where each component would inherent, but a better way is to use composition as it's more visually clear and enables us to mix multiple classes to help us compose the unique features of each component instead of overriding them (much harder to visualize).

• Understand why to use composition instead of inheritance
• Update sections in our application
• Use composition in React

In this video, we will shift our attention to model data and how we can use it to render our components using React.

• Create dynamic children in your components
• Explore the for-of loop in ES6

Let's take a break from talking about components to introduce const and let, and understand how they work in relation to exporting data from modules.

• Work with the var function scope
• Understand the working of the let and const scopes
• See var, let, and const in action

Although not that many things changed in strings (compared to string templates) in ES6, in this video, we explore them as we create the header component.

• Edit our header file
• Know what's new in ES6 strings
• Watch the changes live in action

Debugging is probably the most important aspect of web development even when it comes to building React applications. In this video, in the process of creating our JSX we will be on the hunt for bugs and show you how to deal with JSX errors.

• Validate your JSX
• Understand error handling in React

One of the best ways to plan out your application is to reverse engineer it the way we were doing in the previous few videos. In this video, we continue planning out the data structure of our component as we extract our model from the view.

• Understand MVC in terms of React
• Extract the model from the view

One of the new cool features available in JSX and ES6 is their spread feature—really great stuff. In this video, you will learn how to work with them in ES6 and JSX to speed up our application development.

• Know what spread is
• Learn how to use spread in JSX
• Learn how to use spread in ES6

To make reusable components it's important for us to give valuable feedback to the users of the component. We will see how to do that in this video.

• Validate the data types that are being sent into our React component
• Understand how to validate data in the development mode
• See how React can be used to give feedback to developers without breaking things for real-world users

For a component to be reusable, it can't have content that is baked into it as that would force developers to go into the component and change things around. Instead, we want to separate and make things as dynamic as we can.

• Reverse engineer the footer of our site to be dynamic
• Make your code more reusable

There are a few more things we wanted to cover when it comes to reusability and this video is dedicated for that.

• Explore the default values
• Know about validation of single child components
• Know about the importance of validation in general and combine that with our default values

React is a perfect language for creating agnostic JavaScript that doesn't know whether it's rendering on the client or the server. To facilitate this thought process, we are going to revisit our client JavaScript file and extract anything that isn't directly related to the client out of it. While we won't go all the way to implement our code on different environments, the setup we are doing will make our JavaScript more reusable in different environments.

• Prepare the environment to be Idiomatic
• Make your JavaScript more reusable

It's time to create our navigation, the last major component we need for our site to operate. In this video, we will implement our navigation component as we practice many of the things we learnt throughout this title.

• Chalk out a plan to figure out how our navigation should work
• Create the first navigation element

React doesn't like the idea of bubbling events, instead, it prefers that you manually send them around. In this video, we will show you how that is done and implement it on our navigation to update our application that something has changed.

• Know about event bubbling
• Explore event bubbling with the use of properties and callbacks

So far, we created a strict separation between our model and our view, but for our application to be completely dynamic we need to, at some point, have our view and model meet. We decided to do that inside our client file enabling us to control which view will go together with which model in a client view.

• Create the business logic area
• Feed the data and views that are to be used into the component

ES6 introduces maps, and as we are getting close to the end of this title I figured we should use them at least once. Our footer is lost; it's time to bring it back. In this video, we will have a map to the rescue, to reintroduce our footer into our application.

• Get up and close with the Map API
• Use Map API for data structuring and SPA set up

With the help of the new Map API, we will make our menu even more dynamic. By the end of this video, our data will dynamically create a menu.

• Make our menu dynamic using location.hash
• Connect all the things we learned throughout the title to create the single page application

As a React.js developer, in this first video, we will be building our application setup using NPM.

• Get a quick overview of the course
• Start building up our project setup for our user interface demonstration
• Talk about the importance of not using dependencies when your saved items are dev-dependencies

While browsers are not fully integrated with ES6 we need to transcribe our code down to ES5 to enable the support of these browsers. There are many ways to do so but as we are using webpack to package up our files our best move is to transcribe them as the server is starting up.

• What to load in Babel and how to configure it in webpack
• How to set up and configure Babel the right way for client-side applications using development dependencies

In this video, we will continue setting up Webpack to accept our React UI samples files.

• Get basic familiarity with const
• Add support for SASS and CSS dynamic packaging with Webpack
• Learn why using const instead of variables will improve the performance of our application the server

One of the bigger performance eaters are variables. To address this problem ES6 added two main new ways into JavaScript to work with variables so you can use them instead of vars. In this video, we will understand when to use let and const and where to place them in our React components.

• Take a look at why variables are performance killers
• Know the importance of scope
• Learn about the importance of changeability

Every variable or const you create has an effect on memory usage. Although most of the time these values are negligible when running on a server or on a client with a large usage of memory this can tally up. Generally speaking when you create elements you want to balance between performance and usability. Let's take a look at it in further detail.

• Understand memory usage
• Decide between improvement performance or usability

When working with variables both from a performance perspective and from a code readability perspective, it is best to cluster all your variables delineations into one big definition. In this video, we will continue setting up our React components as we enhance their performance.

• Importance of localizing variables
• Talk about the concept of minimal definitions
• Take a look at explicitly comparing variables

Generally speaking using methods is more taxing on memory then interacting directly with variables. As such, whenever the development time is not hurt by directly typing, companies would prefer that over methods/functions. Strings are the perfect sample for this type of performance enhancements. In this video, we will learn how to use the string template as a great alternative to methods.

• Take a look at how do we build strings more effectively in ES6
• Understand the use of arrays for joining strings
• Concatenate strings and look at template strings

Every time you call variables and objects that live outside of the current scope you are in, you create a more complex task for JavaScript renders. Instead if you're interacting more than once with a variable that isn't local to your current scope, create a local const at instead. Let's take a look at that.

• See why we need to avoid circular references
• Learn how to build things out starting with const and if need be move to let

One of the biggest bottle necks in programming, mainly inside of loops, is conditions. Generally speaking, if you can remove the condition out of a loop you will enhance you performance of your application. In this video, we will walk you through the different things you should be thinking about when creating loops that have conditions within them.

• Start looking at loops and timers
• Simplify and get rid of conditions
• Use maps and objects

The biggest time consuming client performance tasks are related to interacting with the DOM. The biggest shift that improved your performance of your application is the fact that you're not interacting direction with the DOM. Let's check that out in this video.

• See why you shouldn't be interacting directly with the DOM when working with React
• Work through the React interface
• Aim for your components to be stateless

Most often you wouldn't worry much about that level of optimization but in some situations when you need to slice off performance issues, you might want to use ES5. In this video we will talk about how you should focus your energy when improving performance issues of your application.

• Why we don't need to worry about ES6 vs. ES5
• Improve your code performance
• Take a look at the most often called functions such as loops, conditions, local references

The biggest feature of arrays is that it can be updated and grown. Let's optimize arrays for this modern web development world, in this video.

• Understand the importance of declaring the size of the array
• Know why methods should not be used
• Use of access instead of push

The process of creating an array is more taxing then accessing an array that already exists. As such a great place for enhancing performance is to reuse arrays and objects. Let's take a look at just that.

• How to reuse an array
• How to reset an array

While most of the world is hot and bothered about making things as dynamic as they can, including references to objects when talking about performance anytime we have a variable, we are hitting on performance. Immutable objects have many advantages that we will cover in this video.

• Discuss what immutability is
• Check out what constants are great
• Explore the immutableJS library

Besides optimizing an application to make it perform better, one of the biggest and most dangerous performance hitting elements of any application are its events. In this video we will see how to deal with events within the context of React.

• Understand the importance of reducing the amount of events/intervals
• Why is it important to kill events/intervals
• Know the use of the componentDidMount and componentWillUnmount methods

In this video we will learn how to create a Node Server using Express.

• See how Webpack uses Express to run our development server
• Build and optimize the outcome of our files to gain control over the server
• Get our server to render our react application on the server

For us to inject React into our site on the server we can't use static HTML, instead we need to convert our HTML into a template that we can inject into it the dynamic values. In this video we will set up our Layout system EJS that will be used to render out our dynamic HTML pages.

• Inject data into our HTML
• Enable reusability with EJS
• Integrate into ExpressJS

All of our client side files that we used so far have been using JSX/ES6 and as such would not work on our server. In this video, we will setup our server to handle these files.

• Configure Babel for production
• Pass properties to EJS

When you are thinking about performance, there is a difference between client-side and server-side performance. While users have stronger and stronger devices, if we can cache an operation on the server and by that reduce the need of the browser to render out our JavaScript when it's first loaded – that is a win. In this video, we will learn how to create server side rendering.

• Know the performance benefits
• See how can we integrate our react application on the server

Now that we created our server, it's time for us to wrap up our code into a module so we can share it between our production and development servers. In this video, we'll create all the shared assets that will be used both on production and development environments preparing us for our next focus that would be production/development configurations.

• Get familiar with the CreateJS module
• Know the specifics of exporting between files

In an ideal world, our JavaScript code would just work perfectly as it is on both environments. But in reality, we need to add a patch to it to get it to not do some things on the server.

• Understand the breaking point
• Patch things to work on the server

Now that we have server-side code on our project, our original webpack can't work without gaining access to this server. In this video, we will set up the capability to perform hot refreshes.

• Create the packaging
• Integrate Webpack into the server

In this video, we continue from the last one and get our server up and running.

• Continue from where we left and configure the rest of the Webpack using webpack-dev-middleware
• Add webpack-dev-middleware

At this stage we will have a small conflict between our Webpack development files and our output application. To fix this problem we will fix our priorities when integrating Webpack into our express server.

• Understand the Express rule
• Change priorities so our dev server works

To get our code to be production ready we really should clean out our CSS from duplicates and condense it down. This in return will increase our application performance and reduces load time of our CSS files. In this video, we will reduce our CSS app file by over 80%.

• Use css-nano and optimize-css-assets-webpack-plugin to build up our CSS

In this video, we will get our JavaScript to be production ready as well by sending to React (and other packages) that we are running a production build and by minifying our code.

• Remove development code that is not relevant
• Optimize the code
• Minify the code

We are almost done, but we still need to cache and compress the files that are being sent from the server. That is exactly what we will do in this video, as we wrap up the build of our application.

• Compress files with gzip
• Define a cache

This video gives overview of the entire course.

Understanding the fundamental components of a client application is essential to success in modern frameworks.

• Review a simple jQuery app and recall the days when data and display were essentially equivalent
• See how data binding frameworks like Knockout improved our lives with a good abstraction for managing data on the client
• Contrast with React's abstractions for data and events, and observe how the display component is also more manageable

As React applications grow, there arises a clear need for a consistent and scalable way to manage your application state. The standard way to achieve this is to follow the FLUX pattern.

• Get a high-level overview of FLUX in order to understand the basic principles
• Create your data store, define the possible transformations, and expose functions that provide access to the store
• Wrap your React components in a Provider that subscribes to the store and re-renders when a change occurs

Before diving into building applications with Redux, we should get a fundamental understanding of how we implement and organize different concerns.

• Review how the store is created using reducers, which are identical to how we managed our application state in our own FLUX implementation
• Review a connected component to see how state gets injected as component props
• Define action creators, bind them to the dispatch, and inject them as component props to more closely mimic FLUX

Take an existing React client and turn it into a Redux application.

• Move all of your state management into a reducer
• Initialize your data store and feed it to the provider
• Inject action creators and application state into your connected components

A large FLUX application has lots of actions being dispatched from many places in a deep component tree, making bugs difficult to track down. Redux DevTools will help light the way.

• Install Redux DevTools and connect it to your app
• Watch the store being updated as actions are dispatched
• Use it to track down elusive bugs

As reducers grow, using a switch statement becomes harder to maintain, and immutability becomes harder to enforce.

• Write a function that allows reducers to use mappings
• Replace your function with the redux-resolver package
• Enforce immutability using Immutable.js

Writing a single-page app means using nothing but JavaScript to update the page when navigation links are clicked. It's worth it to see what it takes to do this yourself before reaching for a more robust, pre-made solution.

• Add the views, actions, and reducer handlers for a second page
• Render different pages based on the value of a variable
• Add links that update the page variable when clicked

As a single-page app acquires more pages, managing them all in the same location becomes impractical.

• Move pages and relevant components, actions, and reducers into subfolders
• Use combineReducers to assemble reducers into a single store
• Update connected components to use relevant parts of the application state

A home-cooked routing implementation might do the trick early on, but it gets hard to manage when things get more complex, and there's no need to reinvent a perfectly good wheel.

• Using react-router, define routes that render your different pages.
• Use react-router-redux to sync your history with the redux store
• Use the built-in Link component or build something custom

We want to retrieve data from the server in a consistent and reliable way. Promises provide a much better abstraction for this than the traditional callback model.

• Using axios, set up a module responsible for all server communication
• Hook up middleware, allowing the dispatch to accept promises
• Call asynchronous action creators to fetch data when the component loads

After fetching data, the next step is to display it. Apps will often have multiple list views or grid views with a consistent look and feel across them all. It's therefore helpful to have an easy and reusable way to display lists of records.

• Use promise handlers to stash incoming server data into a reducer
• Inject the data into your component and render it into a datatable
• Refactor the datatable to be generic and reusable

Pagination is one of the most common problems to occur in a user interface. We can make it simple and straightforward by leveraging Redux.

• Compose complex actions from simple pagination actions and the fetch function
• Read state from multiple reducers to add pagination to the list
• Create a higher order reducer function to reuse pagination logic

Pagination is easy to implement in Redux, but a fully featured library will prevent you from writing the same code in multiple projects.

• Include the pagination reducer and configure server communication details
• Use library state and actions to drive custom datatable and pagination components
• Use the library's built components for datatables and rich pagination

Almost every web client has forms, and JavaScript libraries offer different solutions for submitting them via AJAX. In react-redux, we solve it like any other problem: with components, actions, and reducers.

• Create reducer and action logic to manage the form fields
• Build a component for displaying form fields and updating their state
• Connect a component to the Redux store and wire the form together

Asynchronous form submission is another way by which single-page apps can improve on user experience. Leverage Redux and other libraries to elegantly handle both success and failure scenarios.

• Submit form data to the server, displaying a toastr notification on failure
• For successful submissions, display a notification and redirect to another page
• Improve the failure experience by highlighting invalid form fields

Forms in Redux are easy, but we don't want to rewrite the code with every new project. ReduxForm is a library that uses a reducer to manage our form state for us.

• Decorate form components with reduxForm() to inject form state.
• Wrap form input components in a Field for automatic field injection
• Throw a SubmissionError when server side validation fails.

To improve user experience, we want to prevent submission of invalid data as much as possible. ReduxForm allows you to specify a validate function, which returns information indicating which fields have errors.

• Define a simple validation function to collect error information
• Update form components so that invalid data can't be submitted
• Iterate on validation code to make it reusable across multiple forms

All aspects of a react-redux app can and should be tested. React's in-house utilities for testing components leave some things to be desired. Enzyme.js provides a simple and powerful interface to get your components properly covered.

• Set up a virtual DOM to get enzyme up and running
• Assert that components produce correct output depending on props
• Simulate user interactions and assert that event handlers are executed

In redux, our actions contain a great deal of our application logic, making them extremely important to test. But asynchronous actions that make API calls can also be somewhat tricky to tackle.

• Use axios-mock-adapter to mock API calls from axios
• Use redux-mock-store to dispatch the asynchronous action under test
• Verify that the success and failure scenarios behave as expected

A great deal of the logic in a Redux application is found in the reducers, making them absolutely crucial to test. Fortunately, this is very easy to achieve due to the pure functional nature of Redux.

• Save the important state in the reducer and reflect it in the UI
• Verify that the reduce returns the initial state by default
• Verify that your actions update the state according to expectations