kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-29 22:51:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #279 from jameesy/documentation

Browse Source 
docs: grammar updates to en-us guides
This commit is contained in:
witt
2020-06-19 21:44:43 +08:00
committed by GitHub
parent 393b46d413 c281f40100
commit 0e95e52e09
5 changed files with 26 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/en-us/guide/colors.mdx
View File

@@ -16,8 +16,8 @@ Default colors for themes.
### PRIMARY
You can use any color in any where, all colors change with the theme.
want to customize some colors? Read <NextLink href="/en-us/guide/themes"><Link color>Themes</Link></NextLink> to learn more.
You can use any color anywhere, all colors change with the theme.
If you want to customize your colors, please read <NextLink href="/en-us/guide/themes"><Link color>Themes</Link></NextLink> to learn more.
<Display width="90%" caption={<span>Get palette from <Code>useTheme</Code>.</span>}>

15
pages/en-us/guide/installation.mdx
View File

@@ -13,7 +13,7 @@ export const meta = {
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 browser our <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react/tree/master/examples">sample collection</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:
@@ -46,7 +46,7 @@ const Application = () => (
</Grid>
</Grid.Container>
<Spacer y={.5} />
<Dot type="success" /> 3. Use components in any where:
<Dot type="success" /> 3. Use the Zeit UI components anywhere:
<Grid.Container>
<Grid xs={24} sm={16}>
@@ -64,7 +64,7 @@ const MyComponent = () => <Button>Click Me</Button>
### Single component
ZEIT UI supports import components when you actually need.(`tree-shaking`)
ZEIT UI supports importing single, specific components when you need them. This is referred to as `tree-shaking`.
E.g.
@@ -85,17 +85,16 @@ const MyComponent = () => <Button>Click Me</Button>
### 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.
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>.
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 `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>.
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 provider.
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>

6
pages/en-us/guide/introduction.mdx
View File

@@ -14,8 +14,8 @@ export const meta = {
`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">styles</Link>
originating from <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel's design</Link>.
The design of the **Vercel** is concise and aesthetic feeling, this is an important reason for popular of Vercel.
Now you can use them at will in React.
The design of **Vercel** is concise and aesthetic, this is an important reason for popularity of Vercel.
Now you can implement the styles in your own React project.
ZEIT UI is an unofficial organization, all our projects are open source.
@@ -25,7 +25,7 @@ ZEIT UI is an unofficial organization, all our projects are open source.
- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
- Welcome share your feedback and ideas. We also love PRs.
- We welcome feedback and ideas. We also love PRs.
<Spacer y={3} />

19
pages/en-us/guide/server-render.mdx
View File

@@ -15,21 +15,18 @@ export const meta = {
All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
<Note label="readme">
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>a SPA application</Link>?
It is recommended to skip this section.
If you are looking to build a SPA <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>(single page application)</Link>,
please feel free to skip this section.
</Note>
<Spacer y={.5} />
Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
Read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
If you are concerned about losing the advantages of a Single Page Application by implementing server-side rendering, you can use the `hybrid render` application.
Plese read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
the post from the Next.js team</Link> to learn more.
<Text>In addition, for <Text b>server-side render</Text> and web applications,
we strongly recommend that you read this famous post
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
7-principles-of-rich-web-applications
</Link> from <Text em>Guillermo Rauch</Text>.
we strongly recommend that you read this famous post <Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">7-principles-of-rich-web-applications</Link> from <Text em>Guillermo Rauch</Text>.
</Text>
<Spacer y={2.5} />
@@ -40,7 +37,7 @@ In `next.js` framework, you need customization file `_document.js`,
please refer to <Link href="https://nextjs.org/docs/advanced-features/custom-document" rel="nofollow">Next.js document here</Link>
to create file `_document.js`.
Then we add the following codes to the file:
Then we add the following code to the file:
```js
import Document, { Html, Head, Main, NextScript } from 'next/document'
@@ -66,13 +63,13 @@ class MyDocument extends Document {
}
```
Here's an examples that might help you: <Link href="https://github.com/unix/unix.bio/blob/template/pages/_document.jsx" rel="nofollow">_document.jsx</Link>.
Here's an example of what your `_document.js` file should look like: <Link href="https://github.com/unix/unix.bio/blob/template/pages/_document.jsx" rel="nofollow">_document.jsx</Link>.
<Spacer y={3} />
### Custom Server
In the custom server, also get the style set from function `CssBaseline.flush`.
In the custom server, also get the style set from function `CssBaseline.flush` as shown below.
```js
import React from 'react'

12
pages/en-us/guide/themes.mdx
View File

@@ -8,7 +8,7 @@ export const meta = {
## Themes
`@zeit-ui/react` support **Dark Mode** now. You can switch theme at any time through a very simple API, no third-party styles or configs.
`@zeit-ui/react` now support **Dark Mode**. You can switch theme at any time through a very simple API, no third-party styles or configs.
<Spacer y={2} />
@@ -48,14 +48,14 @@ const App = () => {
### Customizing theme
Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
Customizing a theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
and all the components will change automatically.
Here is <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
Of course, if a *component* doesn't use your customized variables, it doesn't make any additional **changes** or **rendering**.
<Spacer y={1} />
<Note type="warning">The more changes you custom, the more Components <b>Re-Render</b>.</Note>
<Note type="warning">The more changes you customise, the more Components will <b>Re-Render</b>.</Note>
```jsx
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
@@ -103,7 +103,7 @@ If you don't use TypeScript, to learn more about preset types, see <Link color t
#### Overriding styles with `className`
You can override the style by define any `className` on the component
You can override the style by defining a `className` on the component.
```jsx
import { Button, Row } from '@zeit-ui/react'
@@ -124,7 +124,7 @@ const MyPage = () => (
#### Overriding styles with `inline-style`
Any `inline-style` works correctly on the component.
Defining an `inline-style` will also correctly override the component.
```jsx
const MyPage = () => (