本站点支持组件

更新于：2021-12-05

本站点源自于 React 的新官网，起技术栈就是`nextjs` + `mdx`，利用 markdown 方便的文档组织能力，加上 mdx 可以随意扩展组件的能力，让一个文档形式的网站显得不局限于纯文本说明。React 团队在这上面积累了很多组件，有利于未来我使用进行辅助讲解，本文进行记录和展示，也便于未来自己查看。

Note

本站点包含很多可实时运行的Demo，在PC端阅读将获得更好的体验！

写在前面：

本站点源自于 React 的新官网，起技术栈就是nextjs + mdx，利用 markdown 方便的文档组织能力，加上 mdx 可以随意扩展组件的能力，让一个文档形式的网站显得不局限于纯文本说明。React 团队在这上面积累了很多组件，有利于未来我使用进行辅助讲解，本文进行记录和展示，也便于未来自己查看。

APIAnatomy

const container = document.getElementById('root');
render(<App />, container);

React element

The UI you want to render.

DOM container

The DOM node you want to render your UI into. The container itself isn’t modified, only its children are.

使用方式：

<APIAnatomy>

<AnatomyStep title="React element">

The UI you want to render.

</AnatomyStep>

<AnatomyStep title="DOM container">

The DOM node you want to render your UI into. The container itself isn’t modified, only its children are.

</AnatomyStep>

```js inlineHighlights={[[1, 2, "<App />"], [2, 2, "container"]]}
const container = document.getElementById('root');
render(<App />, container);
```

</APIAnatomy>

AnatomyStep 的内容会展示在左侧，而最后的 code block 上方的 meta 内容，标志了哪些点需要标记序号。

CodeDiagram

FilterableProductTable (grey) contains the entire app.
SearchBar (blue) receives the user input.
ProductTable (lavender) displays and filters the list according to the user input.
ProductCategoryRow (green) displays a heading for each category.
ProductRow (yellow) displays a row for each product.

使用方式：

<CodeDiagram flip>

<img src="/images/docs/s_thinking-in-react_ui_outline.png" width="500" style={{margin: '0 auto'}} />

1. `FilterableProductTable` (grey) contains the entire app.
2. `SearchBar` (blue) receives the user input.
3. `ProductTable` (lavender) displays and filters the list according to the user input.
4. `ProductCategoryRow` (green) displays a heading for each category.
5. `ProductRow` (yellow) displays a row for each product.

</CodeDiagram>

奇石就是一个左右布局的组件。

ConsoleBlock

展示：

Console

Warning: Each child in a list should have a unique “key” prop.

使用方式：

<ConsoleBlock level="error">
  Warning: Each child in a list should have a unique "key" prop.
</ConsoleBlock>

一个命令行样式的组件

DeepDive

Deep Dive

React without JSX

Originally JSX was introduced to make writing components with React feel as familiar as writing HTML. Since then, the syntax has become widespread. However, there may be instances where you do not want to use or cannot use JSX. You have two options:

Use a JSX alternative like htm which doesn’t use a compiler—it uses JavaScript’s native Tagged Templates.
Use React.createElement(), which has a special structure explained below.

With JSX, you would write a component like so:

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

ReactDOM.render(<Hello toWhat="World" />, document.getElementById('root'));

With React.createElement(), you would write it like this:

