Разбиение на файлы

Внутри папки src создадим папку components

Внутри папки components создадим файл PrintRectText.js

Пишем в файле PrintRectText.js (код осуществляет создание текстовой надписи с фоном определённого цвета)

import React from 'react';

export default function PrintRectText(props) {
    const {paramsObj} = props;

    const contentValue = paramsObj.contentValue;
    const backgroundType = paramsObj.backgroundType;

    console.log(contentValue + " ___ " + backgroundType);

    if(backgroundType === "R") {
        return (
            <span style={{background: 'red', padding: '10px'}}>
                <b>
                    {contentValue}
                </b>
            </span>
        );
    }

    if(backgroundType === "G") {
        return (
            <span style={{background: 'green', padding: '10px'}}>
                <b>
                    {contentValue}
                </b>
            </span>
        );
    }

    return (
        <span style={{background: 'blue', padding: '10px'}}>
            <b>
                {contentValue}
            </b>
        </span>
    );
}

Внутри папки components создадим файл PrintThreeRects.js

Пишем в файле PrintThreeRects.js (код осуществляет создание трёх текстовых надписей разных цветов)

import React from 'react';

import PrintRectText from "./PrintRectText";

export default function PrintThreeRects(props) {
    const {paramsObj} = props;

    const s1 = paramsObj.s1;
    const s2 = paramsObj.s2;
    const s3 = paramsObj.s3;

    const objA = {
        contentValue: s1,
        backgroundType: "R"
    };

    const objB = {
        contentValue: s2,
        backgroundType: "G"
    };

    const objC = {
        contentValue: s3,
        backgroundType: "B"
    };

    return (
        <div style={{marginBottom: '25px'}}>
            <PrintRectText paramsObj={objA} />
            <PrintRectText paramsObj={objB} />
            <PrintRectText paramsObj={objC} />
        </div>
    );
}

Пишем в файле index.js (код осуществляет вывод информации о двух студентах)

import React from 'react';
import {render} from 'react-dom';

import PrintThreeRects from "./components/PrintThreeRects";

const studentFirst = {
    s1: "Иванов",
    s2: "Иван",
    s3: "Иванович"
};

const studentSecond = {
    s1: "Петров",
    s2: "Пётр",
    s3: "Петрович"
};

function PrintMain() {
    return (
        <div>
            <PrintThreeRects paramsObj={studentFirst}/>
            <PrintThreeRects paramsObj={studentSecond}/>
        </div>
    )
}

render(<PrintMain/>, document.getElementById('root'));

Запускаем приложение

Пишем в консоли

npm start