Create react app 2.0: babel 7, sass, and more

CSS preprocessors

Многие пользуются LESS/SASS/Stylus/PostCSS для того, чтобы использовать переменные и микс-ины в своих стилях, так код получается чище и лаконичнее.


  • Electrode и Next.js ничего для этого не предоставляют, вы можете кастомизировать конфиг Webpack, но это крайне не рекомендуется
  • Create React App не поддерживает вовсе, и у них даже есть объяснение (TL;DR используйте композицию)
  • В кастомном проекте можно использовать обычные Webpack Loader’ы

В любом из кандидатов всегда можно создать отдельный процесс сборки/watch’а за стилями SASS/LESS, как например в Create React App, но полученный CSS нужно руками как-то подключать к приложению (в Create React App его можно импортировать напрямую). В этом случае Critical CSS и Hot Module Reloading, а также Server-Side Rendering стилей становится вашей заботой, что нивелирует преимущества не-кастомных решений.

Example with React App Framework

The second example uses to bootstrap the project, but with the modified .

Bootstrap the project with the command:

The structure of the source code, in this case, is a bit different from what generated before.

File structure:

Where:

  • — a directory that uses for component index files, Redux storage config, page and routes configuration.
  • — a directory with configuration files for Webcodesk, we don’t use it now, because we are going to do everything manually.
  • — a directory, where we keep our source code.

Add and source code into the folder in directory.

First, we should add our components into index files in the directory.

Go to the directory and create there the folder:

Then create the file inside this folder, and add the following lines:

import Form from 'usr/components/Form';
import TitlePanel from 'usr/components/TitlePanel';

export default { Form, TitlePanel };

Then add import into the index file in the parent directory ():

import components from './components';
export default {components};

Doing this we set up index files that tell where the React components are.

Now we should add components into the page. There is already a configuration for the page in the folder.

Open the file there and add the following code into it:

export default {
  type: '_div',
  props: {
    style: {
      width: '100%',
      height: '500px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
    }
  },
  children: 
    {
      type: 'usr.components.TitlePanel',
      instance: 'titlePanel',
    },
    {
      type: 'usr.components.Form',
      instance: 'form',
    }
  
};

This code tells to create a element with two children: and

Please note, that we specify kind of the full path to each component in the field. Also, there is an field that used to indicate the instance of the React component in the application.

However, for now, remember the instances names because we use them in the flow configuration.

Once we’ve changed the page config, we should create a function that is responsible for making greeting text.

Create the file in the folder and add the following code there:

export const makeGreetingText = (userName, {stateByDispatch, history}) => (dispatch) => {
  if (stateByDispatch) {
    const { props } = stateByDispatch;
    const newProps = {...props, greeting: userName ? `Hello, ${userName} !!!` : 'Hello, Noname !!!'};
    dispatch({props: newProps});
  }
};

As you might notice, the function is a chained function. This is done intentionally because the framework recognizes only such syntax of the function.

Another feature of the function is a argument in the second function in the chain. The is a callback method which is injected by the framework during the function execution.

The argument of the callback is the object with keys that serve as names for output payloads.

The function in is considered as a decoupled and independent component too. That’s why we have to add the function into index files in the directory in order the framework finds the function.

Go to the directory and create there new folder. Then create the file inside:

import { makeGreetingText } from 'usr/api/actions';
export default {makeGreetingText}

And import this file in the file in the parent directory ():

import api from './api';
export default {api};

It’s time to add the last piece of the application — a flow.

The flow is a description that shows how components, functions, and pages are connected in the application.

Find the file in directory. This is a sample flow config which we should replace with our configuration.

Replace the file content with the following code:

export default {
  type: 'component',
  props: { 'componentName': 'usr.components.Form', 'componentInstance': 'form' },
  events: {
    name: 'onClick',
    targets: {
      type: 'userFunction',
      props: { 'functionName': 'usr.api.makeGreetingText' },
      events: {
        name: 'greeting',
        targets: {
          type: 'component',
          props: {
            componentName: 'usr.components.TitlePanel',
            componentInstance: 'titlePanel'
          }
        }
      }
    }
  }
};

