Index

A

• Abstract Syntax Tree (AST) / The DOM render target
• actions, Redux DevTools
  • selecting / Selecting and examining actions
  • examining / Selecting and examining actions
  • data, viewing / Action data
  • state trees / Action state trees and charts
  • charts / Action state trees and charts
  • state diffs / Action state diffs
  • triggering manually / Manually triggering actions
• Airbnb standards
  • using / Building on Airbnb standards
• assertions, Jest
  • creating / Basic assertions
  • basic equality / Basic equality
  • approximate equality / Approximate equality
  • value equality / Value equality
  • toHaveProperty() method / Values in collections
  • toContain() method / Values in collections
  • mock implementation / Working with mocks
  • asynchronous assertions / Asynchronous assertions
  • React component snapshots, testing / React component snapshots
• Atom
  • URL / Bringing Flow into your editor

B

• Barely SMS
  • starting / Starting Barely SMS
  • logging in / Logging in
  • home page, creating / The home page
  • contacts page, creating / The contacts page
  • message page, creating / The messages page
  • message, sending / Sending a message
  • API functions, using / The API
  • implementing, for production / Static React builds for production

C

• child component types
  • enforcing / Enforcing child component types
  • parents, with specific children types / Parents with specific children types
  • parents, with one child / Parents with one child
  • parents, with optional child / Parents with an optional child
  • parents, with primitive child values / Parents with primitive child values
• code editor
  • ESLint, using / Using ESLint in a code editor
• code formatting
  • automating, with Prettier / Automating code formatting with Prettier
• component performance
  • profiling / Profiling component performance
  • reconciliation work, removing / Removing reconciliation work
  • CPU intensive components, searching / Finding CPU intensive components
• component properties
  • validating / Validating component properties and state
  • primitive property values / Primitive property values
  • object property values / Object property values
  • function property values / Function property values
  • child component types, enforcing / Enforcing child component types
  • inspecting / Inspecting component properties and state
• components
  • developing, with stories / Developing components with stories
• component state
  • validating / Validating component properties and state, Validating component state
  • inspecting / Inspecting component properties and state
• CPU intensive components
  • searching / Finding CPU intensive components
• Create React App
  • installing / Installing Create React App
  • application, creating / Creating your first app
  • project name, specifying / Specifying a project name
  • dependency, handling automatically / Automatic dependency handling
  • directory structure / Directory structure
  • ejecting from / Ejecting from Create React App
  • ESLint, using / Using ESLint with create-react-app
  • user guide, URL / Automating code formatting with Prettier

D

• development server
  • starting / Starting the development server
  • Webpack, configuration / Webpack configuration
  • hot module reloading, implementing / Hot component reloading in action
  • Create React App, ejecting from / Ejecting from Create React App
  • Flow, integrating / Bringing Flow into the development server
• directory structure, Create React App
  • about / Directory structure
  • top-level files / Top-level files
  • static assets / Static assets
  • src directory / Source code
• Docker
  • URL / Getting started with Node containers
• Document Object Model (DOM) / The DOM render target

E

• editor
  • Flow, integrating / Bringing Flow into your editor
• element state values
  • manipulating / Manipulating element state values
• entry points / Entry points
• ESLint
  • installing / Installing and configuring ESLint
  • configuring / Installing and configuring ESLint
  • rules, reference / Installing and configuring ESLint
  • React plugins, adding / Adding React plugins to ESLint
  • using, with create-react-app / Using ESLint with create-react-app
  • using, in code editor / Using ESLint in a code editor
• event handler functions
  • validating / Validating event handler functions
• Express
  • URL / Starting Barely SMS

F

• Flow
  • URL / What does type-safety solve?
  • initializing / Installing and initializing Flow
  • installing / Installing and initializing Flow
  • integrating, into development server / Bringing Flow into the development server
  • integrating, into editor / Bringing Flow into your editor
• fragment / Fetching remote data

G

• Gatsby
  • installing / Building your first Gatsby site
  • URL / Adding local filesystem data
  • local filesystem data, adding / Adding local filesystem data
• gatsby-source-hacker-news plugin / Fetching remote data
• gatsby-transformer-json plugin / Adding local filesystem data
• Gatsby site
  • building / Building your first Gatsby site
  • local filesystem data, adding / Adding local filesystem data
  • remote data, fetching / Fetching remote data
• GraphQL
  • URL / Efficient resource usage

H

• hot module reloading
  • about / Hot reloading
  • implementing / Hot component reloading in action

I

• isolated component development
  • need for / The need for isolated component development

J

• Jest
  • driving philosophy / The driving philosophy of Jest
  • mock system / Mock everything except the application code
  • tests, isolating / Isolate tests and run in parallel
  • tests, executing in parallel / Isolate tests and run in parallel
  • tests, writing / Tests should feel natural, Writing Jest tests
  • tests, organizing with suites / Organizing tests using suites
  • assertions, creating / Basic assertions
  • unit test coverage, reporting / Unit test coverage
• Jest API
  • reference / Tests should feel natural, Values in collections
