Учимся верстать на React за 5 минут
Эта статья для тех, кто уже знает CSS/HTML, немного JavaScript, хочет попробовать свои силы в React, но не знает, с чего начать. А начать можно как раз с верстки.
Допустим, есть у нас немного готовой HTML разметки для страницы логина, которая выглядит вот так:
Попробуем сделать эту страницу на React за несколько минут. Поехали!
Шаг 1: Открываем редактор
Создавать свой React проект не обязательно, проще всего взять готовый старт на CodeSandbox, который найдется в Google по запросу React CodeSandbox.
Выглядит он так:
И тут видно, что верстка уже есть .
div className="App"> h1>Hello CodeSandboxh1> h2>Start editing to see some magic happen!h2> /div>
Так что просто заменим верстку на ту, которая нам нужна (со страницы bootstrap sign-in). Это будет Шаг 2.
Шаг 2: Добавляем разметку
Открываем панель разработчика (а можно просто исходный код страницы) и забираем код, который относится к форме (на скриншоте справа) .
Copy-Paste из браузера в CodeSandbox, и видим такой результат:
Много красного! Но не отчаиваемся. Справа подсказка — все теги в React должны быть закрыты. Даже такие, которые в HTML не закрываются (например, input), то есть код HTML
type="checkbox" value="remember-me"> должен выглядеть так ( c закрывающим /> в конце )
type="checkbox" value="remember-me" /> Шаг 3: Правим теги
Правим все и теги на и , получаем результат:
Ура! Разметка появилась! Но без стилей. Значит, надо подключить бутстрап.
Шаг 4: Подключаем стили
Проще всего взять и скопировать файл стилей бутстрапа прямо в файл styles.css, который лежит рядом с App.js в нашем приложении:
Теперь видно, что стили подключились, но почему-то выглядит все не так красиво, как на демо. Внимательно изучаем демо страницу и замечаем дополнительный файл стилей специально для страницы signin:
Заберем этот код к себе, смотрим результат:
Последний штрих — выставим ширину 100% для #root контейнера (который нам достался от шаблона React) и отцентрируем:
Вот и все! Страницу, которая получилась в CodeSandbox можно посмотреть тут, а сам код — здесь.
P.S. Про картинку забыл написать:
Изучи React по индивидуальной программе с нашими менторами! Нанять наставника
Вместо заключения
Так можно за 5 минут стать React-верстальщиком 😉
Конечно, еще надо, как минимум, разделить файл стилей на несколько (вместо одного гигантского) и поправить ошибки в консоли. Это должно быть несложно, и можно попробовать сделать самостоятельно, а результат посмотреть тут.
Ссылки
- Исходное демо
- Что получилось
- Код
- Без ошибок в консоли и с разделением стилей на два файла
© Copyright 2014 — 2023 mkdev | Privacy Policy
Создание React-приложения: пошаговая инструкция
React.js быстро набирает популярность. Этот инструмент был выпущен в 2013 году, а уже через 7 лет занял второе место в списке веб-фреймворков, которые пользователи выбирают чаще всего.
В 2022 году на нём создано более 100 000 сайтов. В этой статье мы расскажем, что такое React, в чём его преимущества, и как им пользоваться.
Что такое React
React — это не фреймворк в общепринятом понимании, а, скорее, популярная и мощная библиотека JavaScript для построения веб-приложений. Бесплатный инструмент с активным сообществом разработчиков, постоянно расширяет свои границы. Благодаря своей быстрой компонентной архитектуре React востребован среди опытных и начинающих программистов.
React не предоставляет готового решения для разработки приложений, а предлагает инструменты и компоненты для создания индивидуального решения для вашего приложения. Такая гибкость делает ее привлекательной для разработчиков, которые хотят создавать приложения, специально адаптированные под их требования.
В основе React лежит концепция компонентов, представляющих собой фрагменты кода, которые могут многократно использоваться в приложении для упрощения управления кодом и его сопровождения. Компоненты пишутся с помощью HTML-тегов и функций JavaScript, которые обеспечивают необходимую функциональность для создания хорошо структурированного пользовательского интерфейса. Мелкие компоненты могут объединяться в более крупные с помощью композиции или наследования, что позволяет разработчикам легко масштабировать проект, не переписывая код с нуля каждый раз, когда требуется добавить новую функцию.
Помимо компонентной архитектуры, в React используется технология Virtual DOM, которая позволяет отслеживать изменения в пользовательском интерфейсе путем создания «виртуальных» версий HTML-элементов и обновлять только эти элементы по мере необходимости, а не заставлять браузер перерисовывать всю HTML-разметку каждый раз, когда на экране происходит обновление. Такой подход позволяет сократить лишние затраты на рендеринг и значительно повысить общую производительность, что делает React особенно удобным при разработке сложных пользовательских интерфейсов, например, в играх или визуализации данных.
Основные преимущества JS-библиотеки
Самой известной библиотекой для React считается JS – отличный источник информации как для разработчиков, так и для предприятий, поскольку обладает многочисленными преимуществами по сравнению с другими доступными библиотеками.
- Высокая производительность при создании нового проекта.
Она обеспечивает быстрый и надежный процесс разработки, а также имеет оптимизированные компоненты, что даёт возможность быстро создавать приложения с минимальными усилиями.
- Широкий набор инструментов.
Библиотека содержит большое количество встроенных функций, поэтому не нужно тратить время на их самостоятельное создание. Это тоже значительно упрощает и ускоряет создание проекта React, а также делает их экономически эффективными, поскольку требуется меньше ресурсов.
- Удобство использования и высокая производительность.
В JavaScript-библиотеку React включены множество пакетов для таких распространенных задач, как получение и проверка данных, поэтому процесс разработки становится ещё более эффективным.
- Гибкость, подходящая для проектов разного размера.
Гибкость JS-библиотеки делает ее идеальным решением как для малых, так и для крупных проектов, поскольку изменения можно вносить быстро, не переписывая с нуля все приложение или его раздел при необходимости модификации. Её масштабируемость со временем означает уменьшение технических проблем, поскольку она способна легко обрабатывать большие массивы данных.
- Масштабируемость, позволяющая работать с большими кусками данных.
Добавление новых функций с помощью JS-библиотеки становится относительно простым благодаря компонентному подходу, который позволяет легко добавлять новые функции в существующие модули, не требуя никаких дополнительных усилий по кодированию, кроме, может быть, настройки конфигурации, если это необходимо, при создании некоторых компонентов для повторного использования.
Инструкция: как создать React-приложение
Этот простой процесс состоит из 4 этапов.
Сначала нужно поставить Node.js, так как среди его компонентов есть менеджер пакетов npm, который требуется для загрузки Create React App.
В терминале пишем команду.
file_path\react>npm install create-react-app -g
Вместо «file_path» пропишите актуальный путь, по которому будет расположен проект. Дождитесь завершения процесса.
- Создание нового React-приложения.
Теперь нужна другая команда.
В данном случае «new-app» — это название вашего проекта, замените его.
Система выдаст сообщение о выполнении процесса, а также проинформирует, какие команды и для чего вы можете применять.
Открываем новое приложение в редакторе и видим в нём 2 папки.
В «public» есть файл index.html, а в «src» — index.js. Менять или удалять их недопустимо, другие элементы разрешается корректировать, задавать новые названия и т.д, это никак не отразится на работоспособности приложения.
Настройка выполняется через файл package.json
Дальше настраиваем приложение с использованием команд. Поскольку существуют зависимости от скриптов, рассмотрим несколько основных.
Это скрипт для запуска. Проект откроется в браузере, при этом в случае изменений файлов в папке «Src» проект автоматически обновляется и показывает актуальную версию.
- Скрипт run build
Скрип позволяет сделать рабочую версию проекта. Нужные для запуска файлы будут объединены, представив сборку, имеющую всё необходимое для корректного отображения.
После формирования минифицированной версии система даст возможность вручную развернуть приложение.
С помощью команды «run build» также можно проверить размер файлов после компиляции. Также у папок в этом случае появится дополнительна директория build.
Команда актуальна, когда нужно проверить работу приложения. Система найдёт файлы spec.js или test.js, а затем запустит их, предоставив отчёт о совершённом действии.
Другие команды для проверки представлены в Watch Usage. Например, «F» проверяет файлы failed, «O» применяется для скорректированных файлов.
Если стандартные элементы не соответствует задачам, это можно исправить с помощью представленной выше команды.
Будьте внимательны, процесс изменения необратим, об этом система вас проинформирует.
Если всё равно решили продолжить, подтвердите действие. Как только процесс завершится, станет доступна папка «config». В ней находится файл package.json, содержащий зависимости проекта.
Как изменить корневую страницу
Её можно редактировать после запуска, настройки нужно искать в папке «Public».
- favicon.ico, logo192.png, logo512.png – это знаки, отображающиеся в браузере или мобильной версии.
- manifest.json – это методанные.
- robots.txt – команды для поисковых роботов.
- index.html – основа директории, которая считывается сервером. В нём обязательно должен остаться хотя бы один элемент
Как изменить заголовки и стили
Теперь рассмотрим файлы в папке Src. SetupTests.js и App.test.js – требуются для запуска проекта в тестовом режиме. App.css, index.css и logo.svg – это файлы стилей. App.js и index.js помогают импортировать и преобразовывать элементы в JavaScript. ServiceWorker.js актуален для сложных задач. Если нужно обнулить настройки, вводим следующую команду. @import-normalize Как подготовить приложение к развёртке Как мы уже выяснили, сборка приложения осуществляется с помощью команды run build. В результате создаётся дополнительная директория build с файлом index.html, где уже создан готовый код. Его необходимо запустить на сервере.
Эффективность работы приложения также зависит от выбора сервера. Наиболее надёжный способ хранения данных — аренда выделенного сервера.
Ошибки при работе с React-приложениями
В заключение, при работе с React-приложениями неизбежно возникают ошибки. Однако, зная эти распространенные ошибки и умея их избегать или исправлять, вы можете значительно улучшить качество своего кода и оптимизировать работу приложения. Рассмотрим некоторые из наиболее распространенных проблем при работе с React, и предложим способы их решения.
- Применение крупных компонентов.
React позволяет создавать множество компонентов, что обеспечивает модульность и дальнейшее использование кода. Однако иногда разработчики склонны создавать очень большие компоненты, которые выполняют слишком много функций. Это может привести к трудностям в понимании кода и поддержке приложения.
Решение: разделите большие компоненты на более мелкие и специализированные. Такой подход позволяет легче понять функцию каждого компонента и повторно использовать его в других частях приложения.
- Изменение состояния.
Это одна из ключевых возможностей React. Однако некорректное изменение состояния может привести к неожиданному поведению приложения или даже к его поломке.
Решение: изменяйте состояние компонента, обращаясь исключительно к методу setState. Это гарантирует, что React правильно обновит компонент и его дочерние элементы. Кроме того, следует избегать изменения состояния напрямую.
- Строчная передача числа.
Если задать реквизиту числовое значение, отображение будет в виде first/last.
Решение: заключайте числа в фигурные скобки.
- Регулярное использование Redux.
Некоторые разработчики могут часто использовать Redux даже для незначительных изменений состояния.
Решение: запускайте Redux только для управления сложным глобальным состоянием приложения.
- Нарушение структуры папок
Структура папок — это важная часть организации проекта. Однако некоторые разработчики могут создавать неструктурированные папки или размещать компоненты в неправильных местах.
Решение: создавайте структурированные папки в соответствии с принятыми стандартами и лучшими практиками. Например, можно разделить компоненты по типу или по функциональности.
Подведём итоги
React становится всё более популярным среди веб-разработчиков в первую очередь потому, что он упрощает сложные задачи разработки, но при этом обеспечивает гибкость в настройке. Это позволяет разработчикам создавать надежные решения, ориентированные именно на их конкретные потребности и обеспечивающие масштабируемость в будущем. А рекомендации, представленные в этой статье, позволят избежать ошибок при развёртке приложений.
Добавляем React на сайт¶
Используйте React в том объёме, в котором вам хочется.
Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
- Добавляем React за одну минуту
- Необязательно: Используем React с JSX (без каких-либо бандлеров!)
Добавляем React за одну минуту¶
В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML файл.
Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.
Шаг 1: Добавляем DOM-контейнер в HTML¶
Для начала, откройте HTML файл страницы, которую хотите отредактировать. Добавьте пустой тег в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
1 2 3
div id="like_button_container">div>
Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript кода и отобразить React-компоненты внутри него.
Совет
«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Шаг 2: Добавляем script-теги¶
Теперь добавьте три -тега перед закрывающим тегом