Where:

  • — the type of the section in the flow chain. It can be or

  • — the arbitrary information about the section.

  • — the event name by component’s function property or dispatch name.

  • — a list of the component instances or functions that receive data produced by the parent event.

Once we’ve added all configurations, we can start the development server:

Recommended Toolchains

The React team primarily recommends these solutions:

  • If you’re learning React or creating a new app, use .
  • If you’re building a server-rendered website with Node.js, try .
  • If you’re building a static content-oriented website, try .
  • If you’re building a component library or integrating with an existing codebase, try .

Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:


Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

When you’re ready to deploy to production, running will create an optimized build of your app in the folder. You can learn more about Create React App and the User Guide.

Next.js

Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box, and assumes that you’re using Node.js as the server environment.

Learn Next.js from its official guide.

Gatsby

Gatsby is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.

Learn Gatsby from its official guide and a gallery of starter kits.

More Flexible Toolchains

The following toolchains offer more flexibility and choice. We recommend them to more experienced users:

  • Neutrino combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.
  • Nx is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, Express, and more.
  • Parcel is a fast, zero configuration web application bundler that .
  • Razzle is a server-rendering framework that doesn’t require any configuration, but offers more flexibility than Next.js.

Server Side Rendering

Приложение может загрузить все необходимые данные и сгенерировать готовый HTML, который вместе с данными будет отдан клиенту, таким образом практически устраняется задержка между первоначальной загрузкой и моментом, когда хоть что-то появляется на сайте, хотя бы для просмотра. Про возможность всем этим пользоваться не говорим, это отдельная тема.

Google ранжирует сайты с помощью времени отклика в том числе. Не смотря на то, что поисковики умеют рендерить AJAX сайты, это плохо влияет на позицию, поэтому сайт обязан предоставлять некую версию, которую смогут переварить поисковики. С этим есть проблема, если мы захотим загрузить все данные, а не только основную контентную область, как дать понять серверному рендеру, что все загрузки закончены? Для этого пока нет сложившегося подхода. В кастомном варианте мы можем распарсить дерево компонентов и выдернуть из каждого, например, статический метод (по аналогии с Next.js), и когда все эти методы вернут свои значения, тогда и можно рендерить.

  • Create React App серверному рендерингу не обучен, и вряд ли когда-нибудь научится
  • У Next.js и Electrode это главная фишка
  • Если мы все строим с нуля (т.е. кастом) то и это придется построить тоже

Для того, чтобы компоненты сами могли сказать, что им нужно из данных, был придуман Relay + GraphQL, но минусы перевешивают его плюсы. Для него надо отдельный сервер. Он дико словоблуден (сама схема + мутации чудовищно громоздки). Сложность кода, который нужно написать для простейших действий практически убивает все бонусы. Объяснить это кому-то из команды с нуля тоже проблематично. К тому же потребуется специальный Babel трансформ, а также утилита для скачивания и компилиции схемы. А в результате все равно получится несовместимое с SEO нечто. Стоит признать, что если вы только потребляете существующий GraphQL API, то ситуация чуть получше. Это довольно многообещающая технология, хочется верить, что у ребят получится сделать ее более дружелюбной. Стоит еще отметить такую штуку как Apollo Framework.

Во время исследования я создал пару библиотек, которые могут помочь с Server Side Rendering:

  • Create React Server (для кастома)
  • Next.js and Redux

