Использование мобильного телефона для создания проектов Reactjs.

Реагировать JS Введение

React — это библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и в настоящее время поддерживается большим сообществом разработчиков.

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

Компоненты React обычно реализуются с использованием комбинации JavaScript, JSX (расширение синтаксиса для JavaScript) и CSS. JSX — это синтаксис, который позволяет вам писать HTML-подобные (XML) элементы в вашем коде JavaScript. Это может сделать ваш код более читабельным и понятным, поскольку структура ваших компонентов ясна из самого кода.

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

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

Теперь, когда вы поняли, что такое React. Давайте перейдем к тому, как вы сможете создавать проекты Reactjs со своим телефоном на ходу, или если вы не используете компьютер для кодирования, как я.

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

А как вы могли додуматься до терминала на телефоне? Да, мы будем использовать Termux.

Наш терминал

Termux — это бесплатный эмулятор терминала с открытым исходным кодом и среда Linux для Android. Это позволяет пользователям запускать различные инструменты командной строки Linux на своем устройстве Android, что позволяет использовать устройство в качестве переносимой среды разработки.

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

Termux включает менеджер пакетов, аналогичный apt или yum в Linux, который позволяет пользователям легко устанавливать и управлять широким спектром программного обеспечения с открытым исходным кодом. Сюда входят популярные инструменты командной строки, такие как Bash, Python и Git, а также многие другие утилиты и библиотеки.

Кроме того, Termux также предоставляет набор инструментов командной строки, специально разработанных для работы на Android, таких как команды termux-notification и termux-location, которые позволяют отображать уведомления и получать текущее местоположение устройства соответственно.

Это приложение доступно в PlayStore, GitHub и F-droid. Но качать из PlayStore не рекомендуется, так как в последнее время приложение там не поддерживается. Советую скачать и установить его с GitHub, используя этот репозиторий https://github.com/termux/termux-app.

После установки вам необходимо обновить и обновить все доступные в приложении пакеты, и делается это с помощью команды;

pkg update && upgrade

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

termux-setup-storage

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

pwd 
ls 
cd storage

Находясь внутри папки хранилища, используйте команду «cd storage». Теперь мы можем установить пакеты.

Но здесь нас интересует только Reactjs. И если вы еще не знаете, прежде чем вы сможете что-то делать с React, вам нужно сначала установить nodejs. Итак, чтобы установить nodejs в наш терминал termux, мы используем эту команду

pkg install nodejs

Это может занять несколько минут в зависимости от скорости вашей сети.

Запускаем реакцию

После завершения установки nodejs. Мы создаем приложение для реагирования глобально, это своего рода установка. Поскольку nodejs уже установлен в нашей системе, для этого мы будем использовать «npm».

npm i -g create-react-app

После этого я хочу, чтобы вы сейчас же зашли в Play Market и скачали редактор кода «Acode», это мой любимый инструмент для работы с React. Здесь мы будем редактировать и создавать компоненты нашего приложения. После загрузки вернитесь к нашему терминалу и запустите эту команду, чтобы локально создать собственное приложение для реагирования.

npx create-react-app "your choice of name here"

Это тоже займет несколько секунд. После этого будет создан сервер разработки и с него будут загружены все необходимые пакеты. Он покажет вам несколько команд, которые вы можете запустить в этом приложении, например, «npm start» для запуска приложения, «npm test» для тестирования и т. д. Но здесь нас интересует команда:

npm start

И это запустит сервер и автоматически откроет браузер для визуализации.

Затем откройте приложение Acode, щелкните вкладку меню в верхнем левом углу приложения.

Затем нажмите на открытую папку, которая появится. При нажатии на открытую папку открывается файловый браузер.

Здесь вы нажимаете на знак плюса в правом верхнем углу приложения.

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

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

Я только начинаю учиться реагировать, поэтому эта статья пока остановится здесь. Я буду писать о своем прогрессе в будущем и о том, чему я научился.

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

Кроме того, хорошо похлопать и оставить комментарий, так как это побудит меня работать лучше.

Спасибо.