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 Relay

Relay is a framework for building data-driven React applications powered by GraphQL. The current release of Relay works with Create React App projects out of the box using Babel Macros. Simply set up your project as laid out in the Relay documentation, then make sure you have a version of the babel plugin providing the macro.

To add it, run:

npm install --save babel-plugin-relay

Alternatively you may use yarn:

yarn add babel-plugin-relay

Then, wherever you use the graphql template tag, import the macro:

import graphql from 'babel-plugin-relay/macro';
// instead of:
//   import { graphql } from "babel-plugin-relay"

graphql`
  query UserQuery {
    viewer {
      id
    }
  }
`;

To learn more about Relay, check out its documentation.

Last updated on 2019-6-23 by Soufiane AIT AKKACHE
← Adding TypeScriptAdding a Router →
Create React App
Docs
Get StartedLearn React
Community
Stack OverflowSpectrumTwitterContributor Covenant
More
GitHubStar
Facebook Open Source
Copyright © 2019 Facebook Inc.