Недостатки CRA

  • При использовании CRA усложняется использование собственных конфигураций сборки проектов. Один из способов обхода этого ограничения заключается в использовании команды , но это лишает CRA-проекты преимущества в виде единственной зависимости сборки. Ещё один способ использования собственных конфигураций заключается в применении пакетов наподобие customize-cra или react-app-rewired, но подобные конфигурации отличаются ограниченными возможностями.
  • CRA скрывает от разработчика внутренние механизмы вспомогательных подсистем проектов. React-разработчик должен знать о том, что именно происходит в ходе подготовки React-приложения к реальной работе. Но так как в CRA используется уже не раз упомянутая «политика одной зависимости», у начинающего разработчика может возникнуть впечатление того, что — это единственная зависимость, которая нужна для запуска React-приложения. Начинающий может попросту не знать о том, что, на самом деле, — это, по сути, лишь «упаковка» для транспилятора (Babel) и бандлера (Webpack), которые играют ведущую роль в подготовке React-приложений к реальной работе. Я, признаться, и сам этого не знал до тех пор, пока не прочитал этот замечательный материал.
  • CRA, как мне кажется, перегружен возможностями, которые, в каком-то проекте, вполне могут оказаться невостребованными. Например, заготовки приложений, создаваемые с помощью CRA, поддерживают SASS. То есть, если в проекте используется обычный CSS или Less, поддержка SASS окажется совершенно ненужной. Вот, если интересно, файл CRA-приложения после команды . В этом файле «развёрнуты» зависимости, раньше представленные .

Breaking Changes

Here’s a short list of breaking changes in this release:

  • Node 6 is no longer supported.
  • Support for older browsers (such as IE 9 to IE 11) is now opt-in with a separate package.
  • Code-splitting with now behaves closer to specification, while is disabled.
  • The default Jest environment now includes jsdom.
  • Support for specifying an object as setting was replaced with support for a custom proxy module.
  • Support for extension was removed until the ecosystem around it stabilizes.
  • PropTypes definitions are automatically stripped out of the production builds.

If either of these points affects you, 2.0.3 release notes contain more detailed instructions.

Usage

Make sure your git working directory is clean before updating.

Inside your project directory, if you installed globally run

or the shorter

It applies a diff of the changes from the latest version to your project. It will only modify the files if there are changes between your project’s version and the latest version, and it will only change the section necessary, not the entire file.

You will probably encounter merge conflicts, in which the default behavior is to let you resolve conflicts on your own. You can supply the option to run your system’s git merge tool if any conflicts are found.

This tool can also run codemods for you. The option will figure out what codemods apply to your current version of React, and download and run them for you.

Кривая обучения в начале и в сложных случаях, сложность кастомизации, поддержка в будущем

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

Возможность кастомизировать что угодно тоже должна присутствовать, т.к. мы живем в реальной жизни и в ней что угодно может поменяться когда угодно, требования же не вечны. И очень не хотелось бы упереться в какое-то жесткое ограничение фреймворка.

  • Create React App самый простой для понимания в начале, но он вообще не дает никаких средств для модификации. Его исходный код довольно суров, поэтому если вы планируете сделать “eject” (то есть вынуть все скрипты для сборки, все конфиги и прочие кишки наружу), то лучше сразу откажитесь от этого направления в пользу кастома. В комплект поставки входит linter. Поскольку API вообще отсутствует, а количество соглашений минимально — апгрейды пройдут безболезненно.
  • Next.js заботится о некоторых аспектах, понимение того, как именно он это делает, потребует немного времени. Большинство простых кейсов имеют примеры, однако когда требуется что-то сложное или нестандартное — проще застрелиться, код превращается в кашу и сдабривается большим количеством шатких сторонних решений. По большому счету любой шаг в сторону грозит болью. Linter в комплект не входит. Схожая картина с апгрейдом, API минимален, соглашения легко соблюдать.
  • Поскольку Electrode сильно базируется на конфигурации и большинство скриптов открыты с самого начала, это вызывает легкий шок в начале, но как только вы со всем разберетесь — жить быстро станет проще. Таким образом для более сложных случаев вы будете лучше подготовлены. К сожалению, под капотом все равно происходит порядочное количество колдунства, поэтому совсем легко не будет никогда. В комплект входит отлично настроенный ESLint. Здесь с апгрейдом все похуже. Поскольку количество кишок, торчащих наружу, довольно велико, то шанс что-то сломать в будущем тоже велик.
  • В кастоме вы сами по себе. Как сделаете, так и будет. Сами ищете лучшие практики, сами подбираете решения, и так с начала и до последнего дня проекта. С агрейдом все вообще совсем плохо, что угодно может сломаться когда угодно.

