React Speed Coding Book and Companion Code

Companion code and manuscript of React Speed Coding book is available here.

React Speed Coding book

Download and read ebook, PDF, mobile formats. Support this project.

ReactSpeed.com companion website

Component demos.
Access ReactSpeed API for component design workflow.
Discuss the book.
Suggest new features for ReactSpeed UI library.

Reuse code from book

Launch quickly with fully functional ES6 React + Webpack starter.
Add 20+ custom React components to your app.

Clone the repo like so.

git clone --depth=1 https://github.com/manavsehgal/reactspeedcoding.git

The --depth=1 flag ensures that only the latest commit is cloned.

- reactspeedcoding
-- manuscript # chapter content
-- code # sample code

Now cd to the code directory and install dependencies using npm install command. Run sample app using npm start command.

License information

Code is MIT license. Book manuscript text and images are Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Setup React Webpack

Code: React Webpack Starter Project.

How to install Node.js and use Node Version Manager.
Setup package.json to manage your NPM dependencies.
Quick access companion code for this book using Github.
Install starter dependencies for React, Webpack, and Babel.
Create Webpack configuration for development pipeline automation.
Write and run your first Hello World React app.

ES6 React Guide

How to organize your React app in folders and files.
How to define a React component using ES6 syntax.
What are modules and how to import and export React components.
Why we need constructors.
How components talk to each other and the UI using events, props, and state.
Importance of stateless components.
Using React Chrome Extension to inspect your component hierarchy at runtime.

Production Optimize Webpack

Code: Production Optimized Webpack Config.

Optimize React code for production bundle.
Separate CSS for static or CDN serving.
Bundle dependencies separately.
Minify JavaScript code.
Profiling Webpack generated build.
Adding public assets for your app.
Creating custom index template.

React Speed UI

Code: React Speed UI framework styles

In this chapter we will start designing our very own React Speed UI framework for your apps. We will do so using Flexbox, PostCSS, and custom React components.

Designing a custom UI framework is an ambitious undertaking. Our task becomes achievable if we scope our design goals upfront.

Speed. Like the name suggests, our UI framework is built for speed of development and creating performant apps.

Single Page App. We will design various UI components required for a single page app including landing page, buttons, forms, navigation menu, interactive content cards, and footer.

Responsive. Our app will be responsive and components will render according to target screen size.

Customizable. We want our UI framework to be easily customizable using custom color themes.

Reusable. The UI frameworks will be reusable across multiple apps.

Simple. We will keep our UI framework simple to understand, extend, and reuse.

Optimized. Speed UI framework will be production ready and optimized for light payloads.

Reactive. This topic is TBD. We will see if using Microservices and Reactive architectural patterns can be in scope of this book.

State Machine. Our UI framework will support state management. This is topic for an advanced chapter, however we will consider this goal as we design the framework.

Expressive. Our UI framework will be reusable in expressive, English like statements.

Start Component Design

Code: Page component, YouTube component, GitHub component, Workflow component,
IconText component.

The objective at this stage is to speedily "prototype" new features and code within your React project. Subsequent chapters on Designing Component Internals, Wiring Multiple Components, and Refactoring Existing Components will go over best practices to create performant, reusable, and maintainable code.