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

Last updated on 2016-08-29

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 ReactSpeed.com 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 ReactSpeed.com 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.

About the Author

Manav Sehgal
Manav Sehgal

Manav Sehgal is a strategic thinker, self-starter, solving for market leading technology and business model challenges using design led innovation. Certified in Leading Innovative Change, from UC Berkeley, Haas School of Business. Manav has 20 years of experience in digital, cloud, e-commerce, mobile apps development and design with Global 1000 organizations. Manav has worked at Xerox PARC in the area of information visualization software research. He is currently working at a FinTech market leader. He has also set up and led digital design and innovation labs serving more than 100 organizations, across 200+ engagements, in 11 industries.

Manav is the author of four books in the areas of Java, JavaScript, React, E-commerce, and rapid development. His recent books include https://reactspeed.com and https://reacteshop.com. He is also an active contributor to popular GitHub repositories in the React and Angular ecosystems. Manav is among top most viewed writers on Quora for his answers on Firebase and React technologies (https://www.quora.com/profile/Manav-Sehgal-2).

Packages

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.

  • English

  • PDF

  • EPUB

  • MOBI

  • APP

$9.99
Minimum price
$14.99
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.

  • English

  • PDF

  • EPUB

  • MOBI

  • APP

$14.99
Minimum price
$19.99
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.

  • English

  • PDF

  • EPUB

  • MOBI

  • APP

$29.99
Minimum price
$34.99
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 webpack.prod.config.js
    • 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

Other books by this author

The Leanpub 45-day 100% Happiness Guarantee

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

See full terms...

Write and Publish on Leanpub

Authors, publishers and universities use Leanpub to publish amazing in-progress and completed books and courses, just like this one. You can use Leanpub to write, publish and sell your book or course as well! 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. It really is that easy.

Learn more about writing on Leanpub