Как запустить react приложение
What You'll Be Creating
React стал популярным фреймворком, как для разработки на стороне клиента, так и сервера. Изначально react имел высокий порог вхождения, когда дело касалось инструментов сборки, помимо этого наблюдалось некоторое разочарование в JavaScript со стороны сообщества. create-react-app как раз и был создан, чтобы изменить положение вещей.
Начнём
Для начала убедитесь, что у вас установлен Node. Вам понадобится по крайней мере Node 4 версии, но рекомендуется 6 версия для быстрой загрузки пакетов и оптимизации дискового пространства. Можно использовать nvm для переключения между версиями Node.
После того как установите Node, откройте командную строку и поставьте глобально create-react-app, тем самым вы будете иметь возможность запустить команду где угодно на вашей системе.
npm install -g create-react-app
Как создать первое приложение
Сперва откройте командную строку и создайте или перейдите в директорию где вы планируете начать процесс разработки. Далее мы создадим приложение запустив create-react-app tuts-plus-react-app . Будет запущен инструмент командной строки и создано приложение tuts-plus-react-app.
Далее вам следует перейти в директорию приложения выполнив команду cd tuts-plus-react-app .
Запускаем приложение
Приложение использует webpack для запуска локального сервера. Вам доступна функция watch, когда вы редактируете код React и сохраняете изменения, они автоматически отобразятся в браузере.
В том случае, если в коде будут ошибки, вы также увидите предупреждения в браузере.
Стиль кода и тестирование
В вашем распоряжении имеется ESLint, он будет следить за тем, что приложение отвечает популярным стилям кода. Следовательно вы будете знать, что код стабильный, что особенно важно когда над проектом работают несколько человек. Я рекомендую использовать данную функцию, если вы начинающий React разработчик, изучите правильные React и JavaScript стили написания кода.
Если вам знакомо написание тестов для кода, в вашем распоряжении - Jest. Jest фреймворк для тестирования, который был создан и поддерживается Facebook, создателями React. Для запуска тестов, выполните npm test в командной строке. Запустятся тесты, после чего запустится watcher, для выполнения тестов, в то время, как ваш конечный код изменится. Можно добавить уже существующий файл с тестами в src/App.test.js .
Развёртывание приложение на сервере
Когда вы закончите разработку, время подготовить приложение к переносу на сервер. Всё что вам нужно сделать, так это выполнить npm run build в директории приложения. Данная команда запустит Babel для транспиляции React кода в код, который способен понимать браузер. Помимо этого, код будет минифицирован для лучшей производительности.
Пользовательский мануал
Ко всему прочему - документация касательно тестирования и развёртывания приложения.
Приятного хакинга
Надеюсь вы поняли насколько просто создать React приложение с create-react-app. Надеюсь это поможет понизить порог вхождения и начать работу с React. Я уверен вам это понравится!
В настоящее время 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. Вам не нужно тратить время на установку зависимостей или настройку процесса сборки - вы можете сразу перейти к написанию кода!
В этой статье я постараюсь разложить основы создания приложения на React.JS на составляющие. Начнем с рассмотрения как создать приложение React JS.
Что такое React JS?
React декларативен, т.е. мы описываем UI с помощью React и говорим ему, что мы хотим (а не как это сделать). React позаботится о том «как сделать» и переведет наши декларативные описания (которые мы пишем на языке React) в реальные пользовательские интерфейсы в браузере. React разделяет эту простую декларативную силу с самим HTML, но с React мы получаем декларативность для пользовательских интерфейсов HTML, которые представляют динамические данные, а не только статические данные.
React изменил правила игры, потому что он создал общий язык между разработчиками и браузерами, который позволяет разработчикам декларативно описывать пользовательские интерфейсы и управлять действиями с их состоянием вместо действий с элементами DOM. Это просто язык «результатов» пользовательского интерфейса. Вместо того, чтобы придумывать шаги для описания действий в интерфейсах, разработчики просто описывают интерфейсы в терминах «конечного» состояния (например, функции). Когда в этом состоянии происходят действия, React заботится об обновлении пользовательских интерфейсов в DOM на основе этого (и делает это эффективно).
Создание приложения React JS App
Для начинающих разработчиков не нужно арендовать хостинг, либо платить за сервисы по развертыванию среды для разработки react js. Достаточно на своем компьютере или ноутбуке установать node.js. Делается это в три клика.
Установка Node.js
Далее запускаем инсталлятор, все шаги стандартные, жмем next-next-next. Вот этот пункт можете оставить по умолчанию неактивным:
После завершения установки у Вас в пункте меню появятся программки:
Также в директории C:\Program Files\nodejs\ лежат файлы
Создаем приложение React JS App
Для установки react js нам понадобится консоль. Вы можете запустить Node.js command prompt. Я предпочитаю использовать far manager. Тут кто где привык работать.
Далее в консоли перейдем в эту папку и запустим команду для инсталляции create-react-app
Для этого в консоли запустим команду npm i -g create-react-app
Теперь нам необходимо создать приложение с помощью установленного на предыдущем шаге инструмента create-react-app. Инструмент create-react-app был создан Facebook и является рекомендуемым способом создания нового проекта.
Наше первое приложение будет называться hello_react. Для его создания запустим команду:
npx create-react-app hello_react
Запустится инсталляция приложения. Идет она примерно 5 минут (зависит на самом деле от скорости интернета, т.к. все зависимости скачиваются из интернета). Итак, в конце установки у вас должна появиться запись:
Т.к. вы только учитесь, то можете пока не использовать git. В итоге приложение весит довольно много (в текущей версии почти 250МБ):
Запускаем приложение React
Краткое описание файлов в приложении React JS
Общая конфигурация проекта React описана в package.json. Вот как это выглядит:
В файле находятся следующие атрибуты:
Рассмотрим структуру каталога приложения:
Сборка проекта React JS APP
Забегая немножко вперед, опишем как создается сборка проекта. После изменения приложения React и его отладки запускается команда:
Результат работы команды:
В результате у нас появится директория build:
В директории сборки весь код компилируется и минифицируется до наименьшего полезного состояния. Читаемость кода неважна, поскольку этот код не предназначен для чтения человеком.
Деплой/Deploy проекта на Heroku (развертывание приложения React)
Для того, чтобы задеплоить весь проект с автоматическим развертыванием приложения React без учета собранного проекта, необходимо скачать Heroku CLI:
Инсталлируем скаченный дистрибутив. Далее в консоли запускаем команду:
Откроется сайт, где нужно нажать кнопку Login (Enter your Heroku credentials)
Далее последовательно запускаем команды:
Далее можете внести на своей машине изменения в код App.js, например,
И повторить команды:
В таком виде проект соберется на стороне heroku.
Что такое JSX?
JSX — синтаксический сахар для функции React.createElement(component, props, . children) .
JSX позволяет нам писать элементы HTML на JavaScript и размещать их в DOM без вызова методов createElement() , либо appendChild() . JSX преобразует HTML-теги в элементы React. Не обязательно использовать JSX при разработке React, но рекомендуется.
С JSX вы можете писать выражения внутри фигурных скобок < >.
Важно помнить при создании компонентов React, что Вы не пишете HTML. Вы используете расширение JavaScript для возврата вызовов функций, которые создают элементы React (которые по сути являются объектами JavaScript).
Диаграмму жизненного цикла React-компонента можно посмотреть на сайте:
React Lifecycle Methods Diagram на русском:
или на английском:
Есть еще такая картинка:
Краткое описание жизненного цикла
Все, что вы видите в приложении React, является компонентом или частью компонента. В React компоненты созданы так, чтобы следовать естественному жизненному циклу. Они создаются (creation), развиваются (updating) и, наконец, умирают (deletion). Это называется жизненным циклом компонента.
Для каждого этапа жизненного цикла компонента, React предоставляет доступ к определенным встроенным событиям / методам, называемым перехватчиками жизненного цикла (lifecycle hooks) или методами жизненного цикла (lifecycle methods). Эти методы дают вам возможность контролировать и управлять тем, как компонент реагирует на изменения в приложении.
Рассмотрим три фазы жизненного цикла компонента React: Mounting, Updating иUnmounting.
Важно помнить, что render() это единственный метод, который требуется в компонентах React.
Что такое Mounting?
В React есть четыре встроенных метода, которые вызываются в указанном порядке при монтировании компонента:
Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.
Метод constructor
Метод constructor() вызывается раньше всего, когда компонент запускается, и это естественное место для установки initial state и других начальных значений.
Пример:
ReactDOM . render ( < Header / > , document . getElementById ( 'root' ) ) ;Что такое Updating?
Следующим этапом жизненного цикла является обновление компонента (Updating).
Компонент обновляется всякий раз, когда происходит изменение состояния или свойств компонента.
В React есть пять встроенных методов, которые вызываются в следующем порядке при обновлении компонента:
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Метод render() является обязательным и будет вызываться всегда, остальные необязательны и будут вызываться, если вы их определите.
Что такое Unmounting?
В React есть только один встроенный метод, который вызывается при размонтировании компонента:
state
Компоненты React имеют встроенный state объект.
В state объекте хранятся значения свойств, принадлежащих компоненту.
Когда state объект изменяется, компонент перерисовывается.
Объект state инициализируется в конструкторе:
ComponentWillMount() раньше был методом жизненного цикла и вызывался непосредственно перед методом render() . React отказался от его использования из-за того, что он часто используется небезопасно.
componentDidMount
Метод жизненного цикла componentDidMount() запускается сразу после завершения метода render() и подключения компонента к DOM. Это лучшее место для запуска асинхронной функции. Вот базовый пример того, как вы можете получить данные в компоненте класса:
componentDidUpdate
Если у вас есть состояние, основанное на props, вам может потребоваться использовать componentDidUpdate() метод, который вызывается сразу после обновления. Используйте его для обновления модели DOM, сравнивая предыдущие свойства с текущими, см. Пример ниже:
props и propTypes
Компонент функции React получает этот список в качестве своего первого аргумента. Список передается как объект с ключами, представляющими имена атрибутов, и значениями, представляющими присвоенные им значения.
В React мы описываем пользовательские интерфейсы с помощью компонентов, которые можно использовать повторно, компоновать и сохранять состояние.
Мы определяем маленькие компоненты, а затем собираем их вместе, чтобы сформировать более крупные. Все компоненты, маленькие или большие, можно использовать повторно, даже в разных проектах.
Вы можете думать о компонентах как о простых функциях (на любом языке программирования). Мы вызываем функции с некоторым input, и они дают нам некоторый output. Мы можем повторно использовать функции по мере необходимости и составлять более крупные функции из более мелких.
Компоненты React точно такие же:
Некоторые компоненты React чистые, но вы также можете добавить в компонент побочные эффекты. Например, компонент может изменить HTML-заголовок веб-страницы, когда он монтируется в браузере, или он может прокручивать представление браузера в определенное положение.
Что наиболее важно, компонент React может иметь private state для хранения данных, которые могут изменяться в течение жизненного цикла компонента. Это private state является неявной частью ввода, которая управляет выводом компонента, и именно это и дало React название!
Почему React вообще называется «React»?
Когда состояние компонента React (который является частью его ввода) изменяется, пользовательский интерфейс, который он представляет (его вывод), также изменяется. Это изменение в описании пользовательского интерфейса должно быть отражено на устройстве,с которым мы работаем. В браузере нам нужно обновить дерево DOM. В приложении React мы не делаем этого вручную. React просто отреагирует на изменения состояния и автоматически (и эффективно) обновит DOM при необходимости.
Что такое hook?
Функции hook React могут использоваться только в функциональных компонентах. Вы не можете использовать их в компонентах класса.
Чтобы увидеть пример базовой useState hook, давайте заставим Button компонент реагировать на событие щелчка. Давайте сохраним количество нажатий на нее в переменной «count» и отобразим значение этой переменной как метку кнопки, которую она отображает.
В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.
Прим. перев. Если вы начинаете изучение React, вам также стоит прочитать наш материал, в котором разработчик делится советами по использованию этой библиотеки.
Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:
Создайте ваше первое приложение
Прежде всего вам понадобится node.js и редактор кода, например, Atom.
Откроем терминал и установим create-react-app :
Примечание: Пользователям Linux или MacOS, возможно, потребуется дополнительно ввести команду sudo перед npm install -g .
Начнем создавать наше приложение прогноза погоды:
Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:
Новое приложение автоматически откроется в браузере!
Свойства и компоненты
Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js :
Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!
ABBYY , Москва, можно удалённо , От 250 000 ₽
Теперь создадим новый компонент WeatherDisplay . Так как функция render() — это «сердце» компонента, то именно она определяет, что будет отображено. Для начала создадим тег с каким-нибудь текстом внутри:
Изменим компонент App , чтобы отобразить наш WeatherDisplay :
Как видите, мы передали данные, которые обозначили переменной zip , в компонент WeatherDisplay . Они называются свойствами (props). Мы можем модифицировать наш компонент для отображения передаваемых данных:
Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:
Обновим render() в компоненте App , в котором, перебирая массив PLACES , создадим тег button для каждого города:
Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве.
На этом этапе файл App.js должен выглядеть так.
Состояние
Мы хотим, чтобы в приложении была возможность переключаться между местами, поэтому мы можем использовать состояние ( state ) для хранения данных в компоненте App .
Сначала давайте добавим функцию-конструктор, в которой будет использоваться super() , а затем установим начальное состояние this.state :
Функция render() может брать данные из this.state при составлении пользовательского интерфейса. Для этого мы можем использовать метод setState компонента React, который меняет состояние и перезапускает функцию render() , чтобы изменить пользовательский интерфейс.
Применим this.state и this.setState в нашем компоненте App :
На этом этапе файл App.js должен выглядеть так.
Жизненный цикл компонентов и выборка данных
Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев.
В этом примере мы хотим вызвать API, когда компонент загрузится на экране, для этого добавим код в componentDidMount . Обновим компонент WeatherDisplay :
Улучшим вывод render() для красивого вывода данных:
На этом этапе файл App.js должен выглядеть так.
Установка компонентов
Bootstrap — популярный набор инструментов для стилизации пользовательского интерфейса в HTML и CSS. Установим его вместе с react-bootstrap , который предоставляет компоненты React для bootstrap :
Импортируем стили из bootstrap в начале файла:
Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:
Заменим теги в компоненте App , чтобы вывести компоненты bootstrap :
Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch :
Выберите подходящее оформление на сайте bootswatch и установите его, заменив bootstrap . В нашем примере мы используем тему journal:
Окончательный вид нашего приложения:
Развертывание (дополнительный материал)
Прежде всего опубликуйте ваш код на Github, затем перейдите в ваш репозиторий и откройте файл ReadMe, в котором вы найдете инструкцию по развертыванию приложения на различных популярных сервисах.
Читайте также: