Подключаем React и пробуем чего-нибудь сверстать на нем
React / подсказка к 1 задачке
Ну я надеюсь у тебя nodejs уже установлен. Если вдруг нет, то скачай отсюда https://nodejs.org/en/ и установи.
Теперь создадим пустую папку и откроем ее с помощью Visual Studio Code
далее открываем консольку
и проверяем сначала что nodejs нормально установился. Пишем
node --version
и видим что-то такое:
если это есть значит все ок.
Считаю, что у тебя все ок =)
Создание проекта на react
Пишем в этой же консольке
npx create-react-app .
и ждем
я назвал свой папку с большими буквами, а так делать нельзя поэтому папку придется переименовать. Например в react_css_text
и открыть ее через visual studio code по новой
в общем, снова в консольке пишу
npx create-react-app .
ждем, пока будут скачаны все пакеты необходимые для работы react приложения, как и в случае со всяким современным javascript приложением качается пол интернета…
в общем, когда все закончится то увидим, что в папке появилась тьма файлов
плюс нам предлагают ввести команду npm start для запуска приложения (это примерно, как jekyll serve)
Пишим
и в браузере открывается
собственно, приложение на react запущено =О
Глянем что тут происходит. Самый главный файл это App.js, он представляет собой смесь javascript и html. Такой формат именуется JSX (java script extended). Это, по сути, главный шаблон приложения
Сразу встает вопрос если это базовый шаблон, то где тогда всякие <html><body> и т.д.
Ну на самом деле я немного наврал. На самом деле, тут два других файла являются самыми главными.
Первый – это public/index.html
который выглядит вот так если убрать комменты
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
то есть обычный такой html. Например, если ты захочешь подключить fontawesome просто добавишь ссылку в head, в общем как обычно.
Внутри body нас интересует <div id="root"></div> это тег к которому будет привязываться react приложение. То есть именно в него будут добавляться все теги которые прописаны в App.js
Где ж собственно происходит привязка? А привязка происходит во втором главном файле index.html, находится в нем примерно следующее
Подключаем bootstrap
Вообще есть несколько способов подключения bootstrap к приложению. Я не знаю какой юзает Влад, потому покажу оба.
Способ №1
Самый простой. Идем на сайт bootstrap и вставляем
и
в public/index.html
теперь попробуем загнать бутстраповскую навигацию. Идем в App.js, сначала все убираем
import logo from './logo.svg';
import './App.css';
function App() {
return (
// убрал тут все
);
}
export default App;
Кстати если сохранить и попробовать глянуть что происходит в браузере, там увидим
Это потому что мы делаем return пустоты, а React требует тегов. Дадим их ему
Ищем в бутстрапе навигацию, какую-нибудь попроще: https://getbootstrap.com/docs/5.0/components/navbar/#nav
и копипастим, как-то так:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default App;
Вообще, оно даже работает:
но это только на первый взгляд, если открыть консольку, там увидим красные варнинги
Первая ошибка требует переименовать все class в className, вторая жалуется на tabindex который надо переименовать в tabIndex
В общем конечно лениво, но выделяем слово class и тычем Ctrl+D, чтобы выбрать все повторения и переписываем на className, ну tabIndex внизу правим
Получится так:
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#" tabIndex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
);
ошибки ушли
ну точнее остались желтые ошибки, но они носят рекомендательный характер. В данном случае он ругается что у ссылок href-ы ведут в никуда… Ну и пусть.
Теперь настроим visual studio, чтобы она начала нормально поддерживать вот эти className вместо class. Ну типа, когда пишешь точка + имя класса, то вставляется div с указанным классом.
Мне это важно, так как часто пользуюсь. Идем в настройки
тыкаем там
и вводим там javascript и javascriptreact
попробуем теперь что-нибудь написать
красота =)
Способ №2
Это более прогрессивный способ. Заключается в установки пакета bootstrap.
Сначала идем в public/index.html и удаляем там подключение через теги, остается просто
теперь открываем консольку и пишем
npm install -S bootstrap
и ждем:
теперь идем в App.js и подключаем bootstrap через импорт:
import logo from './logo.svg';
import './App.css';
require('bootstrap'); // подключил скрипты
require('bootstrap/dist/css/bootstrap.css'); // подключил стили
function App() {
return (
// ...
смотрим:
ошибка =О
Бутстрапу надо еще один пакет установить, который называется @popperjs/core
Снова идем в консольку и там пишем:
npm install -S @popperjs/core
и снова ждем:
как закончит, надо добавить в App.js где-нибудь пробел, чтобы react понял, что файл изменился и можно проверять:
вот теперь другое дело.
Чем второй способ лучше. Ну он более каноничный при разработка js-приложения, плюс у тебя используется локальная копия bootstrap, а значит можно верстать даже без интернета.
В принципе в этом состоянии уже можно верстать одностраничники прям в один файл, правда это не канонично >__>
1