Cra что это

Create React App¶

Create React App (CRA) — это интерфейс командной строки (command line interface, CLI), позволяющий создавать предварительно настроенные React-проекты. Предварительная настройка включает в себя, но не исчерпывается, настройкой Webpack и Babel.

Создание и запуск проекта¶

my-app — произвольное название проекта.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

yarn create react-app my-app # или npm init react-app my-app # или npx create-react-app my-app # смена директории cd my-app # запуск в режиме разработки yarn start # или npm run start # производственная сборка yarn build # или npm run build

Флаг —template используется для выбора шаблона проекта.

1 2 3

yarn create react-app my-app --template cra-template-typescript # "cra-template" можно опустить yarn create my-app --template typescript

Имеется возможность создавать собственные шаблоны.

Структура проекта¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js

Самыми важными файлами являются следущие:

public/index.html — шаблон страницы (приложения)
src/index.js — «входная точка» JavaScript в терминологии «бандлеров»

Эти файлы удалять нельзя. Обратите внимание: Вебпак обрабатывает только файлы, находящиеся в директории src .

Вспомогательные инструменты¶

Расширения для VSCode

ES7 React/Redux/GraphQL/React-Native snippets
Prettier — Code formatter

Расширения для Google Chrome

React Developer Tools
Redux DevTools

Настройки VSCode для Prettier ( settings.json ):

1 2 3 4 5 6 7 8

"editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.endOfLine": "auto", "prettier.jsxSingleQuote": true, "prettier.packageManager": "yarn", "prettier.singleQuote": true, "prettier.semi": false, "prettier.trailingComma": "none", "prettier.useEditorConfig": false,

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

Для разработки компонентов в изоляции рекомендуется использовать Storybook:

npx -p @storybook/cli sb init

Для анализа бандла рекомендуется использовать source-map-explorer.

Устанавливаем пакет с помощью yarn add source-map-explorer . Добавляем в раздел scripts файла package.json строку «analyze»: «source-map-explorer ‘build/static/js/*.js'» . Выполняем анализ:

yarn build yarn analyze

Стили и другие статические ресурсы¶

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

 1 2 3 4 5 6 7 8 9 10 11

// Button.css или Button.modules.css @font-face  font-family: 'Montserrat'; src: url('./Montserrat-Regular.ttf'); > .btn  padding: 0.25em 0.75em; font-family: 'Montserrat', sans-serif; font-size: 1.25em; color: #1c1c1c; >

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// Button.js import './Montserrat-Regular.ttf'; import './Button.css'; // или import styles from './Button.module.css'; import likeImg from './like.png'; export default function Button()  return ( button className="btn" /*или*/ className=styles.btn>> img className="btn_like" src=likeImg> alt="like" /> /button> ); >

Для стилизации также можно использовать специальные библиотеки, например, styled-components. Шпаргалку по работе с данной библиотекой смотрите здесь.

Для сброса стилей в index.css нужно добавить строку @import-normalize; .

При сборке проекта CSS автоматически минифицируется и обрабатывается с помощью autoprefixer, автоматически добавляющего вендорные префиксы.

При большом количестве статических ресурсов, их можно поместить в директорию public . Ссылка на такие файлы делается с помощью process.env.PUBLIC_URL :

/>

Обратите внимание: такие файлы не будут обрабатываться Вебпаком.

Абсолютный путь¶

Для использования абсолютных путей при импорте компонентов, необходимо в корневой директории ( my-app ) создать файл jsconfig.json или tsconfig.json (при использовании TypeScript) следующего содержания:

1 2 3 4 5 6

 "compilerOptions":  "baseUrl": "src" >, "include": ["src"] >

1 2 3

import Button from 'components/Button'; // вместо import Button from '../../components/Button';

Пользовательские переменные среды окружения¶

Самый простой способ определения «кастомных» переменных среды окружения состоит в создании файла .env в корневой директории ( my-app ):

1 2 3 4 5

REACT_APP_TITLE="Some title" REACT_APP_DESCRIPTION="Some description" REACT_APP_BASE_URL=http://example.com/ # расширение переменной REACT_APP_IMG_URL=$REACT_APP_BASE_URL/img/

Такие переменные должны начинаться с REACT_APP .

1 2 3 4 5 6

 title>%REACT_APP_TITLE%title> meta name="description" content="%REACT_APP_DESCRIPTION%" />

