Create basic login forms using create react app module in reactjs

Дополнительные хуки

Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Их не требуется основательно изучать заранее.

Альтернатива для . Принимает редюсер типа и возвращает текущее состояние в паре с методом . (Если вы знакомы с Redux, вы уже знаете, как это работает.)

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

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

Указание начального состояния

Существует два разных способа инициализации состояния . Вы можете выбрать любой из них в зависимости от ситуации. Самый простой способ — передать начальное состояние в качестве второго аргумента:

Ленивая инициализация

Вы также можете создать начальное состояние лениво. Для этого вы можете передать функцию в качестве третьего аргумента. Начальное состояние будет установлено равным результату вызова .

Это позволяет извлечь логику для расчёта начального состояния за пределы редюсера. Это также удобно для сброса состояния позже в ответ на действие:

Досрочное прекращение

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

Обратите внимание, что для React всё ещё может быть необходим повторный рендер этого компонента. Это не должно быть проблемой, потому что React не будет сильно «углубляться» в дерево

Если вы делаете дорогостоящие вычисления во время рендеринга, вы можете оптимизировать их с помощью .

Возвращает мемоизированный колбэк.

Передайте встроенный колбэк и массив зависимостей. Хук вернёт мемоизированную версию колбэка, который изменяется только, если изменяются значения одной из зависимостей. Это полезно при передаче колбэков оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, ).

 — это эквивалент .

Возвращает мемоизированное значение.

Передайте «создающую» функцию и массив зависимостей. будет повторно вычислять мемоизированное значение только тогда, когда значение какой-либо из зависимостей изменилось. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере.

Помните, что функция, переданная , запускается во время рендеринга. Не делайте там ничего, что вы обычно не делаете во время рендеринга. Например, побочные эффекты принадлежат , а не .

Если массив не был передан, новое значение будет вычисляться при каждом рендере.

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

возвращает изменяемый ref-объект, свойство которого инициализируется переданным аргументом (). Возвращённый объект будет сохраняться в течение всего времени жизни компонента.

Обычный случай использования — это доступ к потомку в императивном стиле:

По сути, похож на «коробку», которая может содержать изменяемое значение в своём свойстве .

Возможно, вы знакомы с рефами в основном как со способом получить доступ к DOM. Если вы передадите React объект рефа с помощью подобного выражения

The Power Of Not Mutating Data

The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the method above could be rewritten using as:

ES6 supports a spread syntax for arrays which can make this easier. If you’re using Create React App, this syntax is available by default.

You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let’s say we have an object named and we want to write a function that changes to be . We could write:

To write this without mutating the original object, we can use Object.assign method:

now returns a new object, rather than mutating the old one. is in ES6 and requires a polyfill.

There is a JavaScript proposal to add object spread properties to make it easier to update objects without mutation as well:

If you’re using Create React App, both and the object spread syntax are available by default.

When you deal with deeply nested objects, updating them in an immutable way can feel convoluted. If you run into this problem, check out Immer or immutability-helper. These libraries let you write highly readable code without losing the benefits of immutability.

React Scripts Versions

This is not documented yet. More info at Maintaining a fork of react-scripts as an alternative to ejecting #682

  • React Super Scripts — Adds super powers to create-react-app and allows custom configs without ejecting.
  • React Scripts (Isomorphic) — Provides configuration for FLM’s isomorphic React apps.
  • Create React App Sass — Enhances create-react-app to include support for Sass.
  • Typescript React Starter — CRA scripts version maintained by Microsoft’s team to start apps with Typescript.
  • React Scripts Web — React-scripts built using create-react-scripts, supports workbox(PWA), vendorDll, babelrc and eslintrc.
  • React Scripts With SSR — Adds server-side rendering to create-react-app projects.

Свойства экземпляра

содержит свойства, которые были определены тем, кто вызывает этот компонент. Подробнее об этом можно узнать в разделе Компоненты и пропсы

Существует специальный проп , который обычно определяется дочерними тегами в JSX-выражении, а не в самом теге.

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

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

Дополнительную информацию можно найти в разделе Состояние и жизненный цикл.

Никогда не мутируйте напрямую, так как более поздний вызов может перезаписать эту мутацию. Относитесь к  как к иммутабельному объекту.

Next: Code splitting

Having just one huge js bundle with everything contained in your app still sucks! You have to download an entire file with all the parts of your app, even if your initial render is small and will only use a couple of components. A better approach is to only load what the user will need immediately, then lazy-load other parts of the app as they are required. So let’s split!

As described in the , CRA offers support for code splitting, using dynamic imports. There’s also an extensive post on how to create async components in a CRA project. But more conveniently, we can use a higher order component that will simplify our work: react-loadable.

