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

Никто не мешает делать вложенность по компонентам хоть до бесконечности.

Например, есть у нас компонента Content

function Content() {
    return (
        <div className="content container">
            Очень-очень интересный контент
        </div>
    )
}

export default Content;

мы можем внутри контента добавить компоненты под секции. Но чтобы папка src не забивалась у нас мусором. Мы создадим в ней подпапку и будем создавать компоненты уже внутри нее

кстати, Влад используем немного другой формат объявления компонент. Он немного более сложный, но позволяет более гибко управлять поведением. Поведение нам пока не очень интересно. Так что просто рассмотрим, как объявлять компоненты таким образом.

В общем пишем в Section1.js:

import React from 'react'; // импортнули реакт

class Section1 extends React.Component { // объявили класс под секцию
    render() { // переопределил метод render
        return (
            // тут обычная верстка идет
            <section className="section1 bg-primary p-3 text-white">
                Первая секция
            </section>
        );
    }
}

export default Section1;

ну а дальше запихиваем как обычно:

import Section1 from "./content/Section1"; // импортнули секцию

function Content() {
    return (
        <div className="content container">
            Очень-очень интересный контент
            <Section1 /> // подключили как новый тег
        </div>
    )
}

export default Content;

если мы, например, хотим стилизовать секцию, мы можем конечно писать все в App.scss, но более грамотно создать отдельный файлик под Section1 и прописать стили туда:

а потом подключить его в Section1.js

import React from 'react';
import"./Section1.scss"; // подключил

class Section1 extends React.Component {
    render() {
        // ...
    }
}

export default Section1;

проверяем:

Уря!!!11111 =)

3

Добавить еще пять секций. Для объявления секций использовать классы с функцией render. У каждой секции должен быть свой scss файлик.

Секции должны показывать своего рода обратный отчет. То есть на каждой пишем цифру, на последней пишем пуск. Типа:

  • 5
  • 4
  • 3
  • 2
  • 1
  • Пуск

Цифру центрировать по вертикали и горизонтали. Цвет фон прописывать в scss файлах, можно поиграться с другими стилями, например, с высотой, а также размером и цветом шрифта.

Что-то в таком роде сделать: