Как установить react js на windows

Обновлено: 06.07.2024

What You'll Be Creating

MVC - очень популярная парадигма в веб-разработке и она существует уже довольно давно. Фреймворк React является мощной частью этой троицы Model-View-Controller, поскольку он фокусируется исключительно на представлении. React написан на JavaScript и создан командами разработчиков Facebook и Instagram.

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

На что способен React?

Создавать молниеносные, гибкие изоморфные веб-приложения. React не делает никаких предположений о стеке технологий, в котором он находится.
Виртуальная обработка DOM предоставляет вам простую модель программирования, которая может отображаться в браузере, на сервере или на рабочем столе с помощью React Native.
Связывание потока данных с React разработано как односторонний реактивный поток данных. Это уменьшает требования к шаблонам и с ними легче работать, чем с традиционными методами.

Hello World

Чтобы начать работу, вот простой пример приложения React, взятый из официальных примеров:

Этот пример отобразит «Hello John» в контейнере <div> . Обратите внимание на синтаксис XML / HTML, который используется в строках 3 и 8. Это называется JSX.

Что такое JSX?

JSX - синтаксис XML/HTML, который используется для визуализации HTML из кода JavaScript. React преобразует JSX в собственный JavaScript для браузера, а с помощью предоставленных инструментов вы можете конвертировать HTML-код существующих сайтов в JSX!

JSX упрощает написание кода, поскольку очень похож на написание привычного HTML, но только изнутри JavaScript. В сочетании с Node это обеспечивает очень последовательный рабочий процесс.

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

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

Установка React

Существует несколько способов использования React. Официально рекомендуемый способ - из npm или Facebook CDN, но дополнительно вы можете клонировать из git и создавать свои собственные сборки. Также вы можете использовать стартовый комплект или сэкономить время с помощью генератора каркаса приложения от Yeoman. Мы рассмотрим все эти методы, чтобы у вас было полное понимание.

Использование CDN для Facebook

Для обеспечения быстрого доступа просто подключите библиотеки React и React Dom из CDN fb.me следующим образом:

Установка из NPM

В руководстве React рекомендуется использовать React с системой CommonJS, например такими как, browserify или webpack.

В руководстве React также рекомендуется использовать react и react-dom пакеты npm. Чтобы установить их в своей системе, запустите следующую команду в командной строке bash в каталоге проекта или сначала создайте новый каталог и cd в него.

Теперь вы сможете увидеть установку React внутри каталога node_modules .

Установка из Git Source

Зависимости

Вам нужно иметь Node V4.0.0 + и npm v2.0.0 +. Вы можете проверить свою версию node с помощью команды node version и npm с помощью npm version .

Обновление Node через NVM

Я рекомендую использовать диспетчер версий nvm-node для обновления и выбора версии node. Легко приобрести nvm, просто запуская:

Этот скрипт клонирует репозиторий nvm в