Let’s create /src/SomeComponent.js in our CRA app:

Now let’s make this component async by importing it with react-loadable in our main App.js:

I encourage you to read the react-loadable documentation, as it packs a lot of features, yet keeping the simplicity you see above.

That’s it! Now your app will load the SomeComponent module when your AsyncComponent will render. The block in the prop is what gets rendered while the required chunk is downloaded from the server and parsed.

Notice that CRA created a new file called 0..chunk.js.

If you run the app now with yarn start, you’ll see just the main bundle being loaded. After the initial render, another request will retrieve our new chunk. A loading… message is displayed until the file is downloaded and parsed.

Flow

Flow — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React-компонентов. Ознакомиться с основами Flow можно на странице официальной документации.

Чтобы начать пользоваться возможностями Flow необходимо:

  • добавить Flow в ваш проект как зависимость.
  • убедиться, что аннотации Flow удаляются из кода при его компиляции.
  • добавить несколько аннотаций типов и запустить Flow для их проверки;

Рассмотрим подробнее каждый из этих шагов.

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

Убедитесь, что вы находитесь в директории проекта, после чего запустите одну из следующих команд:

Если вы используете Yarn:

Если вы используете npm:

Эти команды добавят последнюю версию Flow в ваш проект.

Далее нужно добавить в секцию файла :

Теперь можно запустить скрипт, прописав в терминале:

Или :

Эти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить.

Удаление аннотаций Flow из скомпилированного кода

Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомпилированного JavaScript.

Для этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь.

Create React App

Если для изначальной конфигурации проекта вы выбрали Create React App, вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта.

Babel

Если для своего проекта вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow:

Или :

Затем добавьте установленный пресет в свою конфигурацию Babel. Например так, если вы используете конфигурационный файл :

Этот пресет позволит использовать Flow в вашем коде.

Другие инструменты сборки

Для удаления аннотаций Flow существует отдельная библиотека: flow-remove-types. Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта.

Запуск Flow

Если всё было сделано правильно, можно попробовать запустить процесс Flow:

Или :

Вы должны увидеть примерно такое сообщение в терминале:

Добавление аннотаций типов

По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно её указывают в самом начале файла):

Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт или и посмотреть, найдёт ли Flow какие-нибудь ошибки.

Кроме того, есть заставить Flow проверять вообще все файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода, может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором.

Всё должно работать! Советуем изучить Flow подробнее, ознакомившись со следующими ресурсами:

  • Flow Documentation: Type Annotations
  • Flow Documentation: Editors
  • Flow Documentation: React
  • Linting in Flow

Пробуем React

React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. Информация в этом разделе будет полезна в любой ситуации: при первом знакомстве с React, при создании простой динамической HTML-страницы и даже при проектировании сложного React-приложения.

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

Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на CodePen, CodeSandbox, или Stackblitz.

Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.

Добавляем React на сайт

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

Создаём React-приложение

Когда вы начинаете проект на React, то простая HTML-страница со script-тегами может быть лучшим вариантом. Её можно сделать за минуту.

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

React Styleguidist integration

Include following line in your :

propsParser require('react-docgen-typescript').withDefaultConfig().parse

or if you want to use custom tsconfig file

propsParser require('react-docgen-typescript').withCustomConfig('./tsconfig.json', ).parse

parserOptions

  • propFilter:

    {
      skipPropsWithName?: string[] | string;
      skipPropsWithoutDoc?: boolean;
    }

    or

    (prop PropItem, component Component) => boolean

    In case you do not want to print out all the HTML props, because your component is typed like this:

    const MyComponent React.FCReact.HTMLAttributesHTMLDivElement>> = ()...

    you can use this workaround inside :

    if (prop.parent) {
      return !prop.parent.fileName.includes('node_modules')
    }
    
    return true

    Note: without a doc comment will not be documented.

  • componentNameResolver:

    (exp ts.Symbol, source ts.SourceFile) => string | undefined | null | false

    If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.

  • shouldExtractLiteralValuesFromEnum: boolean

    If set to true, string enums and unions will be converted to docgen enum format. Useful if you use Storybook and want to generate knobs automatically using addon-smart-knobs.

  • savePropValueAsString: boolean

    If set to true, defaultValue to props will be string.
    Example:

      Component.defaultProps = {
          counter 123,
          disabled false
      }

    Will return:

      counter {
          defaultValue '123',
          required true,
          type 'number'
      },
      disabled {
          defaultValue 'false',
          required true,
          type 'boolean'
      }

Styled components example:

