Учимся верстать на React за 5 минут

Illustration of a person with an exaggerated long arm typing on a laptop, likely depicting a concept of reaching out or extended effort in a digital context.

Эта статья для тех, кто уже знает CSS/HTML, немного JavaScript, хочет попробовать свои силы в React, но не знает, с чего начать. А начать можно как раз с верстки.

Допустим, есть у нас немного готовой HTML разметки для страницы логина, которая выглядит вот так:

Попробуем сделать эту страницу на React за несколько минут. Поехали!

Шаг 1: Открываем редактор

Создавать свой React проект не обязательно, проще всего взять готовый старт на CodeSandbox, который найдется в Google по запросу React CodeSandbox.

Выглядит он так:

И тут видно, что верстка уже есть .

   <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

Так что просто заменим верстку на ту, которая нам нужна (со страницы bootstrap sign-in). Это будет Шаг 2.

Шаг 2: Добавляем разметку

Открываем панель разработчика (а можно просто исходный код страницы) и забираем код, который относится к форме (на скриншоте справа) .

Copy-Paste из браузера в CodeSandbox, и видим такой результат:

Много красного! Но не отчаиваемся. Справа подсказка - все теги в React должны быть закрыты. Даже такие, которые в HTML не закрываются (например, input), то есть код HTML

<input type="checkbox" value="remember-me">

должен выглядеть так ( c закрывающим /> в конце )

<input type="checkbox" value="remember-me" />

Шаг 3: Правим теги

Правим все <input> и <img> теги на <input /> и <img />, получаем результат:

Ура! Разметка появилась! Но без стилей. Значит, надо подключить бутстрап.

Шаг 4: Подключаем стили

Проще всего взять и скопировать файл стилей бутстрапа прямо в файл styles.css, который лежит рядом с App.js в нашем приложении:

Теперь видно, что стили подключились, но почему-то выглядит все не так красиво, как на демо. Внимательно изучаем демо страницу и замечаем дополнительный файл стилей специально для страницы signin:

Заберем этот код к себе, смотрим результат:

Почти как надо!

Последний штрих — выставим ширину 100% для #root контейнера (который нам достался от шаблона React) и отцентрируем:

Вот и все! Страницу, которая получилась в CodeSandbox можно посмотреть тут, а сам код — здесь.

P.S. Про картинку забыл написать:

Вместо заключения

Так можно за 5 минут стать React-верстальщиком ;)

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