mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
101 lines
3.2 KiB
Plaintext
101 lines
3.2 KiB
Plaintext
import Layout from 'lib/components/layout'
|
|
import { Note, Link, Code, Spacer, Tabs, Dot, Snippet, Grid } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'installation',
|
|
group: 'getting-started',
|
|
index: 10,
|
|
}
|
|
|
|
## Installation
|
|
|
|
### Setup
|
|
|
|
Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
|
|
and a package manager: <Link target="_blank" rel="nofollow" href="https://www.npmjs.com/">NPM</Link> or <Link target="_blank" rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>.
|
|
If you want to see a complete example, please browse our <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react/tree/master/examples">sample collection</Link>.
|
|
|
|
<Spacer y={1} />
|
|
<Dot type="success" /> 1. Run script to download:
|
|
<Spacer y={.8} />
|
|
<Tabs initialValue="yarn" hideDivider>
|
|
<Tabs.Item label="Yarn" value="yarn">
|
|
<Snippet width="400px">yarn add @zeit-ui/react</Snippet>
|
|
</Tabs.Item>
|
|
<Tabs.Item label="Npm" value="npm">
|
|
<Snippet width="400px">npm i @zeit-ui/react</Snippet>
|
|
</Tabs.Item>
|
|
</Tabs>
|
|
<Spacer y={1.5} />
|
|
<Dot type="success" /> 2. Import package to your project:
|
|
|
|
<Grid.Container>
|
|
<Grid xs={24} sm={16}>
|
|
|
|
```jsx
|
|
import { ZeitProvider, CssBaseline } from '@zeit-ui/react'
|
|
|
|
const Application = () => (
|
|
<ZeitProvider> // ---> Base provider
|
|
<CssBaseline /> // ---> normalize styles
|
|
<AppComponent /> // ---> Your App Component
|
|
</ZeitProvider>
|
|
)
|
|
```
|
|
|
|
</Grid>
|
|
</Grid.Container>
|
|
<Spacer y={.5} />
|
|
<Dot type="success" /> 3. Use the Zeit UI components anywhere:
|
|
|
|
<Grid.Container>
|
|
<Grid xs={24} sm={16}>
|
|
|
|
```jsx
|
|
import { Button } from '@zeit-ui/react'
|
|
|
|
const MyComponent = () => <Button>Click Me</Button>
|
|
```
|
|
|
|
</Grid>
|
|
</Grid.Container>
|
|
|
|
<Spacer y={1.5} />
|
|
|
|
### Single component
|
|
|
|
ZEIT UI supports importing single, specific components when you need them. This is referred to as `tree-shaking`.
|
|
|
|
E.g.
|
|
|
|
<Grid.Container>
|
|
<Grid xs={24} sm={16}>
|
|
|
|
```jsx
|
|
import Button from '@zeit-ui/react/esm/button'
|
|
|
|
const MyComponent = () => <Button>Click Me</Button>
|
|
```
|
|
|
|
</Grid>
|
|
</Grid.Container>
|
|
|
|
<Spacer y={1.5} />
|
|
|
|
### Create React App
|
|
|
|
A React project created by <Link color 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" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
|
|
sample project related to create react app here</Link>.
|
|
|
|
If you want to eject certain configs, `tree-shaking`, please refer to <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react/blob/master/examples/tree-shaking-create-react-app/README.md">this example</Link>.
|
|
|
|
<Spacer y={2.5} />
|
|
|
|
### Next.js
|
|
|
|
In the `next.js` project, you need to customize the <Link target="_blank" color rel="nofollow" href="https://nextjs.org/docs/advanced-features/custom-app">app.jsx</Link> entry file to load the provider.
|
|
Start your NextJS project with <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react/blob/master/examples/create-next-app/README.md">this example</Link>.
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|