Optional: Try React with JSX

In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display:

However, React also offers an option to use JSX instead:

These two code snippets are equivalent. While JSX is completely optional, many people find it helpful for writing UI code — both with React and with other libraries.

You can play with JSX using .

Quickly Try JSX

The quickest way to try JSX in your project is to add this tag to your page:

Now you can use JSX in any tag by adding attribute to it. Here is an example HTML file with JSX that you can download and play with.

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically.

Add JSX to a Project

Adding JSX to a project doesn’t require complicated tools like a bundler or a development server. Essentially, adding JSX is a lot like adding a CSS preprocessor. The only requirement is to have Node.js installed on your computer.

Go to your project folder in the terminal, and paste these two commands:

  1. Step 1: Run (if it fails, here’s a fix)
  2. Step 2: Run

Congratulations! You just added a production-ready JSX setup to your project.

Run JSX Preprocessor


Create a folder called and run this terminal command:

Don’t wait for it to finish — this command starts an automated watcher for JSX.

If you now create a file called with this JSX starter code, the watcher will create a preprocessed with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.

As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from its documentation.

If you notice that you’re getting comfortable with build tools and want them to do more for you, the next section describes some of the most popular and approachable toolchains. If not — those script tags will do just fine!

1.2.4 Добавление React в существующее приложение

Нет необходимости переписывать существующее приложение, чтобы начать использовать React. Вместо этого можно добавить React в маленькую часть существующего приложения, например, в какой-нибудь виджет. Таким образом, можно наблюдать за правильностью его работы.

React рекомендуется использовать вместе с инфраструктурой сборки проекта для повышения продуктивности разработки. Типичная современная инфраструктура сборки включает:

  • Менеджер пакетов, такой как

    Yarn или

    npm . Он позволяет получить преимущество огромной экосистемы сторонних пакетов, позволяющей устанавливать или обновлять их.

  • Сборщик. Например

    webpack ,

    Browserify или

    gulp . Он позволяет разбивать код на модули и затем связывать их в небольшие пакеты для оптимизации времени загрузки.

  • Компилятор. Такой как

    Babel . Он позволяет писать современный JS код, который будет работать в старых браузерах.

1.2.4.1 Установка React

Внимание!

Установив React, рекомендуется выставить production режим построения проекта. Это гарантирует использование быстрой версии React в production-версии проекта.

Для управления front-end зависимостями рекомендуется использовать

Yarn или

npm . Если вы впервые сталкиваетесь с такими инструментами, можете изучить соответствующие документации.

Для того, чтобы установить React с помощью Yarn, необходимо выполнить следующие команды в командной строке:

Код

Для того, чтобы установить React с помощью npm, необходимо выполнить:

Код

Данные менеджеры скачивают необходимые пакеты из

реестра npm .

Внимание!

Чтобы предотвратить потенциальные несовместимости, все React пакеты должны использовать одну и ту же версию. (Сюда входят , , и т.д.)

1.2.4.2 Возможность использования ES6 и JSX

Чтобы иметь возможность использовать в JS коде JSX и ES6, рекомендуется использовать Babel. ES6 содержит в себе множество современных JavaScript возможностей, которые упрощают разработку. В свою очередь JSX – это расширение языка JavaScript, которое работает с React и также упрощает разработку на нём.

Инструкции установки Babel объясняют как сконфигурировать этот компилятор в нескольких различных средах построения проекта. Убедитесь, что вы установили и и разрешили их в вашей

.babelrc конфигурации .

1.2.4.3 Hello World с ES6 и JSX

Рекомендуется использовать бандлер, такой как webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.

Наименьший пример кода на ReactJS выглядит примерно так:

Код

Данный код отрисовывается в DOM-элемент с атрибутом . Поэтому все, что необходимо сделать — это разместить где-нибудь в HTML-файле.