• JSBin
  • URL / The need for isolated component development
• JSFiddle
  • URL / The need for isolated component development

K

• Knobs / Experimenting with props

L

• loader plugins
  • Babel / Loading and compiling files
  • CSS / Loading and compiling files
  • Images / Loading and compiling files
• low-severity bugs
  • installing / Installing and initializing Flow

M

• Material-UI
  • URL / Building a messaging app
• messaging app
  • building / Building a messaging app
  • Barely SMS, starting / Starting Barely SMS

N

• Node containers
  • using / Getting started with Node containers

P

• Prettier
  • code formatting, automating / Automating code formatting with Prettier

R

• React
  • package / What's included with React
  • components / Components that compare render trees
  • Document Object Model (DOM) / The DOM render target
• react-scripts
  • tests, executing / Running tests using react-scripts
• React applications
  • deploying / Deploying React applications
  • composing, with services / Composing React apps with services
• React Developer Tools
  • add-on, installing / Installing the React Developer Tools add-on
  • URL / Installing the React Developer Tools add-on
  • URL, for Chrome / Installing the React Developer Tools add-on
  • React elements, enabling / Working with React elements in React Developer Tools
  • React elements, selecting / Selecting React elements
  • React elements, searching / Searching for React elements
• React plugins
  • adding, to ESLint / Adding React plugins to ESLint
• React tool
  • about / Choosing the right tools
  • essential tools / Essential tools
  • optional tools / Optional tools
• React tooling
  • about / Introducing tooling?, React tooling covered in this book
  • ancillary tasks / Ancillary tasks outside of React
  • construction site analogy / A construction site analogy
  • JSX, compiling to JavaScript / JSX needs to be compiled to JavaScript
  • JavaScript language, features / Newer JavaScript language features need to be transpiled
  • module, loading to enable application development / Hot module loading to enable application development
  • unit tests automatically, executing / Running unit tests automatically
  • type safety / Thinking about type safety
  • code quality, linting / Linting for code quality
  • component development environments, isolating / Isolating component development environments
  • browser-based debugging environment, providing / Providing a browser-based debugging environment
• readFile() function / Working with mocks
• reconciliation work
  • removing / Removing reconciliation work
• Redux app
  • building / Building a Redux app
  • App component / The App component and state
  • App state / The App component and state
  • Home component / The Home component and state
  • Home state / The Home component and state
  • NewBook component / The NewBook component and state
  • NewBook state / The NewBook component and state
  • API abstraction, using / The API abstraction
  • implementing / Putting it all together
• Redux DevTools
  • installing / Installing Redux DevTools
  • actions, selecting / Selecting and examining actions
  • actions, examining / Selecting and examining actions
  • state, exporting / Exporting and importing state
  • state, importing / Exporting and importing state

S

• src directory
  • App.css / Source code
  • App.js / Source code
  • App.test.js / Source code
  • index.css / Source code
  • index.js / Source code
  • logo.svg / Source code
  • registerServiceWorker.js / Source code
• standalone Jest
  • tests, executing / Running tests using standalone Jest
• static assets
  • favion.ico / Static assets
  • index.html / Static assets
  • manifest.json / Static assets
• static React sites
  • need for / Why static React sites?
  • for types of React apps / Types of React apps
  • for better user experience / Better user experience
  • for efficient resource usage / Efficient resource usage
• static Storybook apps
  • building / Building static Storybook apps
• Storybook
  • installing / Installing and configuring Storybook
  • configuring / Installing and configuring Storybook
  • components, developing with stories / Developing components with stories
  • experimenting, with props / Experimenting with props
  • Actions, experimenting with / Experimenting with actions
  • stories, linking together / Linking stories together
  • components, documenting / Stories as documentation
• suites
  • tests, organizing / Organizing tests using suites

T

• tests
  • isolating, with Jest / Isolate tests and run in parallel
  • executing, in parallel with Jest / Isolate tests and run in parallel
  • writing, in Jest / Tests should feel natural
  • executing / Running tests
  • executing, with react-scripts / Running tests using react-scripts
  • executing, with standalone Jest / Running tests using standalone Jest
  • writing, with Jest / Writing Jest tests
  • organizing, with suites / Organizing tests using suites
• time travel debugging
  • enabling / Time travel debugging
• top-level files
  • README.md / Top-level files
  • package.json / Top-level files
• type-safety
  • about / What does type-safety solve?
  • guesswork, replacing with assurance / Replacing guesswork with assurance
  • runtime checks, removing / Removing runtime checks
  • low-severity bugs / Obvious low-severity bugs

U

• unit test
  • coverage, reporting / Unit test coverage

W

• Webpack, configuration
  • about / Webpack configuration
  • entry points / Entry points
  • build output / Build output
  • input files, resolving / Resolving input files
  • files, loading / Loading and compiling files
  • files, compiling / Loading and compiling files
  • plugins, configuring / Configuring plugins
  • hot module reloading / Hot reloading
• writeFile() function / Working with mocks

Z

• zero configuration app / Creating your first app