Adding a CSS Preprocessor (Sass, Less etc.)

`Button.js`

• #1891
• #1939

Adding a Router

Using a Custom Theme

• Basic Example
• React Router

Adding a Stylesheet

`Button.js`

• here

With React Router

• Webpack

Adding Bootstrap

Using a Custom Theme

• customized Bootstrap

When to Use the `public` Folder

• `App.js`

Adding Custom Environment Variables

Adding Development Environment Variables In `.env`

• dotenv documentation
• dotenv-expand

Using a Custom Theme

• exposing a private key on the machine that could have the same name

Adding Flow

Using a Custom Theme

• Flow
• `.flowconfig` file
• Nuclide
• its documentation
• introduction to using static types in JavaScript

Advanced Configuration

[Surge](https://surge.sh/)

• `NODE_PATH` in Node.js
• browser
• send a pull request to detect your editor of choice

Analyzing the Bundle Size

Progressive Web App Metadata

• Source map explorer

Available Scripts

`npm start`

• http://localhost:3000

Can I Use Decorators?

Adding Development Environment Variables In `.env`

• decorators
• #411

Changing the Page `<title>`

WebStorm

• `document.title` - helmet), a third party library.

Debugging in the Editor

Visual Studio Code

• troubleshooting guide
• VS Code - for-chrome) installed.

WebStorm

• WebStorm - ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed.

Debugging Tests

Debugging Tests in Visual Studio Code

• `launch.json`
• `launch.json`

Editor Integration

• Visual Studio Code

Deployment

[Azure](https://azure.microsoft.com/)

• this
• this - appservice-static) repo for a way to use automatic deployment to Azure App Service.

Building for Relative Paths

• here

[Firebase](https://firebase.google.com/)

• Firebase account
• Add Firebase to your JavaScript Project
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• issue #2440
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account
• Firebase account

[GitHub Pages](https://pages.github.com/)

• https://myusername.github.io/my-app
• Read more
• in this guide
• Personal Access Token

[Heroku](https://www.heroku.com/)

• Deploying React with Zero Configuration
• Heroku Buildpack for Create React App

[Netlify](https://www.netlify.com/)

• Start a new netlify project

[Now](https://zeit.co/now)

• this article.

[S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)

• blog post

Serving Apps with Client-Side Routing

• `pushState` history API - router) with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
• Apache HTTP Server

Static Server

• serve - por--port` flags.
• Node

[Surge](https://surge.sh/)

• ensures that every URL falls back to that file

Developing Components in Isolation

Debugging Tests in Visual Studio Code

• Storybook for React - styleguidist.js.org/) (source) to your project. These are third-party tools that let you develop components and see all their states in isolation from your app.

Getting Started with Storybook

• Snapshot Testing UI
• GitHub Repo
• Getting Started with React Storybook

Getting Started with Styleguidist

• GitHub Repo
• Documentation

Displaying Lint Output in the Editor

`npm run eject`

• Prettier

Fetching Data with AJAX Requests

Adding Development Environment Variables In `.env`

• here
• axios - US/docs/Web/API/Fetch_API) provided by the browser. Conveniently, Create React App includes a polyfill for fetch() so you can use it without worrying about the browser support.
• Promise polyfill - US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and fetch() use Promises under the hood. You can also use the async / await syntax to reduce the callback nesting.

Formatting Code Automatically

WebStorm

• blog post about lint-staged to learn more about it
• Editor Integration
• Prettier's GitHub page

Importing a Component

`DangerButton.js`

• Understanding ES6: Modules
• difference between default and named exports

Injecting Data from the Server into the Page

Configuring a WebSocket Proxy

• sanitize the JSON before sending it to the client

Integrating with an API Backend

Node

• this tutorial
• here

Ruby on Rails

• this tutorial
• here

Making a Progressive Web App

Getting Started with Styleguidist

• `sw-precache-webpack-plugin`
• Progressive Web App
• cache-first strategy

Offline-First Considerations

• not currently supported
• let the user know
• `runtimeCaching`
• with HTTP caching disabled
• does not apply to `localhost`

Post-Processing CSS

`Button.js`

• Autoprefixer

Pre-Rendering into Static HTML Files

Configuring a WebSocket Proxy

• react-snapshot - snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.
• zero-configuration pre-rendering (also called snapshotting) here

Proxying API Requests in Development

Configuring a WebSocket Proxy

• Socket.io
• ws - US/docs/Web/API/WebSocket).

Configuring the Proxy Manually

• `http-proxy-middleware` - proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.

"Invalid Host Header" Errors After Configuring Proxy

• this article - dev-server/issues/887).
• described here

Ruby on Rails

• here’s how to do it for Express
• CORS issues

Publishing Components to npm

Getting Started with Styleguidist

• nwb

Running Tests

Command Line Interface

• Jest watch mode

Configuring a WebSocket Proxy

• jsdom

Disabling jsdom

• `ReactDOM.render()`

Editor Integration

• VS Code Jest Preview

On CI servers

• Customize your Travis CI Build
• this article

On your own environment

• file an issue

Snapshot Testing

• Read more about snapshot testing.

Testing Components

• `react-testing-library` - to-end testing of React components and applications. It works more directly with DOM nodes, and therefore it's recommended to use with jest-dom for improved assertions.
• full rendering with `mount()`
• jest-enzyme - enzyme.

Using Third Party Assertion Libraries

• file those against Jest - printing React elements as JSX](https://github.com/facebook/jest/pull/1566).

Sending Feedback

• your feedback

Supported Language Features and Polyfills

`npm run eject`

• codemods
• polyfills
• `Promise`
• ES6
• Dynamic import()
• Class Fields and Static Properties
• Exponentiation Operator
• Async/await
• Object Rest/Spread Properties
• different proposal stages
• ...nonArrayValue
• `Object.assign()` - assign`](https://github.com/sindresorhus/object-assign).

Syntax Highlighting in the Editor

`npm run eject`

• relevant Babel documentation page

Troubleshooting

Moment.js locales are missing

• Moment.js - locale-support).

`npm run build` exits too early

• adding some swap space

`npm start` doesn’t detect changes

• “Adjusting Your Text Editor”
• Webpack watcher bug
• tweak system settings
• need to restart the watcher
• in this thread

`npm test` hangs on macOS Sierra

• facebook/watchman#358
• ember-cli/ember-cli#6259
• other installation methods
• Watchman - react-app#713](https://github.com/facebookincubator/create-react-app/issues/713).
• facebook/jest#1767

Updating to New Releases

• changelog

Using the `public` Folder

When to Use the `public` Folder

• `manifest.webmanifest`
• `pace.js`