React Speed Coding (The Book + Code in PDF, EPUB, and MOBI)
Minimum price
Suggested price

React Speed Coding

From concept to coding real world React apps, speedily!

About the Book

Welcome reader. The aim of this book is to get you from concept to coding real world React apps, as fast as possible.

React ecosystem is constantly evolving and changing at a fast pace. This book equips you to take the right decisions matching your project requirements with best practices, optimized workflows, and powerful tooling.

Code Along Edition

We are significantly revising this New Code Along Edition of React Speed Coding book.

  1. Adding new Code Along GitHub repository containing branches for code you complete in each chapter.
  2. Chapter-by-chapter demos are available at the new demos website.
  3. Making each chapter stand on its own so you can complete a significant learning step at the end of each chapter.
  4. Ensuring that your learning path is as linear as possible, without too many cross-references due to refactoring of code we write in each chapter.
  5. The new edition also features better typography, color coding, and more screenshots to aid your learning.
  6. Upgrading to the latest development environment and dependencies as of this writing.
  7. Adding new sections to make your React journey faster, easier, and better.
  8. Reducing the code you write to achieve the same goals.
  9. Redesigning the UI CSS using Block, Element, Modifier method for more scalable, yet less verbose design.
  10. Several new custom components for Buttons, Forms, Layout, and other features.

Why React is awesome

Writing the React Speed Coding book, companion code, and demo website has been fun and fulfilling at the same time. Thanks to the amazing ecosystem that React and open source community have created in a relatively short span of time.

What we love about React and companion libraries like Redux is how they introduce constraints and flexibility at the same time. A very difficult goal to achieve when writing generic libraries and frameworks. React and Redux seem to have done so elegantly. Growing GitHub stars and cross-industry adoption is proof of this achievement.

To us, React is about thinking in design and architectural patterns. It is more than making choices about which framework or library to use, or how to use these. We rapidly raise our thinking to design, requirements, solving real-world problems, that our apps are expected to address.

Learning React is future-proofing our investment more than any other framework or library with similar goals. Thanks to the flexibility of integrating with React, even some of the competing frameworks offer integration paths with the React ecosystem. These include Meteor-React integration, Redux use cases with Angular, and TypeScript-React playing well together, just to name a few.

The most awesome aspect of learning React is that it is an ecosystem. It has a life of its own above and beyond Facebook, the original authors of React core. No wonder you see companies like Netflix, Airbnb, Kadira, Khan Academy, and Flipboard contributing their React libraries and tools to the open source. 

Successfully navigating this growing ecosystem, making the right technology stack decisions along the way, will make the difference between an average programmer and a world-class designer-developer of the future.

We sincerely hope React Speed Coding can contribute to your journey in mastering the React ecosystem of technologies. Here's to moving from Concept to Code to Cash, speedily!

Why read React Speed Coding

React Speed Coding enables you to optimize your React development workflow and speed up the app design lifecycle.

Setup React Webpack development environment complete with Node and Babel including development, testing, and production workflows. Production optimization of Webpack development toolchain for CSS, JS, HTML pre-processing, faster builds, more performant code.

Learn ES6 React features including arrow functions, template literals, variable scoping, immutability, pure functions, among others.

Create custom React Speed UI library using Flexbox and PostCSS, with goals including responsive design, single page app components, ease of customization, reusable code, and high performance.

Apply Behavior-Driven Development techniques to create a comprehensive testing strategy for your apps. This includes ESLint and StyleLint to provide in-editor coding guidance on industry best practices for JavaScript and CSS. Use Mocha to describe specs. Chai for writing assertions. Sinon to spy on methods and events. We also learn about Enzyme for simple yet powerful React component level testing.

Adopt a comprehensive component design workflow including several strategies for starting the component design by creating React components from embeds, REST APIs, samples, and wireframes.

Create an end-to-end single page app using Redux store, actions, and reducers.

Integrate your apps with serverless architecture using Firebase hosting. Create REST API for component design workflow using Firebase visual tools. Compare with other database oriented web platforms including Meteor.

Run demo app and components live at website.

Visit our popular GitHub repository to download and reuse source code from this book.

Who this book is for

The React Speed Coding book assumes a basic knowledge of programming in JavaScript, HTML, and CSS. 

If you are a complete beginner, there is enough guidance available for you to make this your first programming primer with suggested additional reading.

