В этом посте я кратко расскажу вам о React, и мы собираемся создать простое приложение Калькулятор свободного времени, например этот.
Прежде всего, давайте посмотрим, что мы будем делать сегодня.
Обзор
- Что такое Реакт?
- Начало работы с React
- Код проекта
Что такое Реакт?
React — это интерфейсный JavaScript-фреймворк от Meta (ранее Facebook), который упрощает создание веб-приложений.
React использует виртуальный DOM, который позволяет быстро и легко обновлять контент на вашей веб-странице, а пользователям не нужно обновлять страницу, чтобы увидеть обновление. Это дает ощущение реального времени на вашем сайте.
React позволяет разработчикам создавать большие веб-приложения, которые могут изменять данные без перезагрузки страницы. Основная цель React — быть быстрым, масштабируемым и простым. Работает только на пользовательских интерфейсах в приложении. Это соответствует представлению в шаблоне MVC.
Начало работы с React
Как упоминалось ранее, React — это среда JavaScript, а это значит, что ему нужна среда, в которой можно запускать код JavaScript.
Как правило, наши компьютеры не понимают JavaScript. Вот где Node.js приходит на помощь. Node.js (или сокращенно Node) — это среда выполнения JavaScript, которая позволяет нашим компьютерам запускать код JavaScript. Но мы должны установить Node, прежде чем наше приложение React сможет работать.
Чтобы установить Node.js, посетите их веб-сайт и загрузите LTS-версию для своей операционной системы, а затем запустите программу установки.
Чтобы подтвердить установку, откройте Терминал (в Linux/Mac) или Командную строку (в Windows — WindowsKey + R, затем введите cmd и нажмите Enter). Вы должны иметь возможность запускать эти команды — конечно, ваши версии будут отличаться от моих.
Теперь осталось создать наш проект. В терминале введите эти команды.
Ваш пример приложения React должен быть запущен по адресу http://localhost:3000. Откройте этот URL-адрес в своем браузере и просмотрите свое приложение.
Код проекта
Теперь откройте свой проект в вашем любимом редакторе кода и приступайте к написанию кода. Попробуйте изменить содержимое вашего App.js — что вы заметите?
React автоматически обновляет наше приложение, когда мы вносим изменения в код. Это поведение похоже на то, когда оно обновляет наше приложение на основе изменений, внесенных в состояние или данные приложения.
На этом этапе мы можем приступить к созданию нашего приложения. Во-первых, нам нужно создать каталог компонентов (также известный как папка) и в этой папке создать файл index.js и вставить этот код в ваш файл components/index.js и сохранить его.
Давайте рассмотрим код, который мы только что добавили. Мы просто создали два компонента
ComboBox — список предопределенных действий, которые мы можем отфильтровать, чтобы получить элемент в списке или моментально добавить к нему по мере необходимости.
ActivityForm — форма, которая позволяет нам добавлять наши ежедневные действия и сохранять их в состоянии. Но что такое государство?
Состояние — это временные данные, необходимые нашему приложению для работы. Наше приложение React следит за состоянием на предмет любых изменений и отражает эти изменения в пользовательском интерфейсе.
Мы также немного обработали форму, чтобы убедиться, что наши данные отправляются в наше основное приложение для обработки, когда пользователь нажимает кнопку «Добавить» в нашей форме.
Теперь вставьте этот фрагмент кода в свой App.js, чтобы заменить шаблонный код.
Что мы только что сделали? Мы обновили наш файл App.js, чтобы отображать и обрабатывать события, отправленные нашими компонентами. Мы также добавили математическую логику для расчета нашего свободного времени на основе количества действий, которые мы делаем ежедневно.
Далее, мы хотим, чтобы наше приложение имело приятный внешний вид и удобство для пользователя, так что давайте сделаем это.
В App.css замените содержимое на это, сохраните изменения и проверьте свой браузер.
Ух ты! Наше приложение выглядит красиво. Давайте попробуем. Таким образом, мы можем видеть, сколько свободного времени у нас есть в день. Полный код приложения вы можете найти на моем Github
Если вам нравится эта демонстрация, подпишитесь на меня на Github и поставьте звездочку в репозитории.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
