mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-11 22:32:32 +08:00
70 lines
1.7 KiB
Plaintext
70 lines
1.7 KiB
Plaintext
import Layout from 'lib/components/layout'
|
|
import { Note, Link, Code, Spacer } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'installation',
|
|
description: 'description',
|
|
index: 10,
|
|
}
|
|
|
|
## Installation
|
|
|
|
### Install package
|
|
|
|
<Note>
|
|
Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
|
|
and also need a package manager of NodeJS: <Link href="https://www.npmjs.com/">NPM</Link> or <Link href="https://yarnpkg.com/">Yarn</Link>.
|
|
</Note>
|
|
|
|
1. Run script to download:
|
|
|
|
<Code bash darkBash>npm i @zeit-ui/react</Code>
|
|
|
|
2. Import `@zeit-ui/react` to your React project:
|
|
|
|
```jsx
|
|
import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
|
|
|
|
const Application = () => {
|
|
return (
|
|
<ZEITUIProvider> // ---> Base provider
|
|
<CSSBaseline /> // ---> normalize styles
|
|
<AppComponent /> // ---> Your App Component
|
|
</ZEITUIProvider>
|
|
)
|
|
}
|
|
```
|
|
|
|
3. Use Components in any where:
|
|
|
|
```jsx
|
|
import { Button } from '@zeit-ui/react'
|
|
|
|
const MyComponent = () => <Button>Click Me</Button>
|
|
```
|
|
|
|
<Spacer y={3} />
|
|
|
|
### Import a component
|
|
|
|
`@zeit-ui/react` supports import components when you actually need. e.g.:
|
|
|
|
```jsx
|
|
import { Button } from '@zeit-ui/react/components/button'
|
|
|
|
const MyComponent = () => <Button>Click Me</Button>
|
|
```
|
|
|
|
<Spacer y={3} />
|
|
|
|
### Create React App
|
|
|
|
A React project created by <Link target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
|
|
also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use.
|
|
|
|
We have <Link target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a sample project related to `create-react-app` here</Link>.
|
|
|
|
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|