Какие технологии используются в новой документации React?

внешний интерфейс React.js
Какие технологии используются в новой документации React?

предисловие

beta.reactjs.orgНовая документация React завершена на 70%, и сообщество призывает к переводу.

2022-01-13 19-03-51.2022-01-13 19_05_34.gifНовая документация с совершенно новой архитектуройnext.js + Tailwind CSS, Пересмотренный интерфейс документа имеет новый внешний вид, поддерживает темный режим, мы можем учиться онлайн и писать код, используя эту форму WYSIWYG, что значительно снижает стоимость обучения. Меня также привлекает эта форма Так глубоко привлекает, как это Форма WYSIWYG реализована?

основное введение

Новый адрес документа:GitHub.com/реагировать JS/Горячие…В бета-каталоге в , внешний код является текущим кодом документа, тогда мы можем напрямуюgit cloneи скопируйте содержимое каталога beta

Существуютyarn.lockфайлы, как и большинство следующих проектовyarn installПосле этого запуститеyarn devдля запуска среды разработки

s16501401132022

Скорость запуска очень высокая, всего 3,3 с, в открытом состоянии.http://localhost:3000, в настоящее время next.jsбудет компилироваться снова, вероятно200ms, это преимущество связано с преимуществом компиляции next.js по требованию, то есть при текущем запуске он не будет упаковывать весь сайт, а компилировать текущую страницу при входе на определенную страницу, поэтому скорость довольно быстро.

конвенционная маршрутизация

s16384301132022следующий — это обычный маршрут, а каталог в папке pages генерирует маршрут по умолчанию, т. е. '/src/pages/learn/add-react-to-a-website.md' генерирует маршруты/learn/add-react-to-a-website

В это время я обнаружил, что документы внутри были.mdсуффикс Markdown, может ли markdown также писать интерактивные функции?image.png

Открываем index.md, обнаруживаем, что код внутри не только markdown, но и react компоненты, то<HomepageHero />Как этот компонент анализируется в реагирующий компонент?

следующий поддерживает Markdown

первыйnext.jsне поддерживаетсяMarkdownДа, мы должны позволитьnext.jsслужба поддержкиMarkdown, мы открытыnext.jsфайл конфигурацииnext.config.js,

pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],

Давайте сначала поддержим форматы md и mdx, затем давайте посмотрим на конфигурацию части веб-пакета.

webpack: (config, {dev, isServer, ...options}) => {
    if (process.env.ANALYZE) {
        const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
        config.plugins.push(
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            reportFilename: options.isServer
            ? '../analyze/server.html'
            : './analyze/client.html',
        })
        );
    }

    // Add our custom markdown loader in order to support frontmatter
    // and layout
    config.module.rules.push({
        test: /.mdx?$/, // load both .md and .mdx files
        use: [
        options.defaultLoaders.babel,
        {
            loader: '@mdx-js/loader',
            options: {
            remarkPlugins,
            },
        },
        path.join(__dirname, './plugins/md-layout-loader'),
        ],
    });

    return config;
},

Во-первых, он устанавливается отдельноwebpack-bundle-analyzerЭто подключаемый модуль анализа пакетов, черезANALYZE=true next buildВы можете создать веб-страницу, которая анализирует, какие пакеты модулей включены

s16585001132022Подпакет next.js также идеален, каждый js примерно одинакового размера и загружается по запросу в соответствии со страницей. Следующая конфигурация предназначена для разбора уценки, пока это md, mdx пойдет@mdx-js/loader, Это оно@mdx-js/loaderСделать поддержку уценки jsx.

Сюда же добавлен пользовательский загрузчик

module.exports = async function (src) {
  const callback = this.async();
  const {content, data} = fm(src);
  const pageParentDir = path
    .dirname(path.relative('./src/pages', this.resourcePath))
    .split(path.sep)
    .shift();
  const layoutMap = {
    blog: 'Post',
    learn: 'Learn',
    reference: 'API',
  };
  const layout = layoutMap[pageParentDir] || 'Home';

  const code =
    `import withLayout from 'components/Layout/Layout${layout}';

export default withLayout(${JSON.stringify(data)})


` + content;

  return callback(null, code);
};

Судя по родительскому каталогу, автоматически добавляется макет.С макетом выходит структура, поэтому загрузчик веб-пакета — это функция, которая может напрямую изменять код.

MDX

MDXПусть уценка поддерживает jsx, давайте посмотрим, как ее использовать

import React from 'react';
import ReactDom from 'react-dom';
import Post from './post.mdx';
import {Heading, /* … */ Table} from './components/index.js';

const components = {
  h1: Heading.H1,
  // …
  table: Table,
};

ReactDom.render(
  <Post components={components} />,
  document.querySelector('#root')
);

Передайте пользовательские компоненты в компоненты, и вы сможете использовать их в уценке. Его также можно изменить на вложенный режим:

import React from 'react';
import ReactDom from 'react-dom';
import Post from './post.mdx';
import {Heading, /* … */ Table} from './components/index.js';
import {MDXProvider} from '@mdx-js/react';

const components = {
  h1: Heading.H1,
  // …
  table: Table,
};

ReactDom.render(
  <MDXProvider components={components}>
    <Post />
  </MDXProvider>,
  document.querySelector('#root')
);

онлайн-песочница

Существует также способ записи в документе, который можно напрямую отобразить на веб-странице.codesandbox.io/

И файл может ссылаться на файл, который больше похож на корову.

image.png

s18303801132022

Мы обнаружили, что пакет «@codesandbox/sandpack-react» используется в Sandpack, Открытьsandpack.codesandbox.io/Официальный сайт, в поле зрения попадают очень крутые эффекты

Онлайн-редактор кода можно визуализировать с помощью нескольких простых конфигураций.

<Sandpack
  customSetup={{ 
    dependencies: { 
      "react-markdown": "latest" 
    }, 
    files: {
      "/App.js": `import ReactMarkdown from 'react-markdown' 

export default function App() {
  return (
    <ReactMarkdown>
      # Hello, *world*!
    </ReactMarkdown>
  )
}`
    }
  }}
/>;

image.png

резюме

1. Мне нравится архитектура новой документации React, код и директория тоже очень понятные, что очень удобно для чтения.

2. Можно ли перенести некоторые документы нашей библиотеки компонентов на следующую архитектуру?

Я надеюсь, что эта статья будет вам полезна. Вы также можете обратиться к моим предыдущим статьям или поделиться своими мыслями и опытом в области комментариев. Добро пожаловать, чтобы вместе изучить внешний интерфейс.

Категории