React / подсказка к 2 задачке

Продолжим с нашим кодом из прошлого задания.

import './App.css';
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

function App() {
  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>
        <div className="my-class-name"></div>
    </nav>
  );
}

export default App;

Стилизация

Если тебе надо создавать новые классы или переопределять существующие. То тут все просто. Взглянем на файлик App.css, по идее он должен содержать стили специфичные для html в App.js.

Почистим его

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

.nav-link.active {
  background-color: yellow;
}

и сразу видим результат:

Кстати если нам вдруг захочется использовать scss. То надо сделать следующее.

Открываем консольку и пишем там:

npm install -S sass

ждем

Теперь переименовываем App.css в App.scss и правим импорт:

import './App.scss';  // заменил на App.scss
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

function App() {

function App() {
  return (
      // ...

еще мне пришлось перезапустить npm, для этого я в консольке где я писал npm run start нажал Ctrl+C, затем, когда меня спросили точно ли я хочу прервать приложение, я нажал Y, а потом снова написал npm start

Работает так же

но уже с использование scss.

Разбиение верстки

Допустим я хочу, чтобы у меня был стандартная страница с меню навигации, контентом и футером. Я могу все пилить прямо в App.js, добавить после навигации два div`а. И встретить первую проблему:

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

В этом случае, надо просто обернуть все содержимое в специальный тег <React.Fragment>, вот так:

тут правда надо еще вверх добавить import этого самого React

import './App.scss'; 
import React from "react"; // добавил
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

function App() {
  return (
    <React.Fragment>
        <!-- ... -->

от теперь работает:

и вроде все прекрасно, только когда контент становится сильно большим, поддерживать такую кучу верстки становится не удобно. У нас сейчас даже та же навигация занимает тьму места.

Поэтому в react очень легко можно бить верстку на компоненты/секции и т.п.

Давай добавим компоненту под навигацию, создаем файлик Navigation.js

и пишем в него

function Navigation() {
    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>
    );
}

export default Navigation; // обязательно эту строчку добавляем

то есть своего рода объявили функцию которая возвращает разметку.

Теперь идем в App.js и удаляем оттуда навигацию:

import './App.scss'; 
import React from "react";
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

function App() {
  return (
    <React.Fragment>
      // тут была навигация, теперь нет
      <div className="content container">
        Очень-очень интересный контент
      </div>
      <div className="footer container">
        Футер
      </div>
    </React.Fragment>
  );
}

export default App;

и теперь самое интересное.

Вверху в App.js добавляем импорт компоненты Navigation, которую мы только что собственноручно сделали:

import './App.scss'; 
import React from "react";
import Navigation from './Navigation'; // добавил импорт навигации
require('bootstrap');
require('bootstrap/dist/css/bootstrap.css');

function App() {
  return (

и используем эту компоненту как новый тег:

function App() {
  return (
    <React.Fragment>
      <Navigation /> // добавил навигацию
      <div className="content container">
        Очень-очень интересный контент
      </div>
      <div className="footer container">
        Футер
      </div>
    </React.Fragment>
  );
}

и все должно отрендерится прямо как раньше:

Теперь попробуй сама вынести остальные компоненты =О

2

Вынести футер и контент в отдельные компоненты