Modern Front-end Architecture: Optimize Your Front-end Development with Components, Storybook, and Mise en Place Philosophy

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Chapter 1: The Mise en Place Philosophy
	Software Is Different, Right?
		Good Software
	What Does This Have to Do with Software?
		Components
			Meetings Don’t Ensure Success
			The Workspace
	Storybook
	Key Takeaways
Chapter 2: Configuring Our Workspace
	System Requirements
		Installing Node.js
			Version Managers
	Windows Installation Instructions
		Confirming Node Version
		Removing Existing Node.js Installations (Windows)
		Install nvm-windows
		Installing Node.js (Windows)
		Mac/Linux Installation Instructions
			Verify Version Manager Installation (Mac/Linux)
			Install Node.js (Mac/Linux)
	Leveraging Node.js Built-In Utilities
	Creating Our React Application
		Running the Application
	Adding Our Workspace
	Storybook
	Installing Storybook
	Key Takeaways
Chapter 3: Our First Storybook Stories
	Our First Storybook Stories
		StoriesOf
		Component Story Format
			Component Code
		Storybook Add-ons
		Story Variants
			When Should We Create a Story vs. a Knob?
	Key Takeaways
Chapter 4: Creating Reusable Components
	What Makes a Good Component?
		It All Comes Down to Purpose
		Additional Components
	When Should We Abstract Components?
		Component States
	How Should We Arrange Our Components?
		Classifying Component Types
	Key Takeaways
Chapter 5: Styling
	CSS
		Benefits of CSS
		Drawbacks of CSS
		Preprocessors
		Benefits of Preprocessors
		Drawbacks of Preprocessors
		CSS-in-JS
		Benefits of CSS-in-JS
		Drawbacks of CSS-in-JS
		Utility-First Styling Libraries
		Benefits of Utility-First Libraries
		Drawbacks of Utility-First Libraries
		How to Choose a Styling Solution
		Building a Theme
	Key Takeaways
Chapter 6: Ensuring the Quality of Our Components
	Unit Tests
	Testing React Components
	Testing Alongside Storybook
	Key Takeaways
Chapter 7: Interacting with API Data
	Some Main Considerations
	Feature-Based Development
	Loading Data
		Container/Presentational Components
		Mock Data
	Wrapping Up
Chapter 8: Building Our Application
	Navigating Between Pages
	Routing
	Updating Our Application to Use Routes
	Navigation
	Wrapping Up
Chapter 9: Automating Repetitive Tasks
	Our Own CLI
	A Brief Example
	Building Some Generators for Our Project
		Adding Additional Variables to Our Generator
	Wrapping Up
Chapter 10: Communicating Our Components
	Documenting Our Components
	More Advanced Documentation
		MDX
	Sharing Our Workspace
	Wrapping Up
Index