Таким же образом вы можете отрисовывать React-компонент внутри DOM-элемента где-нибудь внутри существующего приложения, написанного с помощью какой-либо другой JavaScript UI библиотеки.

Дополнительно об интеграции React с существующим кодом можно изучить

здесь .

1.2.4.4 Development и Production версии проекта

По умолчанию React содержит много полезных предупреждений, которые очень помогают в разработке.

Тем не менее, они делают development-версию React-проекта больше и медленнее. Поэтому для развертывания приложения на сервере следует использовать production-версию проекта.

Изучите как узнать использует ли ваше приложение правильную версию React и как сконфигурировать production-сборку наиболее эффективно:

1.2.4.5 Использование CDN

Если вы не хотите использовать npm для управления пакетами клиента, то и npm пакеты также предоставляют единые файлы-дистрибутивы в папках , которые размещены на CDN:

Код

Версии выше подходят только для разработки, но не для production-версии проекта. Минифицированные и оптимизированные production-версии React находятся здесь:

Код

Чтобы загрузить специфические версии и , нужно поменять на номер необходимой версии.

1.2.4.5.1 Что такое crossorigin атрибут?

Если вы подключаете React из CDN, разработчики рекомендуют установить значение атрибута :

Код

Также рекомендовано проверить, что используемый вами CDN устанавливает HTTP заголовок :

Это обеспечивает улучшенную

обработку ошибок в React , начиная с 16 версии.

What’s New

Here’s a short summary of what’s new in this release:

  • More styling options: you can use and out of the box.
  • We updated to Babel 7, including support for the and many bugfixes.
  • We updated to webpack 4, which automatically splits JS bundles more intelligently.
  • We updated to Jest 23, which includes an for reviewing snapshots.
  • We added so you can use new CSS features in old browsers.
  • You can use , , , and other third-party Babel Macros transforms.
  • You can now , and use it in JSX.
  • You can try the experimental Yarn Plug’n’Play mode that removes .
  • You can now in development to match your backend API.
  • You can now use without breaking the build.
  • ️ You can now optionally get a smaller CSS bundle if you only plan to target modern browsers.
  • Service workers are now opt-in and are built using Google’s Workbox.

All of these features work out of the box — to enable them, follow the below instructions.

Recommended Toolchains

The React team primarily recommends these solutions:

  • If you’re learning React or creating a new app, use .
  • If you’re building a server-rendered website with Node.js, try .
  • If you’re building a static content-oriented website, try .
  • If you’re building a component library or integrating with an existing codebase, try .

Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

When you’re ready to deploy to production, running will create an optimized build of your app in the folder. You can learn more about Create React App and the .

Next.js

Next.js is a popular and lightweight framework for static and server‑rendered applications built with React. It includes styling and routing solutions out of the box, and assumes that you’re using Node.js as the server environment.

Learn Next.js from its official guide.

Gatsby

Gatsby is the best way to create static websites with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.

Learn Gatsby from its official guide and a gallery of starter kits.

More Flexible Toolchains

The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:

  • Neutrino combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.

  • nwb is particularly great for . It for creating React apps, too.

  • Parcel is a fast, zero configuration web application bundler that .

  • Razzle is a server-rendering framework that doesn’t require any configuration, but offers more flexibility than Next.js.

TypeScript

TypeScript — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно .

Чтобы использовать TypeScript, нужно:

  • добавить TypeScript в проект как зависимость.
  • настроить компилятор.
  • использовать правильные расширения файлов.
  • установить файлы объявлений для используемых библиотек;

Остановимся подробнее на каждом из этих моментов.

Использование TypeScript вместе с Create React App

Create React App поддерживает TypeScript по умолчанию.

Чтобы создать новый проект с поддержкой TypeScript, используйте следующую команду:

Можно добавить поддержку TypeScript в уже существующий проект, как показано здесь.

Добавление TypeScript в проект

Всё начинается с одной единственной команды в терминале:

Или :

Ура! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — . Но прежде, чем праздновать, давайте добавим соответствующий скрипт в файл :

