React Speed Coding Book

Welcome reader. The aim of the React Speed Coding 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.