本站点支持组件

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

Note

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

写在前面:

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

APIAnatomy

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

The UI you want to render.

2
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

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

使用方式:

<DeepDive title="React without JSX">

...content of any mdx

</DeepDive>

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

Gotcha

Gotcha

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

使用方式:

<Gotcha>

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

</Gotcha>

IllustrationBlock & Illustration

  1. React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen.
    Trigger
  2. The Card Chef gives React a fresh Card component.
    Render
  3. React delivers the Card to the user at their table.
    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.

Read More

使用方式:

<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

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

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

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.

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

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里面有用。

Follow Me

Jokcy的二维码