{"componentChunkName":"component---src-pages-get-started-develop-react-mdx","path":"/get-started/develop/react/","result":{"pageContext":{"frontmatter":{"title":"Develop","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"relativePagePath":"/get-started/develop/react.mdx","titleType":"prepend","MdxNode":{"id":"1aec3206-75eb-5a76-962a-8778926dd875","children":[],"parent":"599896e8-d4b7-57fa-bdeb-8c2e66dc2373","internal":{"content":"---\ntitle: Develop\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['React', 'Vanilla', 'Angular', 'Vue', 'Other frameworks']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Carbon React library</AnchorLink>\n<AnchorLink>Install</AnchorLink>\n<AnchorLink>Getting started</AnchorLink>\n<AnchorLink>Development</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Try React components with CodeSandbox.\"\n      href=\"https://codesandbox.io/s/x2mjypo6pp\">\n      <MdxIcon name=\"codesandbox\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon React library\n\nThe library provides front-end developers & engineers a collection of reusable React components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Install\n\n#### Using npm:\n\n<br />\n\n```bash\n$ npm install --save carbon-components-react carbon-components carbon-icons\n```\n\n#### If you prefer [Yarn](https://yarnpkg.com):\n\n<br />\n\n```bash\n$ yarn add carbon-components-react carbon-components carbon-icons\n```\n\n## Getting started\n\n1.  These components require the use of [webpack](https://webpack.js.org/guides/getting-started/) in your project. See our [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/webpack.config.js) for an example configuration.\n\n2.  Components do not import any of the styles themselves, use the SCSS or CSS from `carbon-components` to bring in styling. You can also use the `unpkg` CDN to bring in the styles wholesale - `unpkg.com/carbon-components/css/carbon-components.css` aliases the latest CSS file.\n\n3.  For older browsers (e.g. IE11), polyfills listed in the [carbon-components-react/.storybook/polyfills.js file](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/polyfills.js) are required.\n\n## Development\n\nPlease refer to the [Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md) before starting any work.\n\n### Using the server\n\nWe recommend the use of [React Storybook](https://github.com/storybooks/react-storybook) for developing components.\n\n#### Start the server:\n\n<br />\n\n```bash\n$ yarn storybook\n```\n\n2.  Open browser to `http://localhost:9000/`.\n\n3.  Develop components in their respective folders (`/components` or `/internal`).\n\n4.  Write stories for your components in `/.storybook`.\n\n### List of available components\n\nView available React Components [here](http://react.carbondesignsystem.com). Usage information is available when you click the blue \"Show Info\" button in the top right corner of the selected component.\n\n## Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components React, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon/tree/master/packages/react) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist.\n","type":"Mdx","contentDigest":"e94cde34c20b98e211d8b885a52fb9cc","counter":1641,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Develop","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Develop\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['React', 'Vanilla', 'Angular', 'Vue', 'Other frameworks']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Carbon React library</AnchorLink>\n<AnchorLink>Install</AnchorLink>\n<AnchorLink>Getting started</AnchorLink>\n<AnchorLink>Development</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n## Resources\n\n<Row>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Try React components with CodeSandbox.\"\n      href=\"https://codesandbox.io/s/x2mjypo6pp\">\n      <MdxIcon name=\"codesandbox\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n## Carbon React library\n\nThe library provides front-end developers & engineers a collection of reusable React components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Install\n\n#### Using npm:\n\n<br />\n\n```bash\n$ npm install --save carbon-components-react carbon-components carbon-icons\n```\n\n#### If you prefer [Yarn](https://yarnpkg.com):\n\n<br />\n\n```bash\n$ yarn add carbon-components-react carbon-components carbon-icons\n```\n\n## Getting started\n\n1.  These components require the use of [webpack](https://webpack.js.org/guides/getting-started/) in your project. See our [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/webpack.config.js) for an example configuration.\n\n2.  Components do not import any of the styles themselves, use the SCSS or CSS from `carbon-components` to bring in styling. You can also use the `unpkg` CDN to bring in the styles wholesale - `unpkg.com/carbon-components/css/carbon-components.css` aliases the latest CSS file.\n\n3.  For older browsers (e.g. IE11), polyfills listed in the [carbon-components-react/.storybook/polyfills.js file](https://github.com/carbon-design-system/carbon/blob/master/packages/react/.storybook/polyfills.js) are required.\n\n## Development\n\nPlease refer to the [Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/master/.github/CONTRIBUTING.md) before starting any work.\n\n### Using the server\n\nWe recommend the use of [React Storybook](https://github.com/storybooks/react-storybook) for developing components.\n\n#### Start the server:\n\n<br />\n\n```bash\n$ yarn storybook\n```\n\n2.  Open browser to `http://localhost:9000/`.\n\n3.  Develop components in their respective folders (`/components` or `/internal`).\n\n4.  Write stories for your components in `/.storybook`.\n\n### List of available components\n\nView available React Components [here](http://react.carbondesignsystem.com). Usage information is available when you click the blue \"Show Info\" button in the top right corner of the selected component.\n\n## Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components React, please head over to the [GitHub repo](https://github.com/carbon-design-system/carbon/tree/master/packages/react) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist.\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/get-started/develop/react.mdx"}}}}