mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-10 23:39:14 +08:00
56 lines
14 KiB
HTML
56 lines
14 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Adding Relay · Create React App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate 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](https://facebook.github.io/relay/), then make sure you have a version of the babel plugin providing the macro."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Adding Relay · Create React App"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/create-react-app/index.html"/><meta property="og:description" content="Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate 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](https://facebook.github.io/relay/), then make sure you have a version of the babel plugin providing the macro."/><meta property="og:image" content="https://facebook.github.io/create-react-app/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://facebook.github.io/create-react-app/img/logo-og.png"/><link rel="shortcut icon" href="/create-react-app/img/favicon/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/create-react-app/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/create-react-app/"><img class="logo" src="/create-react-app/img/logo.svg" alt="Create React App"/><h2 class="headerTitleWithLogo">Create React App</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/create-react-app/docs/getting-started" target="_self">Getting Started</a></li><li class=""><a href="https://reactjs.org/community/support.html" target="_self">Help</a></li><li class=""><a href="https://www.github.com/facebook/create-react-app" target="_self">GitHub</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Building your App</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Welcome</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/documentation-intro">About Docs</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/folder-structure">Folder Structure</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/available-scripts">Available Scripts</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/supported-browsers-features">Supported Browsers and Features</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/updating-to-new-releases">Updating to New Releases</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Development</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/setting-up-your-editor">Editor Setup</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/developing-components-in-isolation">Developing Components in Isolation</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/analyzing-the-bundle-size">Analyzing Bundle Size</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-https-in-development">HTTPS in Development</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Styles and Assets</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-stylesheet">Adding Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-css-modules-stylesheet">Adding CSS Modules</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-sass-stylesheet">Adding Sass Stylesheets</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/post-processing-css">Post-Processing CSS</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-images-fonts-and-files">Adding Images, Fonts, and Files</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-the-public-folder">Using the Public Folder</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/code-splitting">Code Splitting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Building your App</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/installing-a-dependency">Installing a Dependency</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/importing-a-component">Importing a Component</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/using-global-variables">Using Global Variables</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-bootstrap">Adding Bootstrap</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-flow">Adding Flow</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-typescript">Adding TypeScript</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/create-react-app/docs/adding-relay">Adding Relay</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-a-router">Adding a Router</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/adding-custom-environment-variables">Environment Variables</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/making-a-progressive-web-app">Making a Progressive Web App</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Testing</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/running-tests">Running Tests</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/debugging-tests">Debugging Tests</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Back-End Integration</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/proxying-api-requests-in-development">Proxying in Development</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/fetching-data-with-ajax-requests">Fetching Data</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/integrating-with-an-api-backend">Integrating with an API</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/title-and-meta-tags">Title & Meta Tags</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Deployment</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/deployment">Deployment</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced Usage</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/can-i-use-decorators">Can I Use Decorators?</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/pre-rendering-into-static-html-files">Pre-Rendering Static HTML</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/advanced-configuration">Advanced Configuration</a></li><li class="navListItem"><a class="navItem" href="/create-react-app/docs/alternatives-to-ejecting">Alternatives to Ejecting</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Support</h3><ul><li class="navListItem"><a class="navItem" href="/create-react-app/docs/troubleshooting">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
|
||
createToggler('#tocToggler', 'body', 'tocActive');
|
||
|
||
const headings = document.querySelector('.toc-headings');
|
||
headings && headings.addEventListener('click', function(event) {
|
||
if (event.target.tagName === 'A') {
|
||
document.body.classList.remove('tocActive');
|
||
}
|
||
}, false);
|
||
|
||
function createToggler(togglerSelector, targetSelector, className) {
|
||
var toggler = document.querySelector(togglerSelector);
|
||
var target = document.querySelector(targetSelector);
|
||
|
||
if (!toggler) {
|
||
return;
|
||
}
|
||
|
||
toggler.onclick = function(event) {
|
||
event.preventDefault();
|
||
|
||
target.classList.toggle(className);
|
||
};
|
||
}
|
||
});
|
||
</script></nav></div><div class="container mainContainer docMainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/create-react-app/edit/master/docusaurus/docs/adding-relay.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding Relay</h1></header><article><div><span><p>Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate 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 <a href="https://facebook.github.io/relay/">Relay documentation</a>, then make sure you have a version of the babel plugin providing the macro.</p>
|
||
<p>To add it, run:</p>
|
||
<pre><code class="hljs css language-sh">npm install --save babel-plugin-relay@dev
|
||
</code></pre>
|
||
<p>Alternatively you may use <code>yarn</code>:</p>
|
||
<pre><code class="hljs css language-sh">yarn upgrade babel-plugin-relay@dev
|
||
</code></pre>
|
||
<p>Then, wherever you use the <code>graphql</code> template tag, import the macro:</p>
|
||
<pre><code class="hljs css language-js"><span class="hljs-keyword">import</span> graphql <span class="hljs-keyword">from</span> <span class="hljs-string">'babel-plugin-relay/macro'</span>;
|
||
<span class="hljs-comment">// instead of:</span>
|
||
<span class="hljs-comment">// import { graphql } from "babel-plugin-relay"</span>
|
||
|
||
graphql<span class="hljs-string">`
|
||
query UserQuery {
|
||
viewer {
|
||
id
|
||
}
|
||
}
|
||
`</span>;
|
||
</code></pre>
|
||
<p>To learn more about Relay, check out <a href="https://facebook.github.io/relay/">its documentation</a>.</p>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/create-react-app/docs/adding-typescript"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/create-react-app/docs/adding-a-router"><span>Next</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav docOnPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/create-react-app/" class="nav-home"><img src="/create-react-app/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/create-react-app/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/react" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/create-react-app/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
var search = docsearch({
|
||
|
||
apiKey: '3be60f4f8ffc24c75da84857d6323791',
|
||
indexName: 'create-react-app',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |