Skip to content

Commit

Permalink
docs(react): update README
Browse files Browse the repository at this point in the history
  • Loading branch information
joshblack committed Nov 5, 2020
1 parent 5232228 commit c3f6b90
Showing 1 changed file with 52 additions and 50 deletions.
102 changes: 52 additions & 50 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,81 @@

> A collection of
> [Carbon Components](https://github.com/carbon-design-system/carbon/tree/master/packages/components)
> implemented using [React](https://reactjs.org/).
> built with [React](https://reactjs.org/).
### Getting Started
**New to React or Carbon?**

**You are new to React or to the carbon ecosystem?** Read this short tutorial to get started: [https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e](https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e)
Read this short guide to get started:
[https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e](https://medium.com/carbondesign/up-running-with-carbon-react-in-less-than-5-minutes-25d43cca059e)

**You are already familiar with React?**
Run the following command using [npm](https://www.npmjs.com/):
## Getting Started

To install `carbon-components-react` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):

```bash
npm install -S carbon-components-react carbon-components carbon-icons
npm install -S carbon-components carbon-components-react carbon-ison
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:

```bash
yarn add carbon-components-react carbon-components carbon-icons
yarn add carbon-components carbon-components-react carbon-ison
```

1. These components require the use of
[Webpack](http://webpack.github.io/docs/tutorials/getting-started/) in your
project. See our
[`webpack.config.js`](/packages/react/.storybook/webpack.config.js) for an
example configuration.

2. 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.

3. For older browsers (e.g. IE11), polyfills listed in
[`carbon-components-react/.storybook/polyfills.js` file](./.storybook/polyfills.js)
is required.

If you only want to try out `carbon-components-react`, you can also use
If you want to try out `carbon-components-react`, you can also use
[CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox).

[![Edit carbon-components-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox)

## Usage

### List of Available Components

View available React Components [here](http://react.carbondesignsystem.com). You
can see usage information in several ways:

1. Clicking the blue **Show Info** icon in the top right corner of the selected
component. You can see the list of available React props
2. Clicking the **STORY** tab at the bottom. This tab contains the code that
shows how the component is being used
3. Clicking the **KNOBS** tab at the bottom and changing values there. Most
knobs are shown as something like `Button kind (kind)`, where `kind` is the
name of React prop
4. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the
selected component. You may see something like `onClick` which typically
indicates that the event handler (React prop) with the same name is called.
You can also expand the twistie to see the details of the event
5. Clicking the **README** tab at the bottom. You can see some more document for
some components
You can view available components that you can bring into your project over on
our [Storybook](https://react.carbondesignsystem.com) or our
[Website](https://www.carbondesignsystem.com/components/overview).

With storybook, each component will have documentation and prop information to
help you with importing and using the component. For example, to use a `Button`
component you will import it from `carbon-components-react`:

```js
import { Button } from 'carbon-components-react';

function MyComponent() {
return <Button>Example usage</Button>;
}
```

For more information about each component, check-out our
[Storybook](https://react.carbondesignsystem.com). For guides on getting
started, head on over to our
[Website](https://www.carbondesignsystem.com/get-started/develop/react) or check
out our
[Tutorial](https://www.carbondesignsystem.com/developing/react-tutorial/overview/)

# :books: Documentation

- See our
[documentation site](https://www.carbondesignsystem.com/get-started/develop/react)
for full how-to docs and guidelines
- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions
to this repo
- [Storybook](https://react.carbondesignsystem.com)
- [Getting started](https://www.carbondesignsystem.com/get-started/develop/react)
- [πŸƒβ€β™€οΈ Migration Guides](./docs/migration)
- [v6 to v7](./docs/migration/migrate-to-7.x.md)

## Contributing
## πŸ“š Examples

This comment has been minimized.

Copy link
@rodet

rodet Nov 7, 2020

Contributor

I would put the examples more above, for example at the end of Getting Started


If you're looking for more examples on how to use `carbon-components-react`, we
have some examples that you can check out:

- [Create React App](./examples/create-react-app)
- [Next.js](./examples/next)
- [React Router](./examples/react-router)

## πŸ™Œ Contributing

This comment has been minimized.

Copy link
@rodet

rodet Nov 7, 2020

Contributor

Love that


We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! πŸ‘€

## πŸ“ License

Please check out our [Contribution Guidelines](/.github/CONTRIBUTING.md) for
detailed information on how you can lend a hand.
Licensed under the [Apache 2.0 License](/LICENSE).

0 comments on commit c3f6b90

Please sign in to comment.