Experienced web developers will master React component design workflow using latest ES6 language features.

If you already program in React, you can use this book to optimize your development, testing, and production workflow.

  • Share this book

  • Categories

    • JavaScript
    • React
    • Computers and Programming
    • ES6
    • Web Development
    • Software
    • Computer Science
    • Web Development
    • Software
  • Feedback

    Email the Author(s)
  • License

About the Author

Manav Sehgal
Manav Sehgal

Manav Sehgal is a builder, author, and inventor specializing in product management, software engineering, cloud, and data science with more than 15 years of experience at Amazon (AWS India), Xerox PARC, HCL Technologies, and Daily Mail Group.

During his career he has also built, mentored, and led technology and product management for six startups with successful exits including Rightster (Video Advertising), Map of Medicine (Healthcare), Cytura (Media Services), Infonetmap (E-commerce), Edynamics (Digital Marketing), and AgRisk (Agriculture Analytics). Manav is AWS Certified Solutions Architect Associate (2019).

Daily Mail Group (RMS) sponsored him for Executive MBA module in Leading Innovative Change, from UC Berkeley, Haas School of Business (2015). He has completed CMMI certification from SEI CMU (2006). He studied Computer Engineering from Delhi College of Engineering, while employed at Xerox PARC (1995-99). He also earned distinction in Lean Management program conducted by AOTS, JMAM Japan (1994-95).