function Hello(props) {
  return React.createElement(
    'div',
    null,
    `Hello ${props.toWhat}asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd`
  );
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

It accepts three arguments: React.createElement(component, props, children). Here’s how they work:

A component, which can be a string representing an HTML element or a function component
An object of any props you want to pass
An object of any children the component might have, such as text strings

If you get tired of typing React.createElement(), one common pattern is to assign a shorthand:

const e = React.createElement;

ReactDOM.render(e('div', null, 'Hello World'), document.getElementById('root'));

If you use this shorthand form for React.createElement(), it can be almost as convenient to use React without JSX.

使用方式：

<DeepDive title="React without JSX">

...content of any mdx

</DeepDive>

主要就是把一部分并不是主要的内容，衍生阅读放在这里面，默认收起，有兴趣再点开阅读.

Gotcha

一些非常容易出错的用法或者问题可以放在这里，是一个高亮区域吸引读者的注意力。

使用方式：

<Gotcha>

一些非常容易出错的用法或者问题可以放在这里，是一个高亮区域吸引读者的注意力。

</Gotcha>

IllustrationBlock & Illustration

Trigger
Render
Commit

Intro

React has a community of millions of developers. On this page we’ve listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.

使用方式：

<Intro>

React has a community of millions of developers. On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials.

</Intro>

特定样式的组件

LearnMore

Ready to learn this topic?

Read Responding to Events to learn how to add event handlers.

使用方式：

<LearnMore path="/learn/responding-to-events">
  Read **[Responding to Events](/learn/responding-to-events)** to learn how to
  add event handlers.
</LearnMore>

多了一个Read More > Button。

Math & MathI

y = 2x.

使用方式：

<Math>
  <MathI>y</MathI> = 2<MathI>x</MathI>
</Math>

显示数学公式更好的样式。

Note

You may encounter files that leave off the .js file extension like so:

import Gallery from './Gallery';

Either './Gallery.js' or './Gallery' will work with React, though the former is closer to how native ES Modules work.

使用方式：

<Note>

You may encounter files that leave off the `.js` file extension like so:

```js
import Gallery from './Gallery';
```

Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.

</Note>

提醒的样式

PackageImport & TerminalBlock

Terminal

npm install react

// Importing a specific API:
import {useState} from 'react';

// Importing all APIs together:
import * as React from 'react';

使用方式：

<PackageImport>

<TerminalBlock>

npm install react

</TerminalBlock>

```js
// Importing a specific API:
import {useState} from 'react';

// Importing all APIs together:
import * as React from 'react';
```

</PackageImport>

专门为了安装增加 Terminal 样式，以及左右分栏。

Recap

If two state variables always update together, consider merging them into one.
Choose your state variables carefully to avoid creating “impossible” states.
Structure your state in a way that reduces the chances that you’ll make a mistake updating it.
Avoid redundant and duplicate state so that you don’t need to keep it in sync.
Don’t put props into state unless you specifically want to prevent updates.
For UI patterns like selection, keep ID or index in state instead of the object itself.
If updating deeply nested state is cumbersome, try flattening it.

使用方式：

<Recap>

- If two state variables always update together, consider merging them into one.
- Choose your state variables carefully to avoid creating "impossible" states.
- Structure your state in a way that reduces the chances that you'll make a mistake updating it.
- Avoid redundant and duplicate state so that you don't need to keep it in sync.
- Don't put props _into_ state unless you specifically want to prevent updates.
- For UI patterns like selection, keep ID or index in state instead of the object itself.
- If updating deeply nested state is cumbersome, try flattening it.

</Recap>

增加了Recap header 的列表。。。

Sandpack

Fork Fork

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({onPlayMovie, onUploadImage}) {
  return (
    <div>
      <Button onClick={onPlayMovie}>Play Movie</Button>
      <Button onClick={onUploadImage}>Upload Image</Button>
    </div>
  );
}

function Button({onClick, children}) {
  return <button onClick={onClick}>{children}</button>;
}

看不到代码运行结果？点这里

一个快捷的 codesandbox wrapper。

YouWillLearn

你会学到

<YouWillLearn>

- [How to handle user-initiated events](/learn/responding-to-events)
- [How to make components "remember" information with state](/learn/state-a-components-memory)
- ...

</YouWillLearn>

一个用于在文章开头展示列表的组件，一个概览。

YouWillLearnCard

This is title

list1
list2

Just like LearnMore, 可能不需要用这个

Challenges & Hint & Solution

Try out some challenges

Challenge 1 of 2:
Fix a component that’s not updating

This Clock component receives two props: color and time. When you select a different color in the select box, the Clock component receives a different color prop from its parent component. However, for some reason, the displayed color doesn’t update. Why? Fix the problem.

Fork Fork

import {useState} from 'react';

export default function Clock(props) {
  const [color, setColor] = useState(props.color);
  return <h1 style={{color: color}}>{props.time}</h1>;
}

看不到代码运行结果？点这里

Recipes

Try out some recipes

Recipe 1 of 2:
Image gallery

Fork Fork

import {useState} from 'react';
import {sculptureList} from './data.js';

export default function Gallery() {
  const [index, setIndex] = useState(0);
  const [showMore, setShowMore] = useState(false);

  let hasPrev = index > 0;
  let hasNext = index < sculptureList.length - 1;

  function handlePrevClick() {
    if (hasPrev) {
      setIndex(index - 1);
    }
  }

  function handleNextClick() {
    if (hasNext) {
      setIndex(index + 1);
    }
  }

  function handleMoreClick() {
    setShowMore(!showMore);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handlePrevClick} disabled={!hasPrev}>
        Previous
      </button>
      <button onClick={handleNextClick} disabled={!hasNext}>
        Next
      </button>
      <h2>
        <i>{sculpture.name} </i>
        by {sculpture.artist}
      </h2>
      <h3>
        ({index + 1} of {sculptureList.length})
      </h3>
      <button onClick={handleMoreClick}>
        {showMore ? 'Hide' : 'Show'} details
      </button>
      {showMore && <p>{sculpture.description}</p>}
      <img src={sculpture.url} alt={sculpture.alt} />
    </>
  );
}

看不到代码运行结果？点这里

使用方式：

<Recipes>
  <Sandpack>code here</Sandpack>

  <Solution />
</Recipes>

体量较大展示不了。一个分 tab 的代码展示工具，在这里Solution没什么用，在Challenges里面有用。

Previous来自React新官网的灵感

Follow Me

本站点支持组件

Note

APIAnatomy

CodeDiagram

ConsoleBlock

DeepDive

Deep Dive

React without JSX

Gotcha

Gotcha

IllustrationBlock & Illustration

Intro

LearnMore

Ready to learn this topic?

Math & MathI

Note

Note

PackageImport & TerminalBlock

Recap

Sandpack

YouWillLearn

你会学到

YouWillLearnCard

This is title

Challenges & Hint & Solution

Try out some challenges

Challenge 1 of 2: Fix a component that’s not updating

Recipes

Try out some recipes

Recipe 1 of 2: Image gallery

Challenge 1 of 2:
Fix a component that’s not updating

Recipe 1 of 2:
Image gallery