/logo.png`> />

Значения переменных заменяются при сборке проекта.

Прогрессивное приложение¶

CRA позволяет легко создавать прогрессивные веб-приложения:

yarn create react-app my-app --template pwa

// src/index.js serviceWorker.register();

Обратите внимание: регистрацию сервис-воркера следует запускать только при сборке проекта.

Проксирование (перенаправление запросов)¶

По умолчанию все запросы отправляются к серверу, на котором запущено приложение ( http://localhost:3000 ). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл package.json следующую строку:

"proxy": "http://localhost:5000"

Также можно воспользоваться специальной библиотекой:

yarn add http-proxy-middleware

 1 2 3 4 5 6 7 8 9 10 11 12 13

const < createProxyMiddleware, >= require('http-proxy-middleware'); module.exports = function (app) < app.use( '/api', createProxyMiddleware(< target: 'http://localhost:5000', changeOrigin: true, >) ); >;

Разворачивание (деплой) проекта¶

Существует множество различных вариантов разворачивания приложения. Это можно сделать как локально, так и с помощью генераторов статических сайтов, таких как Netlify, Heroku, Vercel и т.д.

На мой взгляд, самым простым способом является «деплой» SPA-приложения на Netlify:

1 2 3 4 5 6 7 8

# установка CLI yarn global add netlify-cli # авторизация netlify login # деплой демо-версии netlify deploy # окончательный деплой netlify deploy --prod

Имеется возможность продолжительной (длящейся) интеграции с Netlify репозитория, размещенного на Github.

Другие варианты «деплоя» смотрите здесь.

Перевод «CRA» на русский

By this process CRA offered a unique example of adoption of rules of issuance of long-term broadcasting licenses based on competitive process.

В ходе этого процесса КРА продемонстрировала уникальный пример принятия правил выдачи долгосрочных лицензий на вещание на конкурентной основе.

The time had been spent in asking for the guarantees from the CRA representatives and personal promotion.

Время было потрачено на попытки получения гарантий от представителей КРА и на саморекламу.

The neurological status of children with CRA is usually not marked by gross organic manifestations, which is typical of mentally retarded preschoolers.

В неврологическом статусе детей с ЗПР не отмечается грубых органических проявлений, что типично для умственно отсталых дошкольников.

Taxpayers assess their liability by filing a return with the CRA by the required deadline.

Налогоплательщики оценить свои налоговые обязательства путем подачи декларации с ЗПР в установленных сроках подачи.

Typically, such pages are almost a carbon copy of the official CRA site and request a large amount of personal information.

Обычно такие страницы практически полностью копируют оформление официального сайта CRA и запрашивают большой объем персональной информации.

This page of the CRA website has links to tax services offices throughout the country.
Эта страница веб-сайта CRA имеет ссылки на офисы налоговых служб по всей стране.
You don’t send these forms to the CRA.
Не нужно отправлять эти документы в CRA.
The annual adjustments are required by the CRA rules.
Ежегодные корректировки требуются в соответствии с правилами CRA.
The annual adjustments are required by the CRA rules.
Требование о ежегодных корректировках содержится в правилах CRA.

CRA has successfully completed the process of issuing long-term licences for all broadcasters that qualified.

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

The ovarian form of CRA is extremely rare and is accompanied, as a rule, by a decrease in the follicular apparatus.

Яичниковая форма ЗПР встречается крайне редко и сопровождается, как правило, уменьшением фолликулярного аппарата.

The CRA‘s online services are fast, easy and secure.
Онлайновые сервисы CRA работают быстро, просто и безопасно.

When a non-resident sells a Canadian property, the seller must provide the buyer with a clearance certificate prepared by the CRA.

Когда нерезидент продает канадскую недвижимость, продавец должен предоставить покупателю свидетельство о допуске, подготовленное CRA.

The Government’s consultation is to gather information about how the CRA can make their programs and services more streamlined and focused on taxpayers.

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

Canadians would also be able to check the total of their balance at any time, using CRA‘s My Account.

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

CRA ANTARES is proud to implement thoroughly developed unique process of quality control and opinion generating.

В КРА АНТАРЕС мы гордимся возможностью использовать тщательно разработанный процесс контроля качества и генерации оценок и мнений.

CRA — one of the regulators of the gambling business in Singapore can issue licenses if the applicants and their assistants are recognised as eligible.

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

A CRA complaint was filed accusing the bank of redlining in a low-income area of Houston.

Была подана жалоба в CRA, в которой банк обвинялся в дискриминации жителей района г. Хьюстон с низкими доходами.

Возможно неприемлемое содержание

Примеры предназначены только для помощи в переводе искомых слов и выражений в различных контекстах. Мы не выбираем и не утверждаем примеры, и они могут содержать неприемлемые слова или идеи. Пожалуйста, сообщайте нам о примерах, которые, на Ваш взгляд, необходимо исправить или удалить. Грубые или разговорные переводы обычно отмечены красным или оранжевым цветом.

Зарегистрируйтесь, чтобы увидеть больше примеров. Это просто и бесплатно
Ничего не найдено для этого значения.
Предложить пример
Больше примеров Предложить пример

Новое: Reverso для Windows

Переводите текст из любого приложения одним щелчком мыши .

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

Результатов: 612 . Точных совпадений: 612 . Затраченное время: 82 мс

Помогаем миллионам людей и компаний общаться более эффективно на всех языках.

Клиницист. Кто такой и причем тут CRA?

Специалист по клиническим исследованиям, или монитор клинических исследований (Clinical research associate, CRA) – настоящий боец в данной сфере. Человек-оркестр, гуру тайм-менеджмента или вечный странник – характеристик много, но истина одна.

Так кто же такой CRA? Все явки и пароли дадим в сегодняшней статье, с любовью и заботой подготовленной командой ScindCareer.

Кто такой CRA, и чем он занимается?

Специалист (монитор) клинических исследований – сотрудник, организующий и контролирующий ход клинического исследования нового лекарственного препарата. Чтобы проверить безопасность и эффективность нового лекарства необходимо провести исследование с участием здоровых добровольцев и пациентов с конкретной болезнью. Задача монитора – выбрать больницы (исследовательский центр), найти врачей, у которых есть больные, подходящие под требования конкретного исследования, провести тренинги врачам и проконтролировать соблюдение всех требований исследовательским центром. Это первый этап.

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

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

Работать монитором – это запускать, контролировать все детали и завершать исследование, писать отчеты и много ездить в командировки по стране.

Что нужно знать и уметь?

· Иметь медицинское, фармацевтическое или биологическое образование. Как правило, это преимущество при трудоустройстве. Но все зависит от конкретной компании – в некоторых на позицию монитора берут кандидатов с лингвистическим или журналистским образованием.

· Знать английский язык. Критически необходимый навык. Работа монитора – обучение, общение внутри компании или со Спонсором, заполнение документации ведется только на английском. Английский язык должен быть как минимум на уровне Intermediate, но у большинства мониторов Upper-Intermediate или Advanced. Если хотите работать в западной (международной) компании, то английский обязательно придется подтянуть до B2–C1.

· Стрессоустойчивость. Начало и конец исследования – критические и тяжелые стадии, требующие напряженной работы. А если одновременно несколько исследований попадают в эти фазы – готовьтесь к сверхурочной работе и стрессу.

· Быть готовым к командировкам. Мониторы не постоянно в «полях», но в некоторых компаниях командировки занимают 50–60% рабочего времени.

Какие перспективы в данной отрасли?

Карьера монитора начинается по-разному. Большинство стартуют с позиции ассистента отдела клинических исследований, а потом переходят на должность младшего монитора и далее вверх по карьерной лестнице. Однако в некоторых компаниях не предполагается переход с позиции ассистента на должность монитора. Об этом стоит уточнить на собеседовании. Карьерный рост в отрасли не стремительный – сделать головокружительную карьеру за 2 года не получится. Карьерная лестница монитора логична и проста – каждая ступень (CRA I, CRA II и CRA III) представляет собой определенное количество лет в отрасли, на предыдущей должности и число проведенных исследований. Чем выше ступень – тем выше уровень ЗП. Мониторы с опытом 5–7 лет высоко ценятся на рынке – таких кандидатов HR-специалисты уже ищут сами.

А если нет опыта?

Все поправимо. Пройдите курсы и получите сертификат GCP (Good Clinical Practice, Надлежащая Клиническая Практика), чтобы больше узнать о позиции монитора и войти в профессию. 100% гарантии трудоустройства они, к сожалению, не дают, но будут весомой строчкой в резюме. Некоторые компании организуют стажировки для студентов или недавних выпускников с возможностью дальнейшего трудоустройства. Если нет опыта можно устроиться на позицию ассистента (с учетом описанных выше особенностей). Кроме того, подтяните английский язык, научитесь деловой переписке и свободному общению – уже на этапе собеседований большинство компаний общаются с кандидатом только на английском. И главное: рассылайте резюме, пишите HR–специалистам и откликайтесь на все подходящие вакансии. Будьте заметными для рекрутеров и ваше желание начать карьеру в клинических исследованиях не останется в стороне.

Автор статьи: Скоробогатова Анастасия

Отказ от create-react-app и создание собственного шаблона для React-приложений

Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app .

Что такое CRA?

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

Сильные стороны CRA

npx create-react-app my-app

npm install react-scripts@latest

Недостатки CRA

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

Альтернатива CRA

Разрабатывая альтернативу CRA, мы собираемся оснастить её возможностью быстрого, с использованием лишь одной команды, создания базовых React-проектов. Это повторяет одну из полезных возможностей create-react-app . А недостатки CRA мы, конечно, в нашу систему переносить не будем, самостоятельно устанавливая зависимости и настраивая проект. В наш проект не попадут две других полезных возможности CRA (избавление разработчика от необходимости изучения вспомогательных механизмов и схема «одной зависимости»), так как они несут с собой и недостатки (сокрытие внутренних механизмов вспомогательных подсистем от разработчика и сложность настройки собственных конфигураций сборки проектов).

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

Начнём работу с инициализации проекта средствами npm и с инициализации его git-репозитория:

npm init git init

Создадим файл .gitignore следующего содержания:

node_modules build

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

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

Библиотеки react и react-dom

Это — единственные зависимости времени выполнения, которые нам нужны:

npm install react react-dom --save

Транспилятор (Babel)

Транспилятор Babel преобразует код, соответствующий стандартам ECMAScript 2015+, в код, который будет работать и в новых, и в устаревших браузерах. Babel, благодаря применению пресетов, используется и для обработки JSX-кода:

npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

Вот как выглядит простая конфигурация Babel, предназначенная для подготовки к работе React-приложений. Эту конфигурацию можно добавить в файл .babelrc или в package.json :

Babel поддерживает множество пресетов и плагинов. Их можно добавлять в проект по мере возникновения необходимости в них.

Бандлер (Webpack)

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

npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-dev

Простая конфигурация Webpack, предназначенная для сборки пакетов React-приложений, выглядит так, как показано ниже:

const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = < output: < path: path.resolve(__dirname, 'build'), filename: 'bundle.js', >, resolve: < modules: [path.join(__dirname, 'src'), 'node_modules'], alias: < react: path.join(__dirname, 'node_modules', 'react'), >, >, module: < rules: [ < test: /\.(js|jsx)$/, exclude: /node_modules/, use: < loader: 'babel-loader', >, >, < test: /\.css$/, use: [ < loader: 'style-loader', >, < loader: 'css-loader', >, ], >, ], >, plugins: [ new HtmlWebPackPlugin(< template: './src/index.html', >), ], >;

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

Это — все необходимые нам зависимости. Теперь давайте добавим в проект шаблонный HTML-файл и заготовку React-компонента.

Создадим в директории проекта папку src и добавим в неё файл index.html :

    React Boilerplate

В той же папке создадим React-компонент HelloWorld :

import React from 'react'; const HelloWorld = () => < return ( Hello World
 ); >; export default HelloWorld;

В ту же папку добавим файл index.js :

import React from 'react'; import < render >from 'react-dom'; import HelloWorld from './HelloWorld'; render(, document.getElementById('root'));

И наконец — добавим в package.json описания скриптов для запуска ( start ) и сборки ( build ) проекта:

"scripts":

Вот и всё. Теперь в нашем распоряжении имеется работоспособная заготовка React-приложения. Убедиться в этом можно, выполнив команды npm start и npm run build .

Теперь давайте оснастим нашу систему возможностью подготовки шаблона проекта с помощью единственной команды. То есть — воссоздадим одну из сильных сторон CRA. Мы собираемся использовать исполняемый JS-файл, который будет вызываться при вводе соответствующей команды в командной строке. Например, подобная команда может выглядеть так:

reactjs-boilerplate new-project

Для реализации этой идеи мы собираемся воспользоваться разделом bin файла package.json .

Сначала установим пакет fs-extra:

npm i fs-extra

Теперь создадим исполняемый JS-файл start.js , который будет расположен в папке bin нашего проекта. Поместим в этот файл следующий код:

#!/usr/bin/env node const fs = require("fs-extra"); const path = require("path"); const https = require("https"); const < exec >= require("child_process"); const packageJson = require("../package.json"); const scripts = `"start": "webpack-dev-server --mode=development --open --hot", "build": "webpack --mode=production"`; const babel = `"babel": $`; const getDeps = (deps) => Object.entries(deps) .map((dep) => `$@$`) .toString() .replace(/,/g, " ") .replace(/^/g, "") // исключим зависимость, используемую только в этом файле, не относящуюся к шаблону .replace(/fs-extra[^\s]+/g, ""); console.log("Initializing project.."); // создадим папку и инициализируем npm-проект exec( `mkdir $ && cd $ && npm init -f`, (initErr, initStdout, initStderr) => < if (initErr) < console.error(`Everything was fine, then it wasn't: $`); return; > const packageJSON = `$/package.json`; // заменим скрипты, задаваемые по умолчанию fs.readFile(packageJSON, (err, file) => < if (err) throw err; const data = file .toString() .replace( '"test": "echo \\"Error: no test specified\\" && exit 1"', scripts ) .replace('"keywords": []', babel); fs.writeFile(packageJSON, data, (err2) =>err2 || true); >); const filesToCopy = ["webpack.config.js"]; for (let i = 0; i < filesToCopy.length; i += 1) < fs.createReadStream(path.join(__dirname, `../$`)).pipe( fs.createWriteStream(`$/$`) ); > // npm, при установке пакета, удалит файл .gitignore, поэтому его нельзя скопировать из локальной папки шаблона; этот файл нужно загрузить. После отправки кода в GitHub-репозиторий пользуйтесь raw-файлом .gitignore https.get( "https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore", (res) => < res.setEncoding("utf8"); let body = ""; res.on("data", (data) =>< body += data; >); res.on("end", () => < fs.writeFile( `$/.gitignore`, body, < encoding: "utf-8" >, (err) => < if (err) throw err; >); >); > ); console.log("npm init -- done\n"); // установка зависимостей console.log("Installing deps -- it might take a few minutes.."); const devDeps = getDeps(packageJson.devDependencies); const deps = getDeps(packageJson.dependencies); exec( `cd $ && git init && node -v && npm -v && npm i -D $ && npm i -S $`, (npmErr, npmStdout, npmStderr) => < if (npmErr) < console.error(`Some error while installing dependencies $`); return; > console.log(npmStdout); console.log("Dependencies installed"); console.log("Copying additional files.."); // копирование дополнительных файлов с кодом fs.copy(path.join(__dirname, "../src"), `$/src`) .then(() => console.log( `All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd $\nnpm start` ) ) .catch((err) => console.error(err)); > ); > );