Manav is author of five books on Data science solutions (, React rapid development (, E-commerce platform development (, Java component technology, and JavaScript object oriented programming. He is a popular GitHub contributor active on AWS, Google, and Facebook open source projects. Manav has written the top five voted (as on July 2019) data science tutorial on Kaggle (, the largest data science community online.


The Book + Code in PDF, EPUB, and MOBI

Get the React Speed Coding book in easy to read PDF and eBook formats. Download working code samples from the companion GitHub repo.

  • PDF

  • EPUB

  • WEB

  • English

Minimum price
Suggested price
Buy for a friend. Get 2 books.

Learning React is more fun with a friend. Get 2 books for the suggested price of 1.

  • PDF

  • EPUB

  • WEB

  • English

Minimum price
Suggested price
Buy for the team. Get 4 books.

Get your entire team speed coding in React. Buy 4 books for the price of 3.

  • PDF

  • EPUB

  • WEB

  • English

Minimum price
Suggested price

Table of Contents

  • Awesome React Ecosystem
    • Code Along Edition
    • Easy start React
    • Who this book is for
    • Development environment
    • Why React is awesome
    • Why read React Speed Coding
    • Prior art
    • Stakeholder perspectives on speed
    • Who is using React
    • Technology stack
    • Measuring speed
    • Why learn React comparing with Angular
    • Shared learning path between Angular 2 and React
  • Setup React Webpack
    • Installing starter dependencies
    • Configure Webpack in webpack.config.js
    • HTML webpack template for index.html
    • Configuring startup scripts in package.json
    • Run webpack setup
  • ES6 React Guide
    • Hello World React
    • Component composition and naming
    • Files and folder structure
    • Root component index.jsx
    • Module import
    • World.jsx component
    • Class definition
    • Constructor
    • Event Handlers and setState
    • JSX and the render method
    • Template literals and ternary conditionals
    • Properties
    • Event UI binding
    • Controlled components
    • PropTypes and defaultProps
    • ES7 Property Initializers
    • Complete World.jsx listing
    • Hello.jsx stateless component
    • Component styles in world.css
    • Base styles in element.css
    • Entry CSS using style.css
    • Run development server
    • React Chrome Extension
  • Production Optimize Webpack
    • Add production plugins and supporting dependencies
    • HTML minifying
    • CSS minifying
    • Webpack production
    • Initialization
    • Entry points
    • Loaders
    • PostCSS and plugins
    • Plugins
    • Profiling Webpack build
  • ReactSpeed UI
    • ReactSpeed UI objectives
    • PostCSS processing
    • BEM CSS naming method
    • Configurable theme using variables.css
    • Theme definition in theme.css
    • Updating elements.css
    • Typography in type.css
    • Utilities in util.css
    • Image styles in image.css
    • Flexbox layout in layout.css
    • Import styles in style.css
    • Define card component styles in card.css
    • Card.jsx component
    • Home.jsx landing page component
  • Start Component Design
    • Embed to React
    • CSS libraries to React
    • API to React
  • Define Component Internals
    • Naming files, folders, and modules
    • Imports and exports
    • Stateless components and pure functions
    • Classes and inheritance
    • Constructor and binding
    • Properties and property types
    • State management
    • Lifecycle methods
    • Event handlers
    • Render and ReactDOM.render methods
    • JSX features and syntax
    • Workflow.jsx component
  • Wire Multiple Components
    • Render multiple components programmatically
    • Composition using parent child node tree
    • Presentational and container components
    • Reconciliation algorithm and keys for dynamic children
    • Integrating vendor components
    • Routing to wire component layouts
  • Route Component Layouts
    • Layout strategy
    • AboutBook.jsx component
    • AboutEmbeds.jsx component
    • Configure routes in index.js
    • Nav.jsx component
    • Navigation styles in nav.css
    • Footer.jsx component
    • Landing.jsx layout component
    • NavLink component
    • Programmatic routing in Ribbon.jsx
    • Refactoring IconText.jsx for ribbon menu
    • Search engine friendly URLs
    • Handling router exceptions
  • Lint React Apps
    • Browsersync multi-device testing
    • Lint config in webpack.lint.config.js
    • JavaScript lint using ESLint
    • Configuring eslint in eslintrc.js
    • Eslint command line interface
    • Fixing ESLint reported problems
    • ESLint webpack.lint.config.js integration
    • StyleLint for CSS
    • StyleLint CLI
    • Fixing StyleLint reported problems
    • Webpack integration for StyleLint
    • Complete webpack.lint.config.js listing
  • Test App Components
    • Mocha Chai Behavior-Driven Development
    • Test 01_mocha_timeout.spec.js
    • Test 02_mocha_chai.spec.js
    • Enzyme React component testing
    • JSDOM browser.js helper
    • Test 01_workflow.spec.js
    • Sinon spy methods and events
    • Istanbul code coverage
  • Refactor Existing Components
    • ES5 to ES6 conversion in TodoList.jsx
    • Adding TodoApp to AboutCustom.jsx
    • Testing and refactoring
    • Refactoring for converting standard React apps to Redux
    • Refactoring for optimizing React apps
    • Refactoring Font Awesome to SVG icons
    • IconSvg.jsx custom component
    • Icon data fixture in icons.js
  • Redux State Container
    • The Roadmap app
    • Redux basics
    • State tree definition
    • Redux spec in 02_roadmap_redux.spec.js
    • Actions for Roadmap in /actions/roadmap.js
    • Reducers in /reducers/roadmap.js
    • Store in /store/roadmap.js
    • Test store, actions, and reducers
    • Optimize Redux app
    • Component hierarchy spec in 03_roadmap.spec.js
    • Rapid prototype hierarchy in roadmap.jsx
    • Data in fixtures/roadmap/features.js
    • Extract Feature.jsx component
    • Extract FeatureList.jsx component
    • Refactoring Roadmap.jsx app
  • Redux Wiring App
    • Extract CategoryButton.jsx component
    • Refactor data fixture features.js
    • Refactor actions in actions/roadmap.js
    • Extract SearchFeature.jsx component
    • Connecting Store in VisibleFeatureList.jsx
    • FilterCategoryButton.jsx container component
    • Refactor Roadmap.jsx
    • Hydrate Redux app using reducers/hydrate.js
    • Pass store in index.js
    • Update test suite 03_roadmap.spec.js
    • Update 02_roadmap_redux.spec.js
  • Firebase React Integration
    • Comparing Firebase with Meteor
    • Firebase Hosting
    • How Firebase stores files and data
    • Designing a REST API using Firebase
    • For what kind of apps is Firebase not ideal
    • Refactor Workflow component for Firebase integration
    • Data in fixtures/workflow/steps.json
    • Refactor Workflow.jsx
    • Firebase config data in fixtures/rsdb.js
    • Pass route param using index.js
    • Refactor AboutWorkflow.jsx
    • Create WorkflowFire.jsx
  • React Developer Experience
    • Redux DevTools
    • Kadira Storybook
    • Create /.storybook/config.js
    • Create /app/stories/button.js
    • Create /.storybook/webpack.config.js

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

80% Royalties. Earn $16 on a $20 book.

We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub