Created
October 21, 2019 07:05
-
-
Save alex-boom/49a8b2d6a4582b5319bdab1a3ad97e30 to your computer and use it in GitHub Desktop.
create-react
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Источник: https://learn-reactjs.ru | |
1.3 Создать новое React приложение | |
Используйте интегрированный набор инструментов для повышения удобства пользователя и разработчика. | |
В данном разделе описаны несколько популярных наборов инструментов React, которые помогают в таких задачах, как: | |
Масштабирование множества файлов и компонентов. | |
Использование сторонних библиотек из npm. | |
Раннее обнаружение распространенных ошибок. | |
Отслеживаемое редактирование CSS и JS в режиме разработки. | |
Оптимизация кода для релиза. | |
Рекомендуемые в данном разделе наборы инструментов не требуют настройки для начала работы. | |
1.3.1 Возможно вам не нужен набор инструментов | |
Если вы не испытываете проблем, описанных выше, или пока не чувствуете себя комфортно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега <script> на HTML-страницу, при желании добавив поддержку JSX. | |
Кроме того - это самый простой способ интеграции React в существующий веб-сайт. В то же время вы всегда можете добавить больший набор инструментов, если сочтете это необходимым! | |
1.3.2 Рекомендуемые наборы инструментов | |
Команда React в первую очередь рекомендует следующие решения: | |
Если вы изучаете React или создаете новое одностраничное приложение, используйте Create React App. | |
Если вы создаете отрисовываемый на сервере веб-сайт с Node.js, попробуйте Next.js. | |
Если вы создаете статический контент-ориентированный сайт, попробуйте Gatsby. | |
Если вы создаете библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов. | |
1.3.2.1 Create React App | |
Приложение Create React App - удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React. | |
Оно настраивает вашу среду разработки, так что вы можете использовать новейшие функции JavaScript, обеспечивает удобство разработки и оптимизирует ваше приложение для продакшен. Вам потребуются Node >= 6 и npm >= 5.2. Чтобы создать проект, запустите: | |
Код | |
npx create-react-app my-app | |
cd my-app | |
npm start | |
Внимание! | |
npx - это не опечатка - это инструмент для запуска пакетов, который поставляется с npm 5.2+. | |
Create React App не обрабатывает бэкэнд-логику или базы данных. Он просто создает фронтэнд каркас, так что вы можете использовать его с любым бэкэндом. Под капотом он использует Babel и webpack, но вам даже не нужно ничего знать о них. | |
Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build. Она создаст оптимизированный билд вашего приложения в папке build. Больше информации по Create React App можно получить по ссылкам Read Me и User Guide. | |
1.3.2.2 Next.js | |
Next.js - это популярный легковесный фреймворк для статических и отрисовываемых на сервере приложений, построенных на React. Он включает в себя готовые решения по стиллизации и маршрутизации, предполагая, что вы используете Node.js в качестве среды сервера. | |
Узнайте больше о Next.js из его официальной докумментации. | |
1.3.2.3 Gatsby | |
Gatsby - лучший способ создания статических сайтов с помощью React. Он позволяет использовать компоненты React, но выводит предварительно отрисованный HTML и CSS, чтобы гарантировать максимально быстрое время загрузки. | |
Узнайте больше о Gatsby из его официальной докумментации и галерее стартовых комплектов. | |
1.3.2.4 Более гибкие наборы инструментов | |
Следующие наборы инструментов предоставляют больше гибкости и выбора. Мы рекомендуем их более опытным пользователям: | |
Neutrino сочетает в себе мощь webpack с простотой предустановок. Включает предустановку для приложений React и компонентов React. | |
nwb особенно хорош для публикации компонентов React в npm. Его также можно использовать и для создания приложений React. | |
Parcel - быстрый сборщик веб-приложений с нулевой конфигурацией, работающий с React. | |
Razzle - это фреймворк для серверной отрисовки, не требующий какой-либо настройки, но предлагающий большую гибкость, чем Next.js. | |
1.3.3 Создание набора инструментов с нуля | |
JavaScript набор инструментов для сборки обычно состоит из: | |
Менеджера пакетов, такого как Yarn или npm. Он позволяет вам воспользоваться преимуществом обширной экосистемы сторонних пакетов, легко устанавливать и обновлять их. | |
Сборщика, такого как webpack или Parcel. Он позволяет вам писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки. | |
Компилятора, такого как Babel. Он позволяет писать современный JS код, который также будет работать и в старых браузерах. | |
Если вы предпочтёте создать свой собственный JavaScript набор инструментов с нуля, ознакомьтесь с данным руководством, в котором воссоздаётся некоторая функциональность Create React App. | |
Не забудьте удостовериться, что ваш кастомный набор инструментов правильно настроен для продакшен. | |
1.1 Начало работы | |
1.2 Добавить React на веб-сайт | |
1.3 Создать новое React приложение | |
1.4 Ссылки CDN | |
Ⓒ 2017 Тюшкевич Сергей |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment