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

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

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

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

```javascript
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** (код осуществляет создание трёх текстовых надписей разных цветов)

```javascript
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** (код осуществляет вывод информации о двух студентах)

```javascript
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
```