mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-11 07:43:55 +08:00
85 lines
17 KiB
HTML
85 lines
17 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Developing Components in Isolation · Create React App</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Usually, in an app, you have a lot of UI components, and each of them has many different states."/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Developing Components in Isolation · 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="Usually, in an app, you have a lot of UI components, and each of them has many different states."/><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>Development</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 navListItemActive"><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"><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/developing-components-in-isolation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Developing Components in Isolation</h1></header><article><div><span><p>Usually, in an app, you have a lot of UI components, and each of them has many different states.
|
||
For an example, a simple button component could have the following states:</p>
|
||
<ul>
|
||
<li>In a regular state, with a text label.</li>
|
||
<li>In the disabled mode.</li>
|
||
<li>In a loading state.</li>
|
||
</ul>
|
||
<p>Usually, it’s hard to see these states without running a sample app or some examples.</p>
|
||
<p>Create React App doesn’t include any tools for this by default, but you can easily add <a href="https://storybook.js.org">Storybook for React</a> (<a href="https://github.com/storybooks/storybook">source</a>) or <a href="https://react-styleguidist.js.org/">React Styleguidist</a> (<a href="https://github.com/styleguidist/react-styleguidist">source</a>) to your project. <strong>These are third-party tools that let you develop components and see all their states in isolation from your app</strong>.</p>
|
||
<p><img src="http://i.imgur.com/7CIAWpB.gif" alt="Storybook for React Demo"></p>
|
||
<p>You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.</p>
|
||
<h2><a class="anchor" aria-hidden="true" id="getting-started-with-storybook"></a><a href="#getting-started-with-storybook" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting Started with Storybook</h2>
|
||
<p>Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.</p>
|
||
<p>First, install the following npm package globally:</p>
|
||
<pre><code class="hljs css language-sh">npm install -g @storybook/cli
|
||
</code></pre>
|
||
<p>Then, run the following command inside your app’s directory:</p>
|
||
<pre><code class="hljs css language-sh">getstorybook
|
||
</code></pre>
|
||
<p>After that, follow the instructions on the screen.</p>
|
||
<p>Learn more about React Storybook:</p>
|
||
<ul>
|
||
<li><a href="https://learnstorybook.com">Learn Storybook (tutorial)</a></li>
|
||
<li><a href="https://storybook.js.org/basics/introduction/">Documentation</a></li>
|
||
<li><a href="https://github.com/storybooks/storybook">GitHub Repo</a></li>
|
||
<li><a href="https://github.com/storybooks/storybook/tree/master/addons/storyshots">Snapshot Testing UI</a> with Storybook + addon/storyshot</li>
|
||
</ul>
|
||
<h2><a class="anchor" aria-hidden="true" id="getting-started-with-styleguidist"></a><a href="#getting-started-with-styleguidist" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting Started with Styleguidist</h2>
|
||
<p>Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground.</p>
|
||
<p>First, install Styleguidist:</p>
|
||
<pre><code class="hljs css language-sh">npm install --save react-styleguidist
|
||
</code></pre>
|
||
<p>Alternatively you may use <code>yarn</code>:</p>
|
||
<pre><code class="hljs css language-sh">yarn add react-styleguidist
|
||
</code></pre>
|
||
<p>Then, add these scripts to your <code>package.json</code>:</p>
|
||
<pre><code class="hljs css language-diff"> "scripts": {
|
||
<span class="hljs-addition">+ "styleguide": "styleguidist server",</span>
|
||
<span class="hljs-addition">+ "styleguide:build": "styleguidist build",</span>
|
||
"start": "react-scripts start",
|
||
</code></pre>
|
||
<p>Then, run the following command inside your app’s directory:</p>
|
||
<pre><code class="hljs css language-sh">npm run styleguide
|
||
</code></pre>
|
||
<p>After that, follow the instructions on the screen.</p>
|
||
<p>Learn more about React Styleguidist:</p>
|
||
<ul>
|
||
<li><a href="https://github.com/styleguidist/react-styleguidist">GitHub Repo</a></li>
|
||
<li><a href="https://react-styleguidist.js.org/docs/getting-started.html">Documentation</a></li>
|
||
</ul>
|
||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/create-react-app/docs/setting-up-your-editor"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/create-react-app/docs/analyzing-the-bundle-size"><span>Next</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav docOnPageNav"><ul class="toc-headings"><li><a href="#getting-started-with-storybook">Getting Started with Storybook</a></li><li><a href="#getting-started-with-styleguidist">Getting Started with Styleguidist</a></li></ul></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> |