/.nvm и добавляет исходную строку в ваш профиль (

Если вы хотите вручную установить nvm , вы можете сделать это через git с помощью:

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

Примечание. Добавьте эту строку в файлы

/.zshrc соответственно, чтобы автоматически получить доступ к команде при входе в систему.

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

Теперь, когда nvm установлен, мы можем получить любую требуемую версию node и можем проверить список установленных версий с помощью команды node list , а так же те, которые доступны с помощью node ls-remote . Нам нужна версия выше 4.0.0 для работы с React.

Установите новейшую версию и установите ее как версию по умолчанию:

Node обновляется, а так же обновится и npm. Теперь вы готовы выполнить установку.

Собираем React из исходников git

Клонируйте себе репозиторий в директорию react в вашей системе:

После того, как вы cклонируете себе репозиторий, теперь вы можете использовать grunt для сборки React:

На данный момент в каталоге build/ есть все, что вам нужно для использования React. Посмотрите каталог /examples , чтобы увидеть некоторые основные рабочие примеры!

Использование стартового набора

Извлеките zip и в корневой каталог создайте файл helloworld.html , добавив следующее:

В этом примере React использует Babel для преобразования JSX в обычный JavaScript через <script type="text/babel"> .

Использование отдельного файла JavaScript

Создайте новый файл на src/helloworld.js и поместите в него следующий код:

Теперь все, что вам нужно сделать, это ссылаться на него в вашем HTML, поэтому откройте helloworld.html и загрузите скрипт, который вы только что создали, используя тег script с атрибутом type text/babel :

Обновите страницу, и вы увидите, что helloworld.js отображается с помощью babel.

Автономное преобразование

Вы также можете использовать интерфейс командной строки (CLI) для преобразования своего JSX с помощью инструментов командной строки babel. Это легко сделать с помощью команды npm:

Флаг --global или -g для краткости установит пакет babel глобально, чтобы он был доступен везде в вашей системе. Это очень хорошая практика использования Node для нескольких проектов и инструментов командной строки.

Теперь, когда Babel установлен, давайте сделаем перевод helloworld.js, который мы только что создали на предыдущем шаге. В командной строке из корневого каталога, где вы разархивировали стартовый комплект, запустите:

Теперь файл build/helloworld.js будет автоматически генерироваться всякий раз, когда вы вносите изменения! Если вам интересно, ознакомьтесь с документацией Babel CLI, чтобы получить более продвинутые знания.

Теперь, когда Babel сгенерировал нам файл build/helloworld.js , который содержит только чистый JavaScript, мы можем обновить HTML без каких-либо скриптов с поддержкой babel.

Итак, с помощью babel мы можем загрузить JSX непосредственно внутри тега script с помощью атрибута type text/babel . Это полезно для целей разработки, но для релиза на боевой сервер мы можем предоставить сгенерированный файл JavaScript, который можно будет кэшировать на локальной машине пользователя.

Генерация этой копии выполняется в командной строке, и поскольку это повторяющаяся задача, я настоятельно рекомендую автоматизировать этот процесс с помощью флага --watch . Или вы можете пойти еще дальше и использовать webpack и browsersync , чтобы полностью автоматизировать рабочий процесс разработки. Ну а чтобы максимально упростить это, мы можем автоматизировать настройку нового проекта с помощью генератора Yeoman.

Установка с помощью Yeoman Scaffolding

Yeoman - очень полезный инструмент для быстрого запуска проектов с оптимальным рабочим процессом и настройкой инструментов. Идея состоит в том, чтобы позволить вам тратить больше времени на разработку, чем на настройку рабочей области проекта, и минимизировать повторяющиеся задачи (имейте это в виду - RSI - это причина, по которой кодеры перестают кодировать). Поэтому, как наилучшая практика, экономия времени с помощью инструментов и внедрение D.R.Y (Do not Repeat Yourself) в повседневной жизни повысит ваше здоровье и эффективность и позволит вам тратить больше времени на фактический код, а не на настройку приложения.

Есть много готовых каркасов, которые подойдут вам в разных вариантах и для проектов разных масштабов. Для этого первого примера мы будем использовать каркас приложения react-fullstack от Yeoman; Вы можете увидеть демонстрацию того, как выглядит итоговый результат.

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

Применение

Чтобы использовать yeoman сначала должны установить его, и если у вас нет требуемых инструментов, таких как gulp , bower and grunt-cli , то установите их следующим образом:

Теперь установите React scaffolding с помощью следующей команды:

Теперь создайте каталог для вашего проекта и cd в него:

Наконец, используйте команду yo с генератором React-fullstack для создания вашего React приложения внутри нашего каталога:

Теперь Yeoman создаст необходимые каталоги и файлы; Вы сможете увидеть обновления об этом в командной строке.

Теперь, когда будет создан каркас приложения, давайте построим наш проект:

По умолчанию мы запускаем его в debug режиме, и для перехода в живой релжим мы просто добавляем флаг --release , например так npm run start -- release.

Теперь вы увидите как строится сборка и инициализируется webpack. Как только это будет сделано, вы увидите вывод webpack, в котором вы найдете подробную информацию о сборке и URL-адресах для доступа к приложению.

Примечание. Возможно, вам нужно открыть порт на вашем сервере для порта разработки. Для пользователей ubuntu / debian с ufw выполните следующие действия:

Преобразование существующего сайта в JSX

Facebook предоставляет онлайн-инструмент, если вам нужно просто преобразовать фрагмент вашего HTML в JSX.

Для более серьезных требований есть инструмент для npm , который называется htmltojsx . Загрузите его с помощью:

Использование его через командную строку так же просто:

Поскольку htmltojsx является модулем node, то вы также можете использовать его непосредственно в коде, например так:

Пример списка

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

В командной строке bash установите линт для React через apm:

Примечание. Последняя версия linter-eslint сильно замедлила мой MacBook Pro, поэтому я отключил его.

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

Убедитесь, что ваш сервер запущен с npm start , и теперь давайте начнем вносить некоторые изменения.

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

Изменение отображается мгновенно, без необходимости обновления страницы. Это конфигурация webpack и браузера, которая вступила в силу.

Затем откройте каталог компонентов и создайте новый каталог:

Теперь, в каталоге UserList , создайте файл package.json со следующим содержимым:

Также, находясь в каталоге UserList , создайте файл UserList.js и добавьте следующее:

Теперь, чтобы закончить, нам нужно добавить некоторые данные для этого списка. Мы сделаем это внутри components/ContentPage/ContentPage.js . Откройте этот файл и установите его следующим образом:

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

Резюме

Мы использовали генератор Yeoman для запуска веб-приложения React и создания react-fullstack приложения на основе стартового набора. Для получения дополнительной информации о макетах файлов и директорий, проверьте readme в git репозитории стартового набора.

Здесь мы отредактировали файл index.jade , так что он сначала был обнулен и затем создали собственное окно просмотра, создавая новый компонент с именем UserList .

Внутри components/UserList/UserList.js мы определяем способ отображения списка:

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

Чтобы отобразить список, мы включаем его внутри файла Content Page.js с помощью import UserList from '. /UserList' ; и определяем некоторые тестовые данные с помощью:

Внутри ContentPage.js мы вызываем компонент UserList в JSX <UserList data= /> .

Теперь компонент UserList может получить доступ к атрибуту data через this.props.data .

Каждый раз, когда мы передаем значение с атрибутом компонента, к нему можно получить доступ через this.props . Вы также можете определить тип данных, которые должны быть предоставлены, используя статическую переменную propTypes в своем классе.

Синтаксис расширенных компонентов и React.createClass

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

Поэтому вместо class ComponentName extends Component , который вы видели ранее в этом учебнике, вы создаете класс React со следующим синтаксисом, например:

На этом мы заканчиваем наше введение в React. Теперь вы должны хорошо понимать следующее:

как получить React
Как использовать Babel с React
Использование JSX
Создание компонента посредством метода extend
Использование своего компонента и передача ему данных

В этом руководстве описывается, как напрямую установить React в Windows с помощью цепочки инструментов create-react-app.

Мы рекомендуем следовать этим инструкциям, если вы не знакомы с React. Если вы создаете одностраничное приложение (SPA), которое должно использовать команды или средства Bash, или планируете развертывание на сервере Linux, мы рекомендуем установить create-react-app в подсистеме Windows для Linux (WSL).

Дополнительные сведения о React, выборе между React (веб-приложения), React Native (мобильные приложения) и React Native для Windows (классические приложения) см. в статье Общие сведения о React.

Предварительные требования

Установите последнюю версию Windows 10 (версия 1903+, сборка 18362+). , включая дистрибутив Linux (например, Ubuntu), и убедитесь, что она работает в режиме WSL 2. что можно проверить, открыв PowerShell и выполнив команду wsl -l -v ; В этих инструкциях для установки используется nvm. Для выполнения create-react-app требуется последняя версия Node.js, а также последняя версия npm. Точные требования к версии см. в разделе о Create React App.

Создание приложения React

Чтобы установить всю цепочку инструментов React в WSL, мы рекомендуем использовать create-react-app:

Откройте окно терминала (командная строка Windows или PowerShell).

Создайте новую папку проекта mkdir ReactProjects и войдите в этот каталог: cd ReactProjects .

Установите React с помощью средства create-react-app, которое устанавливает все зависимости для создания и запуска полноценного приложения React.js:

npx — это средство запуска пакетов, используемое npm для выполнения пакетов без глобальной установки. Оно по сути создает временную установку React, чтобы в каждом новом проекте использовалась последняя версия React (а не текущая версия, как при глобальной установке). Использование средства запуска пакетов npx для выполнения пакета также минимизирует вероятность установки нескольких пакетов на компьютере.

Появится запрос на разрешение выполнить временную установку create-react-app и связанных пакетов. После завершения измените каталоги на каталоги нового приложения (my-app или любое другое выбранное вами имя): cd my-app .

Запустите новое приложение React:

Эта команда запустит сервер Node.js и откроет новое окно браузера с приложением. Вы можете использовать клавиши CTRL+С, чтобы прерывать выполнение приложения React в командной строке.

Create React App включает в себя конвейер сборки интерфейсной части с использованием Babel и webpack, но не работает с серверной логикой или базами данных. Если вы хотите создать веб-сайт, поддерживающий отрисовку на сервере, с помощью React и серверной части Node.js, рекомендуем установить Next.js вместо средства create-react-app, которое в большей мере предназначено для одностраничных приложений. Вы также можете установить Gatsby, если хотите создать статический веб-сайт, ориентированный на содержимое.

Когда вы будете готовы развернуть веб-приложение в рабочей среде, выполните npm run build , чтобы создать сборку приложения в папке build. Дополнительные сведения см. в руководстве пользователя по Create React App.

Если вы просто хотите побаловаться с React, то можете использовать онлайн-площадку для кода. Попробуйте пример Hello World на CodePen или CodeSandbox .

1.2.1.2 Минимальный HTML-шаблон

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

Если вы хотите использовать React для полноценного приложения, то переходите к изучению следующих разделов «Создание приложения на React» и «Добавление React в существующее приложение».

1.2.2 Следующие шаги

1.2.2.1 Быстрый старт

Перейдите к разделу «Быстрый старт» для пошагового ознакомления с концепциями React.
Перейдите к разделу «Для продвинутых» для более глубокого изучения.

1.2.2.2 Полноценная среда разработки

Более легкие решения выше подходят, если вы новичок в React или просто экспериментируете.

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

Добавление React в новое приложение: создайте новое приложение с полнофункциональным стартовым комплектом.
Добавление React в существующее приложение: добавьте React в систему сборки или большее приложение.

1.2.3 Добавить React в новое приложение

Самый простой способ начать работу над новым проектом React - это использовать стартовый комплект.

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

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

1.2.3.1 Создание React-приложения

Пример Create React App - это лучший способ начать разработку нового одностраничного приложения React. Он настраивает вашу среду разработки, чтобы вы могли использовать новейшие функции JavaScript, предоставляет хороший опыт разработки и оптимизирует ваше приложение для продакшен. Вам понадобится Node >= 6 на вашем компьютере.

Если у вас установлен npm 5.2.0+, вы можете использовать npx .

Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build . Она создаст оптимизированный билд вашего приложения в папке build. Больше информации можно получить по ссылкам Read Me и User Guide .

1.2.3.2 Создание React-приложения

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

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

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 пакеты должны использовать одну и ту же версию. (Сюда входят react , react-dom , react-test-renderer и т.д.)

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

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

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

1.2.4.3 Hello World с ES6 и JSX

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

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

Данный код отрисовывается в DOM-элемент с атрибутом id="root" . Поэтому все, что необходимо сделать - это разместить <div ></div> где-нибудь в HTML-файле.

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

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

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

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

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

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

Создание production-сборки с Create React App
Создание production-сборки с Single-File Builds
Создание production-сборки с Brunch
Создание production-сборки с Browserify
Создание production-сборки с Rollup
Создание production-сборки с Webpack

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

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

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

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

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

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

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

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

Почему React?

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

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

Установка и настройка

Есть несколько способов начать работу с React. Во-первых, мы взглянем на CodeSandbox и CodePen. Если вы хотите сразу начать играть с кодом, это хороший способ!

Затем мы сосредоточимся на установке проекта React с помощью Create React App - которое дает вам отличную отправную точку для ваших проектов без необходимости тратить время на настройку среды сборки.

React в CodeSandbox

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

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

React в CodePen

Альтернативой CodeSandBox является CodePen . Многие разработчики используют CodePen для демонстрации своей работы, создавая «прототипы» для быстрых демонстраций кода или «проекты», когда задействовано несколько файлов. CodeSandbox, безусловно, более многофункциональный для работы с React, однако CodePen также является хорошим решением.

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

Create React App - это инструмент (созданный разработчиками из Facebook), который даст вам огромное преимущество при создании приложений React. Он обрабатывает все настройки, поэтому вам не нужно знать ни Babel, ни Webpack. Вы просто запускаете первоначальную установку, и вы сразу же окажетесь в локальной среде разработки!

Установка с помощью Create React App

Все, что нам нужно сделать, это открыть наш терминал и запустить следующую команду:

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

Запустите указанную выше команду, чтобы начать установку! Дайте ему любое имя, которое вам нравится..

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

Успех! Теперь вы можете открыть папку вашего проекта и проверить созданную файловую структуру.

Несколько команд были добавлены в файл package.json :

npm start запускает сервер разработки, включая автоматическую перезагрузку страницы при внесении изменений
npm run build связывает приложение в статические файлы для производства в папку build
npm test запускает тестов с помощью Jest
npm run eject выводит настройки вашего приложения из create-react-app, которые позволяет вам настроить конфигурацию вашего проекта

Запуск вашего приложения

Теперь давайте запустим наш локальный сервер! Из папки вашего приложения запустите:

Ваше приложение запустится в браузере на localhost:3000

Каждый раз, когда вы начинаете новый проект с помощью create-react-app, вы будете иметь последнюю версию React, React-DOM и React-Scripts. Теперь давайте кратко рассмотрим некоторые функции create-react-app.

Возможности Create-React-App

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

Прод сборка

Когда приходит время перейти от разработки к публикации в сети, вы можете сделать это, запустив npm run build . Будет сгенерирована папка build , содержащая все статические файлы, которые будут использоваться на сервере.

Сама команда build преобразует ваш код React в код, который понимает браузер (используя Babel). Он также оптимизирует ваши файлы для лучшей производительности, объединяя все ваши файлы JavaScript в один файл, который будет минимизирован для сокращения времени загрузки.

Тестирование вашего приложения

В комплекте с create-react-app поставляется JEST, который позволяет проверить ваш код с помощью команды npm test . Он будет запускаться аналогично npm start , он будет перезапускать ваши тесты каждый раз, когда вы вносите изменения.

Для тех, кто заинтересован в тестировании компонентов с помощью Jest, все, что вам нужно, это либо добавить суффиксы к нужным файлам, .spec.js либо .test.js , либо переместить файлы с тестами в папку __tests__ . Jest запустит ваши тесты для указанных вами файлов.

Ejecting

Всякий раз, когда вы создаете приложение с помощью create-react-app, ваши параметры сборки не могут быть изменены, так как они были предварительно настроены в react-scripts. Тем не менее, запустив npm run eject , вы можете получить полный контроль над конфигурацией вашего приложения.

Конфиг будет скопирован в каталог вашего приложения в папку config , а скрипты - в папку scripts . Затем вы можете отредактировать настройки Webpack, Babel и ESLint в соответствии с вашими пожеланиями.

Опечатки и синтаксические ошибки приведут к ошибке компиляции. И если у вас есть куча ошибок, вы получите оверлей, разбивающий каждую, например так:

Заключение

Мы видели, как начать играть с React в CodeSandbox и CodePen. И мы рассмотрели, как настроить локальную среду разработки с помощью create-react-app. Вам не нужно тратить время на установку зависимостей или настройку процесса сборки - вы можете сразу перейти к написанию кода!

Читайте также: