React Speed Coding (The Book + Code in PDF, EPUB, and MOBI)
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.
- Adding new Code Along GitHub repository containing branches for code you complete in each chapter.
- Chapter-by-chapter demos are available at the new demos website.
- Making each chapter stand on its own so you can complete a significant learning step at the end of each chapter.
- 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.
- The new edition also features better typography, color coding, and more screenshots to aid your learning.
- Upgrading to the latest development environment and dependencies as of this writing.
- Adding new sections to make your React journey faster, easier, and better.
- Reducing the code you write to achieve the same goals.
- Redesigning the UI CSS using Block, Element, Modifier method for more scalable, yet less verbose design.
- 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.
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
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.
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.
Buy for a friend. Get 2 books.
Learning React is more fun with a friend. Get 2 books for the suggested price of 1.
Buy for the team. Get 4 books.
Get your entire team speed coding in React. Buy 4 books for the price of 3.
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
- Event Handlers and setState
- JSX and the render method
- Template literals and ternary conditionals
- 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
- Entry points
- PostCSS and plugins
- Profiling Webpack build
- 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
- 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.
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 $12 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.