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
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), EPUB (for phones and tablets) and MOBI (for 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.
Recipes for DecouplingMatthias Noback
Write software that survives
CQRS by ExampleCarlos Buenosvinos, Christian Soronellas, and Keyvan Akbary
- Leverage your Software Architecture skills by learning everything about CQRS in detail with lots of examples
- Develop faster applications by applying CQRS and fostering Read Models and Projections
- Learn how to apply CQRS into a brownfield project from a pragmatic approach
OpenIntro StatisticsDavid Diez, Christopher Barr, Mine Cetinkaya-Rundel, and OpenIntro
A complete foundation for Statistics, also serving as a foundation for Data Science.
Leanpub revenue supports OpenIntro (US-based nonprofit) so we can provide free desk copies to teachers interested in using OpenIntro Statistics in the classroom and expand the project to support free textbooks in other subjects.
More resources: openintro.org.
Maîtriser Apache JMeterPhilippe Mouawad, Bruno Demion (Milamber), and Antonio Gomes Rodrigues
Toute la puissance d'Apache JMeter expliquée par ses commiteurs et utilisateurs experts. De l'intégration continue en passant par le Cloud, vous découvrirez comment intégrer JMeter à vos processus "Agile" et Devops.
If you're looking for the newer english version of this book, go to Master JMeter : From load testing to DevOps
C++20 - The Complete GuideNicolai M. Josuttis
All new language and library features of C++20 (for those who know previous C++ versions).
The book presents all new language and library features of C++20. Learn how this impacts day-to-day programming, to benefit in practice, to combine new features, and to avoid all new traps.
Buy early, pay less, free updates.
Ansible for DevOpsJeff Geerling
Ansible is a simple, but powerful, server and configuration management tool. Learn to use Ansible effectively, whether you manage one server—or thousands.
Jetpack Compose internalsJorge Castillo
Jetpack Compose is the future of Android UI. Master how it works internally and become a more efficient developer with it. You'll also find it valuable if you are not an Android dev. This book provides all the details to understand how the Compose compiler & runtime work, and how to create a client library using them.
The PowerShell Scripting and Toolmaking BookDon Jones and Jeff Hicks
Learn the patterns, practices, and details of PowerShell Scripting and Toolmaking from the industry's two most recognized experts on the subject.
Mastering STM32 - Second EditionCarmine Noviello
With more than 1200 microcontrollers, STM32 is probably the most complete ARM Cortex-M platform on the market. This book aims to be the most complete guide around introducing the reader to this exciting MCU portfolio from ST Microelectronics and its official CubeHAL and STM32CubeIDE development environment.
Introduction to Data ScienceRafael A Irizarry
The demand for skilled data science practitioners in industry, academia, and government is rapidly growing. This book introduces concepts from probability, statistical inference, linear regression and machine learning and R programming skills. Throughout the book we demonstrate how these can help you tackle real-world data analysis challenges.
2 Books"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before...#1
2 Books"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before...
Architecture and Decoupling
2 BooksThis bundle combines two of the most recent books by Matthias Noback, which together offer some serious material that will definitely level up your skills in web application development with a focus on long term maintainability, testing, and domain-driven design.
CCIE Service Provider Ultimate Study Bundle
2 BooksPiotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification...#3
CCIE Service Provider Ultimate Study Bundle
2 BooksPiotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification...
Pattern-Oriented Memory Forensics and Malware Detection
2 BooksThis training bundle for security engineers and researchers, malware and memory forensics analysts includes two accelerated training courses for Windows memory dump analysis using WinDbg. It is also useful for technical support and escalation engineers who analyze memory dumps from complex software environments and need to check for possible...#5
Pattern-Oriented Memory Forensics and Malware Detection
2 BooksThis training bundle for security engineers and researchers, malware and memory forensics analysts includes two accelerated training courses for Windows memory dump analysis using WinDbg. It is also useful for technical support and escalation engineers who analyze memory dumps from complex software environments and need to check for possible...
Effective Kotlin bundle
2 BooksThe package of the most essential books for Kotlin developers, to become great developers. Effective Kotlin and Kotlin Coroutines by Marcin Moskała are both famous positions, well known and commonly recommended.
Cisco CCNA 200-301 Complet
4 BooksCe lot comprend les quatre volumes du guide préparation à l'examen de certification Cisco CCNA 200-301.
All the Books of The Medical Futurist
6 BooksWe put together the most popular books from The Medical Futurist to provide a clear picture about the major trends shaping the future of medicine and healthcare. Digital health technologies, artificial intelligence, the future of 20 medical specialties, big pharma, data privacy, digital health investments and how technology giants such as Amazon...#10
All the Books of The Medical Futurist
6 BooksWe put together the most popular books from The Medical Futurist to provide a clear picture about the major trends shaping the future of medicine and healthcare. Digital health technologies, artificial intelligence, the future of 20 medical specialties, big pharma, data privacy, digital health investments and how technology giants such as Amazon...