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 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
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.
C++ Best PracticesJason Turner
Level up your C++, get the tools working for you, eliminate common problems, and move on to more exciting things!
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.
Functional Design and ArchitectureAlexander Granin
Software Design in Functional Programming, Design Patterns and Practices, Methodologies and Application Architectures. How to build real software in Haskell with less efforts and low risks. The first complete source of knowledge.
R Programming for Data ScienceRoger D. Peng
This book brings the fundamentals of R programming to you, using the same material developed as part of the industry-leading Johns Hopkins Data Science Specialization. The skills taught in this book will lay the foundation for you to begin your journey learning data science. Printed copies of this book are available through Lulu.
C++20 is the next big C++ standard after C++11. As C++11 did it, C++20 changes the way we program modern C++. This change is, in particular, due to the big four of C++20: ranges, coroutines, concepts, and modules.
I am a Software Engineer and I am in ChargeAlexis Monville and Michael Doyle
I am a Software Engineer and I am in Charge is a real-world, practical book that helps you increase your impact and satisfaction at work no matter who you work with.
In the book, we will follow Sandrine, a fictional character who learns to think in a new way enabling her to take a different course of action.
Atomic KotlinBruce Eckel and Svetlana Isakova
For both beginning and experienced programmers! From the author of the multi-award-winning Thinking in C++ and Thinking in Java together with a member of the Kotlin language team comes a book that breaks the concepts into small, easy-to-digest "atoms," along with exercises supported by hints and solutions directly inside IntelliJ IDEA!
Invest In Digital Health - The Medical Futurist's GuideDr. Bertalan Mesko
Artificial Intelligence and Digital Health are booming. In this book, we explain why now it's a good time to invest in Digital Health and give recommendations on where to invest by looking at the top 24 technological trends we find the most promising.
The Hundred-Page Machine Learning BookAndriy Burkov
Everything you really need to know in Machine Learning in a hundred pages.
Mastering STM32Carmine Noviello
With more than 600 microcontrollers, STM32 is probably the most complete ARM Cortex-M platform on the market. This book aims to be the first guide around that introduces the reader to this exciting MCU portfolio from ST Microelectronics and its official CubeHAL.
Software Architecture for Developers: Volumes 1 & 2 - Technical leadership and communication
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...
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...
The Future of Digital Health
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 and how technology giants such as Amazon or Google want to conquer...
Cisco CCNA 200-301 Complet
4 BooksCe lot comprend les quatre volumes du guide préparation à l'examen de certification Cisco CCNA 200-301.
CCDE Practical Studies (All labs)
3 BooksCCDE lab
"The C++ Standard Library" and "Concurrency with Modern C++"
2 BooksGet my books "The C++ Standard Library" and "Concurrency with Modern C++" in a bundle. The first book gives you the details you should know about the C++ standard library; the second one dives deeper into concurrency with modern C++. In sum, you get more than 600 pages full of modern C++ and about 250 source files presenting the standard library...
Modern Management Made Easy
3 BooksRead all three Modern Management Made Easy books. Learn to manage yourself, lead and serve others, and lead the organization.
Linux Administration Complet
4 BooksCe lot comprend les quatre volumes du Guide Linux Administration :Linux Administration, Volume 1, Administration fondamentale : Guide pratique de préparation aux examens de certification LPIC 1, Linux Essentials, RHCSA et LFCS. Administration fondamentale. Introduction à Linux. Le Shell. Traitement du texte. Arborescence de fichiers. Sécurité...
Programming with Ease
3 BooksAlle drei Bände der Serie Programming with Ease in einem Paket. Darin findest du alles, was ich dir zu den wichtigsten Phasen der Softwareentwicklung im Hinblick auf Clean Code Development für langfristig hohe Produktivität sagen kann.Im Band Slicing findest du die Anforderungsanalyse im Rahmen eines iterativ-inkrementellen Vorgehensmodells aus...
2 BooksUnveil the power of Ansible and Vagrant with this bundle at a special price. You'll have everything you need to get started with Vagrant - learn the basics and how to create your virtual development environments, using Ansible as provisioner! About Vagrant Cookbook Vagrant Cookbook is a complete guide to get started with Vagrant and create your...