Теперь давайте свяжем этот исполняемый JS-файл с командой из package.json :

Создадим локальную связь для пакета:

npm link

Теперь, после выполнения этой команды, если в терминале выполнить команду вида your-boilerplate-name my-app , будет вызван наш исполняемый файл start.js . Он создаст новую папку с именем my-app , скопирует в неё файлы package.json , webpack.config.js и .gitignore , а так же папку src , и установит зависимости нового проекта my-app .

Замечательно. Теперь всё это работает на вашем компьютере и позволяет вам, пользуясь единственной командой, создавать базовые React-проекты, обладающие собственной конфигурацией сборки.

Вы можете пойти дальше и опубликовать свой шаблон в реестре npm. Для того чтобы это сделать, сначала надо отправить проект в GitHub-репозиторий. А дальше — следуйте этим инструкциям.

Примите поздравления! Только что мы, буквально за несколько минут, создали альтернативу create-react-app . Наше решение не перегружено ненужными возможностями (в проекты, созданные на его основе, можно добавлять зависимости по мере возникновения необходимости в них). Пользуясь им, можно легко подстраивать конфигурацию сборки проекта под свои нужды.

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

Я подготовил шаблон reactjs-boilerplate, позволяющий создавать проекты, готовые к работе в продакшне. Тут используется соответствующая конфигурация сборки, линтинг и хуки, ответственные за проверку проекта перед созданием коммитов. Испытайте этот шаблон. Если у вас появятся какие-то идеи по его совершенствованию, или если вы решите сделать вклад в его разработку — присоединяйтесь к работе над ним.

Итоги

Вот о чём мы говорили в этом материале:

Мы разобрали плюсы и минусы create-react-app .
Мы реализовали в своём проекте полезную возможность CRA по созданию заготовок React-приложений одной командой. А от недостатков CRA мы избавились.
Мы оснастили свой проект минимальными конфигурациями Webpack и Babel, необходимыми для сборки и запуска React-приложений.
Мы создали React-компонент HelloWorld.js , предусмотрели возможность сборки проекта и его запуска с использованием сервера разработки.
Мы создали исполняемый JS-файл и связали его с соответствующей командой, воспользовавшись разделом bin файла package.json .
Мы воспользовались командой npm link с целью создания локальной связи для нашего проекта и получения возможности создавать новые базовые проекты на его основе с помощью единственной команды.

Пользуетесь ли вы create-react-app при создании новых React-проектов?