Настройка компилятора TypeScript


Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный конфигурационный файл . Создадим этот файл:

Или :

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

Из всех параметров больше всего сейчас нас интересуют и . Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам нужно, чтобы не возникло путаницы между исходными файлами и сгенерированным кодом.

Эту проблему можно решить в два шага:

Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию src.

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

Отлично! Теперь, если мы запустим скрипт сборки проекта, компилятор сохранит готовый JavaScript в директорию . В TypeScript React Starter уже есть готовый с неплохим набором параметров для дальнейшей тонкой настройки под себя.

Как правило, скомпилированный JavaScript-бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку в файл .

Расширения файлов

В React мы почти всегда используем в качестве расширений файлов компонентов. В TypeScript лучше разделять файлы на два типа:

для файлов, содержащих разметку , и  для всего остального.

Запуск TypeScript

Если всё было сделано правильно, можно попробовать скомпилировать TypeScript:

Или :

Если эта команда не вывела ничего в терминале, то процесс компиляции прошёл успешно.

Определения типов

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

Существует два основных способа получения файлов объявлений:

Bundled — Библиотека устанавливается вместе с собственным файлом объявлений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл объявлений, поищите в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в  в секциях или .

DefinitelyTyped — это внушительный репозиторий файлов объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно:

Локальные объявления Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл в корне директории, где лежат исходники вашего проекта. Файл объявлений может выглядеть примерно так:

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your module and automatically recompile it into whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the create-react-app that’s linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in or to the example app’s , will live-reload your local dev server so you can iterate on your component in real-time.

Publishing to npm

npm publish

This builds and versions of your module to and then publishes your module to .

Make sure that any npm modules you want as peer dependencies are properly marked as in . The rollup config will automatically recognize them as peers and not try to bundle them in your module.

Deploying to Github Pages

npm run deploy

This creates a production build of the example that showcases your library and then runs to deploy the resulting bundle.

Шаг 1: Разобьём интерфейс на составляющие

Первое, что нужно сделать — выделить отдельные компоненты (и подкомпоненты) в макете и дать им имена. Если вы работаете с дизайнерами, вполне возможно, что они уже как-то называют компоненты — вам стоит пообщаться! Например, слои Photoshop часто подсказывают имена для React-компонентов.

Но как узнать, что стоит делать отдельным компонентом, а что нет? Используйте тот же подход, как при решении создать простую функцию или целый объект. Можно применить принцип единственной ответственности: каждый компонент должен заниматься какой-то одной задачей. Если функциональность компонента увеличивается с течением времени, его следует разбить на более мелкие подкомпоненты.

Многие интерфейсы работают с моделью данных JSON. Поэтому хорошо построенная модель, как правило, уже отражает пользовательский интерфейс (а значит, и структуру компонентов). Интерфейс и модели данных часто имеют похожую информационную архитектуру, так что разделить интерфейс на части не составляет труда. Разбейте его на компоненты, каждый из которых отображает часть модели данных.

Здесь мы видим, что наше приложение состоит из пяти различных компонентов. Курсивом выделены данные, которые эти компоненты представляют.

  1. (оранжевый): контейнер, содержащий пример целиком
  2. (синий): поле пользовательского ввода
  3. (зелёный): отображает и фильтрует список данных, основанный на пользовательском вводе
  4. (голубой): наименования категорий
  5. (красный): отдельно взятый товар

Обратите внимание, что внутри заголовок таблицы («Name» и «Price») сам по себе отдельным компонентом не является. Отделять его или нет — вопрос личного предпочтения

В данном примере мы решили не придавать этому особого значения и оставить заголовок частью большего компонента , так как он является всего лишь малой частью общего списка данных. Тем не менее, если в будущем заголовок пополнится новыми функциями (например, возможностью сортировать товар), имеет смысл извлечь его в самостоятельный компонент .

Теперь, когда мы определили компоненты в нашем макете, давайте расположим их согласно иерархии. Компоненты, которые являются частью других компонентов, в иерархии отображаются как дочерние:


С этим читают