как создать реакт приложение
Напишите свое первое приложение на React
Вы услышали о React и пришли сюда, чтобы написать свое первое приложение на нем. Это будет просто приложение hello world c использованием React. Через него мы изучим множество связанных понятий.
Что такое React для пятилетнего ребенка?
Пробуем React из CDN
Вы работали с jQuery? Если да, то вы знаете, как это просто добавить ссылку на файл jQuery и начать его использовать. Аналогичным образом давайте попробуем создать компонент Hello World в React.
Создайте HTML-файл index.html. Поместите в него тег
Затем добавьте следующие ссылки на CDN в свой HTML-файл.
CDN расшифровывается как Content Delivery Network. У провайдеров CDN есть серверы, распределенные по всему миру. Они кэшируют наши файлы (здесь response.development.js и response-dom.development.js) на всех своих серверах. Это помогает пользователю с любым географическим местоположением быстро получить нужный файл.
Настройка HTML завершена. Давайте напишем наш компонент Hello World в отдельный файл JavaScript ( component.js ). Добавьте ссылку на новый файл в наш HTML. Наш окончательный HTML-файл выглядит так:
Вот полный код для component.js.
Наш файл component.js готов. Теперь давайте откроем index.html в браузере. Он отобразит наш компонент React внутри div.
Здесь HTML-код, который рендерится как часть компонента React, написан с использованием React. Это говорит о том, что этот HTML рендерится с помощью JavaScript. Таким образом, при использовании React нам не нужно отображать весь HTML-код в браузере и программно скрывать ненужные части. Вместо этого мы можем выполнить проверку условий в JavaScript и рендерить только необходимый HTML-код.
Когда мы конвертируем код в эквивалентный код на React, он выглядит так:
Чтобы облегчить жизнь разработчикам, Facebook придумал специальный синтаксис под названием JSX (JavaScript Syntax eXtension). Вместо написания сложного кода при помощи React.createElement() он помогает работать с синтаксисом, похожим на HTML. Например, указанный выше компонент может быть написан на JSX так:
Подробнее о JSX в следующем разделе.
Создание компонентов React с использованием JSX
Как мы видели ранее, если мы используем синтаксис JSX, с ним легко работать. Но есть проблема. Браузеры могут загружать файлы JavaScript и выполнять их с помощью своего JavaScript-движка. Движки JavaScript не могут понять JSX.
Давайте переименуем наш файл component.js в component.jsx. Это просто для удобства чтения кода. Теперь любой другой разработчик будет знать, что этот файл содержит код JSX. Вот полный код в component.jsx.
Установите Node.js
Вы можете проверить установку Node.js, введя следующую команду в терминале.
Будет отображен номер версии. У меня v12.14.1. Нам нужен Node.js для запуска некоторых инструментов сборки, таких как Babel.
При установке Node.js он также устанавливает NPM (Node Package Manager). Это менеджер, содержащий большое количество пакетов. Вы можете проверить установку npm, введя следующую команду в терминале.
Установите Babel
Babel это транспилятор. Это означает, что он может преобразовывать один тип кода в другой. Например: Babel может конвертировать код ES6 в ES5. Babel также может конвертировать код JSX в код React.js.
Ранее я уже установил v7.4.3 на моей машине.
Перед установкой @babel/preset-react нам нужно создать в нашем проекте файл с именем package.json. Этот файл поддерживает зависимости пакетов нашего проекта. npm имеет команду init для создания файла package.json. В терминале из корня нашего проекта выполните команду ниже.
Транспилирование JSX в JS
Из корневой папки проекта в терминале запустите эту команду.
Здесь мы говорим babel использовать @babel/preset-react для преобразования component.jsx в component.js. Если мы откроем файл component.js, то увидим транспилированный чистый код JavaScript.
Если мы откроем index.html в браузере, мы сможем увидеть результат.
Мы увидели, как создать компонент React с помощью JSX. На данный момент наш проект очень простой и содержит только один компонентный файл. Поэтому можно каждый раз заходить в терминал и запускать команду babel. Но по мере роста проекта нам необходимо автоматизировать некоторые задачи. Об этом мы поговорим в отдельной статье.
Создаем приложение React с нуля в 2021 году
Apr 24 · 10 min read
Замысел проекта
До этого подобную тему освещал Jedai Saboteur в своей статье Creating a React App… From Scratch (англ.), на которую ввиду ее грамотности даже сделали ссылку в официальной документации React.
Как бы то ни было, но время идет, и я р ешил создать современное приложение React с нуля в 2021 году. В итоге было решено добавить в цепочку инструментов ряд “важных элементов” и задействовать последние версии основных библиотек. В некотором смысле у меня получилась последняя версия вышеприведенного руководства.
Задача
Тем не менее помимо настройки простого рабочего приложения я также определил пару дополнительных, “важных” по меркам современного стека, требований:
Инструменты
Озадачившись списком необходимых инструментов, я решил обратиться к документации React.
После прочтения раздела Creating Toolchain from Scratch я прикинул следующий список:
Этот краткий отрывок достаточно подробно раскрывает суть необходимых компонентов. В итоге на их роли я выбрал:
Это вполне типичные варианты. Даже если вам не приходилось заниматься самостоятельной настройкой этих инструментов, то вы наверняка с ними либо работали, либо просто о них слышали.
Однако, согласно моим требованиям, все еще недостает одного элемента: библиотеки управления состоянием.
Redux могла стать очевидным выбором, но я предпочел Kea. Дело в том, что разработана Kea на базе Redux, но при этом существенно упрощает управление состоянием.
По правде говоря, здесь я определенно предвзят, так как выбрал Kea больше из-за того, что использую эту библиотеку на работе, а разработал ее мой коллега.
Начало
В src будет храниться весь исходный код проекта, а в public мы разместим статические ресурсы.
Настройка
Наше руководство будет не универсальным, а обучающим, и работа с возникающими сложностями станет его неотъемлемой частью.
В качестве примера я решил взять для этого руководства webpack v5, который вызвал ряд проблем совместимости с конфигурациями, используемыми мной ранее в проектах с webpack v4. Как обычно разобраться с этой проблемой и попутно запастись дополнительными знаниями мне помогла документация, различные статьи и посты на Stack Overflow.
Babel
Для работы Babel требуется еще несколько пакетов, которые устанавливаются так:
babel-core — это компилятор, то есть сам основной компонент.
babel-cli позволит использовать компилятор из командной строки.
Последние три пакета — это “шаблоны” (настройки) Babel для работы с различными сценариями использования. present-env избавляет нас лишних проблем, позволяя писать современный JS-код и обеспечивая его работоспособность на различных клиентах. preset-typescript и preset-react говорят сами за себя: так как используем мы и TypeScript, и React, то нам понадобятся они оба.
TypeScript
В этом проекте мы будем использовать TypeScript, поэтому у него будут свои дополнительные настройки.
Сначала установим пакет typescript :
Забегая чуть вперед, я предлагаю вам также установить следующие пакеты, если вы собираетесь следовать руководству до конца:
В них содержатся объявления типов для модулей, которые мы задействуем в проекте.
Можете смело менять приведенную конфигурацию под свои нужды. Тем не менее важно сохранить эти опции:
Webpack
Для работоспособности этому инструменту также требуется ряд настроек. По сути, для каждого типа файла, который мы будем собирать, понадобится отдельный загрузчик.
webpack и webpack-cli следуют тому же принципу, что и Babel. Первый является основным пакетом, а второй позволяет обращаться к нему через командную строку.
webpack-dev-server требуется нам для локальной разработки. Вы заметите, что package.json никогда не ссылается на него из скрипта, но он необходим для запуска webpack serve :
Последними идут загрузчики, нужные для разных файлов, которые мы будем обрабатывать. ts-loader также присутствует, но поскольку мы используем для компиляции JS-файлов Babel, фактичекски, он нам не понадобится.
В завершении, как и для Babel, нужно настроить файл конфигурации webpack.config.js :
React
Учитывая, что создаем мы приложение React, нам также нужны и соответствующие пакеты.
Этого будет достаточно:
В завершении настроим библиотеку управления состоянием.
Согласно документации нам нужно следующее:
Здесь мы подумаем наперед и добавим отдельный пакет, который используется при написании логики Kea в TypeScript:
package.json
После всей этой настройки нужно добавить в package.json пару скриптов:
start будет запускать сервер, а typegen генерировать типы для файлов логики Kea.
Наконец, сам код React
Нехило так настроечек? Думаю, что шаблоны определенно заслуживают благодарности, особенно, когда они берут на себя все управление зависимостями и версионирование (react-scripts).
Как бы то ни было, но с настройкой мы закончили, и пора заняться кодом.
Но сначала немного чистого HTML
Здесь происходит несколько действий:
Точка входа
Вот содержимое моего:
Здесь происходит три основных действия:
2. Мы импортируем и отрисовываем компонент App (который еще не собран).
3. Мы сообщаем React отрисовать приложение, используя div root из index.html в качестве «точки привязки».
Приложение!
Далее также внутри src/ создайте файл App.tsx со следующим содержимым:
Эти два дополнительных компонента я включил, чтобы убедиться в следующем:
Так что при желании вы можете на этом остановиться. Если же вы тоже хотите увидеть, как работают перечисленные возможности, то продолжим.
Написание JS и TS
Проблем не возникает, так как в webpack.config.js установлено это правило:
Чтобы убедиться в работоспособности этой схемы, я просто создал мелкий JS-компонент и импортировал его в приложение.
Counter
Последним я добавил в этот мини-проект традиционный React-компонент Counter.
Задачей было убедиться в работоспособности настроек Kea и в том, что при этом также работает импорт CSS-файлов.
1. index.tsx — содержит сам компонент:
3. style.css — здесь я использовал минимальную стилизацию просто, чтобы убедиться в правильной работоспособности CSS:
Вот и все!
Если вы добрались до этой части, то, надеюсь, на выходе вы получили свежеиспеченное приложение React, современный шаблон, а также некоторый багаж дополнительных знаний. Честно говоря, здесь я просто задокументировал часть своего процесса обучения, но и вы наверняка из этого что-нибудь да почерпнули!
Пишем полноценное приложение на React с нуля за час
Авторизуйтесь
Пишем полноценное приложение на React с нуля за час
В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.
Прим. перев. Если вы начинаете изучение React, вам также стоит прочитать наш материал, в котором разработчик делится советами по использованию этой библиотеки.
Этот материал был написан для воркшопа Open Source Dev Garage, прошедшего в рамках конференции разработчиков F8 2017. Чтобы лучше разобраться в том, как написать это приложение, посмотрите 48-минутное видео или следуйте письменным инструкциям в этом руководстве.
Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:
Создайте ваше первое приложение
Прежде всего вам понадобится node.js и редактор кода, например, Atom.
Откроем терминал и установим create-react-app :
Начнем создавать наше приложение прогноза погоды:
Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:
Новое приложение автоматически откроется в браузере!
Свойства и компоненты
Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js :
Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!
3–4 декабря, Онлайн, Беcплатно
Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:
Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве.
На этом этапе файл App.js должен выглядеть так.
Состояние
Применим this.state и this.setState в нашем компоненте App :
На этом этапе файл App.js должен выглядеть так.
Жизненный цикл компонентов и выборка данных
Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев.
Улучшим вывод render() для красивого вывода данных:
На этом этапе файл App.js должен выглядеть так.
Установка компонентов
Импортируем стили из bootstrap в начале файла:
Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:
Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch :
Окончательный вид нашего приложения:
Развертывание (дополнительный материал)
Прежде всего опубликуйте ваш код на Github, затем перейдите в ваш репозиторий и откройте файл ReadMe, в котором вы найдете инструкцию по развертыванию приложения на различных популярных сервисах.
Одним из таких сервисов является Netlify, особенно в случае, когда вы хотите использовать механизм «непрерывного развертывания».
Как я написал мобильное приложение на react-native
Меня зовут Алексей Андросов, я уже много лет работаю в Яндексе фронтенд-разработчиком. Два года назад мне и моим партнерам пришла в голову идея создать мобильную социальную сеть Verb. Идея Verb в том, что пользователи могут делиться небольшими статусами — “вербами” — о том, чем они занимаются в данную минуту, простыми вещами, о которых хочется рассказать друзьям, но некуда об этом написать. И мы уже даже получили инвестиции, но сейчас не об этом. Сегодня я хочу рассказать о том, как и почему я написал мобильное приложение на react-native.
У меня есть бэкграунд бекенд-разработчика, более 10 лет опыта веб-разработки, но создание мобильного приложения для меня было абсолютно новой областью. Что было делать в такой ситуации? Быстро изучить Objective-C или Swift для iOS и Java для Android? Параллельно писать два приложения сразу показалось плохой идеей, я один явно не смог бы быстро реализовывать все идеи на двух платформах. Поэтому я начал искать варианты для кроссплатформенной разработки.
Как раз кстати пришлась шумиха вокруг React, появился react-native. Тогда мне и захотелось его попробовать. Оглядываясь назад, выбор на react-native пал, по большому счету, не из-за каких-то объективных причин, а скорее из-за субъективных: до него уже были PhoneGap (WebView на JavaScript, CSS, HTML), Xamarin (C#) и NativeScript (JavaScript, TypeScript, Angular).
Опыт работы с PhoneGap у меня уже был и использовать его не хотелось (уже очень подкупали нативные компоненты вместо их реализации на веб-технологиях), C# я не знал, писать на Angular не хотелось, так что выбор пал на RN.
Как и NativeScript, RN имеет биндинги нативных компонент в JS, схожую систему работы (об этом поговорим позже) и возможности.
Первой версией, с которой мы начали, стала 0.7.1 (текущая версия — 0.46), первый мой коммит 21 июля 2015. Поддержки Android тогда не было совсем. Она появилась только в сентябре 2015 (0.11). При этом это была “первоначальная поддержка” платформы с кучей проблем и недоработок. Пройдет еще много времени до того, как поддержка iOS и Android станет более-менее равноценной в react-native.
Забегая вперед, скажу, что Android-версию мы в какой-то момент все же решили писать на Java. Приложение уже было нужно, а RN в тот момент оказался не готов (на текущий момент такой проблемы уже нет). А вот iOS-версия Verb полностью написана на react-native.
Что такое react-native?
Итак, react-native – это фреймфорк для разработки на react кроссплатформенных приложений для iOS и Android. React здесь используется именно как идея, а не реализация: JSX, компонентный подход, state, props, жизненный цикл компонентов, CSS-in-JS.
Если проводить аналогию с обычной веб-разработкой, то тут:
Чтобы было проще понять, приведу аналогию с привычным HTML. — это
CSS выглядит более привычным:
StyleSheet объявляет и компилирует стили, они сразу напрямую передаются в native, чтобы не гонять каждый раз. PixelRatio нужен для пропорционального увеличения размера элементов в зависимости от экрана.
Как работает RN
Если прекрасная статья от Tadeu Zagallo про кишки RN, я вам вкратце расскажу ее суть.
В iOS есть три треда:
— shadow queue — очередь обработки и отрисовки layout
— main thread — тут работают компоненты
— JavaScript thread — тут работает JS
Общая схема работы выглядит так: исполняется JS (по сути React), результат работы надо передать в нативный код. Для этого есть специальный мост, который с помощью JSON передает набор инструкций. RN их исполняет и отрисовывает нативные компоненты платформы. Результат работы через тот же мост может вернуться обратно в JS.
Все общение асинхронное. При этом самым узким местом является непосредственно мост, сериализация и десериализация данных. Отсюда интересные особенности:
Write once, run everywhere?
Не тут-то было ). На самом деле парадигма звучит так: learn once, write everywhere. Почему так получается? Все нативно, поэтому забудьте про полную кроссплатформенность. Платформы разные, поэтому и нативные компоненты разные. У них разная логика работы и механика взаимодействия. В основном это касается компонентов навигации и взаимодействия с пользователем. Поэтому в начале разработки имеет смысл сразу накидать болванку приложения с базовыми экранами и переходами. На этом разница заканчивается, все внутренние компоненты скорее всего окажутся одинаковыми. Удобство добавляет и сам RN, весь платформоспецифичный код можно разделять на файлы component.ios.js и component.android.js, тогда для каждой платформы будет собираться своя версия без всяких if внутри.
iOS версия Verb изнутри
Изнутри приложение написано на react-native + redux. Redux пригодился, кстати, не только, как хорошая библиотека для организации работы с состоянием приложения, но и для общения между компонентами. RN провоцирует писать pure компоненты без сайд-эффектов или использования глобальных объектов, поэтому общение компонентов через общий state является чуть ли не единственным нормальным способом.
Так же мы используем геолокацию и пуши. В react-native для этого есть все необходимое.
Важная часть — производительность. Как я уже писал, узким местом в RN является мост JS native, поэтому проблема уменьшения количества перерисовок становится во весь рост. Отсюда следует, что все советы и best practice от react и redux имеют очень большое значение. React.PureComponent или shouldCompomentUpdate, меньше connect-компонентов, плоские структуры данных, иммутабельность — все дает хороший прирост производительности.
Неочевидные советы
Не надо затягивать обновление версий. Раньше, когда RN выпускался раз в 2 недели и почти каждая версия имела несовместимые изменения, этот совет имел очень большое значени. За 1-2 месяца фреймворк мог измениться очень сильно, поэтому обновляться сразу на пару версию было очень сложно. Сейчас ситуация обстоит лучше, релизы раз в месяц, фреймворк уже не меняется так сильно. Но я как и раньше обновляюсь сразу, как только выходит новая версия.
Унификация react-компонент (тут понадобится помощь дизайнера) позволяет очень быстро разрабатывать новые экраны. Вообще, компонентный подход и быстрое связывание компонент — это хорошая фишка как react, так и react-native.
boilerplate для создания новых экранов в rn + redux достаточно большой. Как и в react+redux, так и rn+redux придется написать много кода для создания нового экрана: создать компонент экрана, зарегистрировать его в Navigator, написать actions и reducer для перехода на экран. Плюс к этому стандартный boilerplate для обработки данных для нового экрана.
Не надо все писать на JS. Приложение надо писать максимально близко к native, искать биндинги в нужные native-компоненты или писать их самим. Уверяю, это совсем не сложно.
Надо участвовать в сообществе. В RN достаточно багов и недоработок, но нет никаких проблем их поправить. Мейнтейнеры активно участвуют в PR. Правда, зачастую приходится исправлять баги в самом native-коде, так что Java или Objective-C придется подучить. Все мои PR приняли. Например, я исправил несколько багов в работе камеры или загрузке фотографий на сервер.
Заключение
Писать на react-native оказалось удобно, быстро и приятно. Он правда позволяет быстро создавать прототипы приложений и доводить их до релиза. Технология молодая, поэтому есть типичный проблемы early adopters (например, периодические несовместимые изменения). Но с каждый релизом RN становится все лучше и стабильнее, Facebook прилагает к этому много усилий и делает на него ставку. К текущему моменту часть приложения Facebook уже написано react-native, а поддержка Android достигла уровня iOS.
Я достаточно поработал с технологией и могу сказать, что написать не слишком большое iOS-приложения, аналогичное Twitter или Instagram, вполне реально. К сожалению, глубоко попробовать android так и не получилось, поэтому утверждать не могу, но, надеюсь, что в будущем можно будет попробовать конкурировать с нашей нативной iOS-версией.
Как создать и развернуть Full-Stack React-приложение
Привет, Хабр! Представляю вашем вниманию перевод статьи «How to Build and Deploy a Full-Stack React-App» автора Frank Zickert.
Компоненты инфраструктуры позволяют легко создавать, запускать и развертывать полноценное React-приложение. С этими React-компонентами вы можете сосредоточиться на написании бизнес-логики вашего приложения. Вам не нужно беспокоиться о его конфигурации.
Хотите стать full-stack разработчиком? Full-stack приложение дополняет интерактивный веб-интерфейс React сервером и базой данных. Но такое приложение требует гораздо больше настроек, чем простое одностраничное приложение.
Мы используем компоненты инфраструктуры. Эти React-Компоненты позволяют нам определять нашу инфраструктурную архитектуру как часть нашего React-приложения. Нам больше не нужны никакие другие настройки, такие как Webpack, Babel или Serverless.
Старт
Вы можете настроить свой проект тремя способами:
Скрипт сборки добавляет еще три скрипта в package.json:
Определите архитектуру вашего приложения
Проекты, основанные на компонентах инфраструктуры, имеют четкую структуру. У вас есть один компонент верхнего уровня. Это определяет общую архитектуру вашего приложения.
Подкомпоненты (дочерние компоненты) уточняют(расширяют) поведение приложения и добавляют функции.
определяет время выполнения вашего приложения. Например, вы можете иметь dev и prod версию. Вы можете запускать и развертывать каждую отдельно.
— это страница вашего приложения. он работает как в react-router. Вот туториал о том, как работать с маршрутами.
определяет функцию, которая выполняется на стороне сервера. Он может иметь один или несколько — компонентов в качестве дочерних.
работает как Express.js-middleware.
добавляет базу данных NoSQL в ваше приложение. Принимает — компоненты как дочерние. описывает тип элементов в вашей базе данных.
Эти компоненты — все, что нам нужно для создания нашего full-stack приложения. Как видите, наше приложение имеет: одну среду выполнения, одна страница, два сервиса и базу данных с одной записью.
Структура компонентов обеспечивает четкое представление о вашем приложении. Чем больше становится ваше приложение, тем важнее это.
Проектирование Базы данных
создает Amazon DynamoDB. Это база данных ключ-значение (NoSQL). Она обеспечивает высокую производительность в любом масштабе. Но в отличие от реляционных баз данных, она не поддерживает сложные запросы.
Обладая этими знаниями, давайте взглянем на наш :
описывает структуру наших данных. Мы определяем имена для наших primaryKey и rangeKey. Вы можете использовать любое имя, кроме некоторых ключевых слов DynamoDB, которые вы можете найти здесь. Но имена, которые мы используем, имеют функциональные последствия:
Добавить элементы в базу данных
Компонент — принимает три параметра:
DataLayer обеспечивает доступ к базе данных. Посмотрим как!
Асинхронная функция mutate применяет изменения к данным в нашей базе данных. Это требует клиента и команды мутации в качестве параметров.
Данные элемента — это объект Javascript, который имеет все необходимые пары ключ-значение. В нашем сервисе мы получаем этот объект из тела запроса. Для User объект имеет следующую структуру:
Получить элементы из базы данных
Получить элементы из базы данных так же просто, как добавить их.
Посмотрите на свое Full-Stack приложение в действии
Если вы еще не запустили свое приложение, сейчас самое время сделать это: npm run start-
Этот пост не описывает, как вы вводите данные, которые вы помещаете в базу данных, и как вы отображаете результаты. callAddUserService и callGetUserService инкапсулируют все, что является специфическим для сервисов и базы данных. Вы просто помещаете туда объект Javascript и получаете его обратно.
Вы найдете исходный код этого примера в этом GitHub-репозитории. Он включает в себя очень простой пользовательский интерфейс.