componentNameResolver: (exp, source) => exp.getName() === 'StyledComponentClass' && getDefaultExportForFile(source);

Использование продакшен-сборки

Если вы испытываете проблемы с производительностью в React-приложении, убедитесь в том, что вы проводите тесты с настройками минифицированной продакшен-сборки.

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

Если вы не уверены в том, что процесс сборки настроен правильно, вы можете проверить это, установив React Developer Tools for Chrome. Если вы посетите сайт, работающий на React в продакшен-режиме, иконка будет с чёрным фоном:

Если вы посетите сайт с React в режиме разработки, у иконки будет красный фон:

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

Ниже вы можете найти инструкцию по сборке своего приложения для продакшена.

Create React App

Если ваш проект сделан с помощью Create React App, выполните:

Эта команда создаст продакшен-сборку вашего приложения в папке вашего проекта.

Помните, что это необходимо только перед деплоем на продакшен. Для обычной разработки используйте .

Однофайловые сборки

Мы предлагаем готовые для продакшена версии React и React DOM в виде отдельных файлов:

Помните, что для продакшена подходят только те файлы, которые заканчиваются на .

Brunch

Для наиболее эффективной продакшен-сборки с Brunch, установите плагин .

Затем, для создания продакшен сборки, добавьте флаг к команде :

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

Browserify

Для наиболее эффективной продакшен-сборки с Browserify, установите несколько плагинов:

При создании продакшен-сборки, убедитесь, что вы добавили эти пакеты для преобразования (порядок имеет значение):

  • Плагин обеспечивает правильную среду для сборки. Сделайте его глобальным ().
  • Плагин удаляет импорты, добавленные при разработке. Сделайте его глобальным ().
  • Наконец, полученная сборка отправляется к  для минификации ().

К примеру:

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

Rollup

Для наиболее эффективной продакшен-сборки с Rollup, установите несколько плагинов:

При создании продакшен-сборки, убедитесь, что вы добавили эти плагины (порядок имеет значение):

  • Плагин обеспечивает правильную среду для сборки.
  • Плагин обеспечивает поддержку CommonJS в Rollup.
  • Плагин сжимает и оптимизирует финальную сборку.

Полный пример настройки можно посмотреть здесь.

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

webpack

Webpack 4.0 и выше по умолчанию минифицирует код в продакшен-режиме.

Вы можете узнать об этом больше в документации webpack.

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

Distribution

Now let’s get the project ready for distribution. First let’s modify the package.json to set the private value to false. This will allow us to publish our project. Next let’s you’ll want to add the files to be packaged by adding the the files property that will point to where the contents of our library will be located after the build. After that let’s also make sure the distributed package knows where it’s entry point and types is located by specifying a main and types entry following.

Your package.json should look something like what is shown below.

Next we’re going to update the original tsconfig.json to have support to be more widely imported, generate it’s own type definitions, and a few other minor tweaks. I’d just recommend reviewing what’s going on here in TypeScripts documentation to understand everything that is going on.

tsconfig.json

Now all should we have to build, pack and publish this project via NPM assuming npm is setup properly to publish is run the following commands.

npm run build-libnpm publish

What if I want to just test this out locally without publishing to NPM

It’s easy, one way that is pretty straight forward is to just use NPM pack and tell NPM to install from the generated NPM package

Virtualize Long Lists

If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as “windowing”. This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.

react-window and react-virtualized are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like Twitter did, if you want something more tailored to your application’s specific use case.

Migration

In general, most upgrades won’t require any migration steps to work, but if you experience problems after an upgrade, please file an issue, and we’ll add it to the list of migration steps below.

From

Since , the template uses different files for both development and production mode. For the latter, unfortunately, the path resolver is not smart enough to fall back to the basic in case the expected is not present, so you have to create this file manually like shown here.

From

Since , is listed as a peer dependency of . For projects generated with at least this version, the init script takes care of properly installing it as dev dependency to the generated projects. Older projects require manual installation, in case you have not already done that.

Using :

Using :

From

Version introduces a new config file for jest, that is necessary for the tests to run. If you were previously running a version older than and upgraded to or newer, you need to manually add the new file, or else you’ll get an error similar to this when trying to run your tests:

Test suite failed to run

{
    "messageText" "Cannot read file 'C:\\\\tsconfig.test.json': ENOENT: no such file or directory, open 'C:\\\\tsconfig.test.json'.",
    "category" 1,
    "code" 5012
}

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.

Creating an App

You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server). You can use (macOS/Linux) or to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npm init react-app my-app

is available in npm 6+

Yarn

yarn create react-app my-app

is available in Yarn 0.25+

It will create a directory called inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

or

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

or

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

or

Builds the app for production to the folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

Instance Properties

contains the props that were defined by the caller of this component. See Components and Props for an introduction to props.

In particular, is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.

The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

If some value isn’t used for rendering or data flow (for example, a timer ID), you don’t have to put it in the state. Such values can be defined as fields on the component instance.

See State and Lifecycle for more information about the state.

Never mutate directly, as calling afterwards may replace the mutation you made. Treat as if it were immutable.

Available Scripts

In the project directory, you can run:

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about for more information.

Builds the app for production to the folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about for more information.

Note: this is a one-way operation. Once you , you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use . The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Changelog

2.17.0

  • Update migration instructions — @DorianGrey
  • tslint updates — @alexandrudanpop
  • Stop eslint includes — @aurerua
  • Resolve commited merge conflig — @AndrewKvalheim

2.16.0

  • Allow config override — @sebald
  • Fix travis build — @DorianGrey
  • Allow using different tsconfig file for dev and build — @DorianGrey

2.15.0

  • Replace TSLint rules with presets — @nielsdB97
  • Update file-loader exclusion rules — @winstonewert
  • Fix Uglifyjs settings — @meandmax
  • Merge react-script 1.1.x — @wmonk

2.14.0

  • README fixes — @kaminskypavel
  • README fixes — @adambowles
  • Remove unused JS files — @DorianGrey
  • README fixes — @stephtr
  • Added the abillity to import js and jsx files with ts-loader — @GeeWee
  • Uglifyjs update for es6 support — @thetric

2.13.0

  • Remove tslint-loader from prod builds — @DorianGrey
  • Include typescript as devDependency in boilerplate — @ianschmitz
  • Document custom module formats — @joshtynjala
  • Fix tsconfig.json — @diabelb

2.10.0

  • README updates — StefanSchoof
  • README updates — DorianGrey
  • Add support for fork-ts-checker-webpack-plugin — johnnyreilly

2.7.0

  • Merge react-scripts@1.0.13 — @JohnNilsson
  • Fix git tempalte — @hktonylee
  • Provide migration docs — @JReinhold
  • Updated dependencies — @swengorschewski
  • Fix tslint config — @comerc

2.5.0

  • Support dynamic imports — thanks @nicolaserny, @DorianGrey
  • Fix up tsconfig — thanks @js-n
  • Fix readme typo — thanks @adambowles
  • Move to ts-jest — thanks @DorianGrey

2.3.1

  • All tsc to parse config (for ) — Thanks to @DorianGrey
  • Fix various jest issues — thanks to @zinserjan
  • Fix code coverage — thanks to @zinserjan

2.1.0

  • Update to — thanks to @mindjuice
  • Fix test setup issue — thanks to @jonmpqts
  • Add — thanks to @Place1
  • Update to — thanks to @sjdweb

1.1.7

  • Merge facebookincubator/create-react-app@0.9.5 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.4 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.3 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.2 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.1 into react-scripts-ts

Setup

First off let’s start a new CRA project, I’ll call mine cra-lib. In this example Yarn will be removed and we will be using NPM. I’m not advocating either package manager, use whatever you ️.

// Install CRA globallynpm install -g create-react-app// Create a new CRA with the TypeScript React scriptscreate-react-app cra-lib --scripts-version=react-scripts-ts// Change directory into the new projectcd cra-lib// Remove node modules installed with yarnrm -rf node_modules/// Remove yarn lockrm yarn.lock// reinstall all of the packages with NPMnpm install

What the heck is the TypeScript React Scripts

Adding a Stylesheet

.Button {
  padding: 20px;
}
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return div className="Button" >;
  }
}

In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified file in the build output.

If you are concerned about using Webpack-specific semantics, you can put all your CSS right into . It would still be imported from , but you could always remove that import if you later migrate to a different build tool.

shouldComponentUpdate в действии

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

Поскольку возвратил для поддерева с корнем C2, React не пытался отрендерить C2, следовательно не нужно вызывать на C4 и C5.

Для C1 и C3 возвратил , поэтому React пришлось спуститься к листьям и проверить их. Для C6 вернул , и поскольку отображаемые элементы не были эквивалентны, React должен был обновить DOM.

Последний интересный случай — C8. React должен был отрисовать этот компонент, но поскольку возвращаемые им React-элементы были равны ранее предоставленным, ему не нужно обновлять DOM.

Обратите внимание, что React должен был делать изменения только для C6. Для C8 этого удалось избежать сравнением отрендеренных React-элементов, а для поддеревьев C2 и C7 даже не пришлось сравнивать элементы, так как нас выручил и  не был вызван

Ссылка на основную публикацию