Для просмотра ссылки Войди или Зарегистрируйся
Флаг «—template» используется для выбора шаблона проекта.
Имеется возможность создавать собственные шаблоны.
Самыми важными файлами являются следущие:
Для разработки компонентов в изоляции рекомендуется использовать Storybook:
Для анализа бандла рекомендуется использовать source-map-explorer.
Устанавливаем пакет с помощью yarn add source-map-explorer. Добавляем в раздел scripts файла package.json строку "analyze": "source-map-explorer 'build/static/js/*.js'". Выполняем анализ:
Шпаргалка по Create React App (Create react app cheatsheet)
Описание
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 <span class="pl-c"># или</span> npm init react-app my-app <span class="pl-c"># или</span> npx create-react-app my-app <span class="pl-c"># смена директории</span> <span class="pl-c1">cd</span> my-app <span class="pl-c"># запуск в режиме разработки</span> yarn start <span class="pl-c"># или</span> npm run start <span class="pl-c"># производственная сборка</span> yarn build <span class="pl-c"># или</span> npm run build |
1 2 3 | yarn create react-app my-app --template cra-template-typescript <span class="pl-c"># "cra-template" можно опустить</span> 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 22 | 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 в терминологии «бандлеров»
Вспомогательные инструменты
- Расширения для VSCode
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier — Code formatter
- Расширения для Google Chrome
- React Developer Tools
- Redux DevTools
1 2 3 4 5 6 7 8 | <span class="pl-s"><span class="pl-pds">"</span>editor.defaultFormatter<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>esbenp.prettier-vscode<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.endOfLine<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>auto<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.jsxSingleQuote<span class="pl-pds">"</span></span>: <span class="pl-c1">true</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.packageManager<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>yarn<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.singleQuote<span class="pl-pds">"</span></span>: <span class="pl-c1">true</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.semi<span class="pl-pds">"</span></span>: <span class="pl-c1">false</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.trailingComma<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>none<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.useEditorConfig<span class="pl-pds">"</span></span>: <span class="pl-c1">false</span>, |
Для разработки компонентов в изоляции рекомендуется использовать Storybook:
1 | npx -p @storybook/cli sb init |
Устанавливаем пакет с помощью yarn add source-map-explorer. Добавляем в раздел scripts файла package.json строку "analyze": "source-map-explorer 'build/static/js/*.js'". Выполняем анализ:
1 2 | yarn build yarn analyze |