React Speed Demos

Setup React Webpack

Setup Webpack, Babel, and other dependencies required for React ES6 development pipeline automation.

ES6 React Guide

Code along Hello World React app learning ES6 React foundations.

Production Optimize Webpack

Minify CSS, HTML, and JS. Optimize React core bundle size. Build browser cache and CDN friendly URLs.

React Speed UI

Start building our own custom UI library using PostCSS, Flexbox, and BEM CSS methodology.

Start Component Design

We create GitHub custom component to demonstrate AJAX requests from custom React component. IconText component wraps Font Awesome CSS library. YouTube component demonstrates converting an embed to React component.

Define Component Internals

Checklist of strategies following all aspects of component internals. Create complex custom component using these strategies.

Wire Multiple Components

React is all about composition of multiple components. This chapter highlights best practices in deciding how to design for inter-related multiple components in your project.

Route Component Layouts

For complex apps you may want to use multiple layouts. In order to switch from one layout to another using links or page URLs, we will use routing.

Lint React Apps

Our app is now refactored to clear all the lint errors and warnings.

Test App Components

This chapter will walk you through multiple testing tools and strategies to make your React app more reliable, robust, and performant.

Refactor Existing Components

Refactoring is an essential part of iterative development. React is ideal for iterative refactoring of your code because of component based development.

Redux State Container

To help understand this important chapter, let us create a relatively complex app to manage the the roadmap for ReactSpeed book and companion code. We want to list upcoming, recent content and code features. Users should have the capability to Like features they want to see first or jump to live feature demos and content.

Redux Wiring App

Create higher order components for wiring your Redux app.

Firebase React Integration

Create Firebase React integration for a truly serverless architecture for your React Apps.