Create React App

Create React App

  • Docs
  • Help
  • GitHub

›Building your App

Welcome

  • About Docs

Getting Started

  • Getting Started
  • Folder Structure
  • Available Scripts
  • Supported Browsers and Features
  • Updating to New Releases

Development

  • Editor Setup
  • Developing Components in Isolation
  • Analyzing Bundle Size
  • HTTPS in Development

Styles and Assets

  • Adding Stylesheets
  • Adding CSS Modules
  • Adding Sass Stylesheets
  • Adding CSS Reset
  • Post-Processing CSS
  • Adding Images, Fonts, and Files
  • Loading .graphql Files
  • Using the Public Folder
  • Code Splitting

Building your App

  • Installing a Dependency
  • Importing a Component
  • Using Global Variables
  • Adding Bootstrap
  • Adding Flow
  • Adding TypeScript
  • Adding Relay
  • Adding a Router
  • Environment Variables
  • Making a Progressive Web App
  • Creating a Production Build

Testing

  • Running Tests
  • Debugging Tests

Back-End Integration

  • Proxying in Development
  • Fetching Data
  • Integrating with an API
  • Title & Meta Tags

Deployment

  • Deployment

Advanced Usage

  • Can I Use Decorators?
  • Pre-Rendering Static HTML
  • Advanced Configuration
  • Alternatives to Ejecting

Support

  • Troubleshooting
Edit

Adding Flow

Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.

Recent versions of Flow work with Create React App projects out of the box.

To add Flow to a Create React App project, follow these steps:

  1. Run npm install --save flow-bin (or yarn add flow-bin).
  2. Add "flow": "flow" to the scripts section of your package.json.
  3. Run npm run flow init (or yarn flow init) to create a .flowconfig file in the root directory.
  4. Add // @flow to any files you want to type check (for example, to src/App.js).

Now you can run npm run flow (or yarn flow) to check the files for type errors.
You can optionally enable an extension for your IDE, such as Flow Language Support for Visual Studio Code, or leverage the Language Server Protocol standard (e.g. vim LSP) to get hints while you type.

If you'd like to use absolute imports with Flow, make sure to add the following line to your .flowconfig to make Flow aware of it:

  [options]
+ module.name_mapper='^\(.*\)$' -> '<PROJECT_ROOT>/src/\1'

To learn more about Flow, check out its documentation.

Last updated on 2019-8-16 by Federico Zivolo
← Adding BootstrapAdding TypeScript →
Create React App
Docs
Get StartedLearn React
Community
Stack OverflowSpectrumTwitterContributor Covenant
More
GitHubStar
Facebook Open Source
Copyright © 2019 Facebook Inc.