Простейшая шаблонизация

Простейшая шаблонизация

Содержимое файла index.js внутри папки src

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

function PrintMyContentBox() {
    let myHeadString = "Растения";
    let myBodyString = "Растения играют большую роль в мире";

    return (
        <div>
            <h3>{myHeadString}</h3>
            <p>{myBodyString}</p>
        </div>
    )
}

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

Запускаем проект

npm start

Передача параметров

Содержимое файла index.js внутри папки src

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

function PrintManInfo(props) {
    const {paramsObj} = props;

    return (
        <div>
            <b>Фамилия:</b> {paramsObj.manSurname}
            <br/>
            <b>Имя:</b> {paramsObj.manName}
            <br/>
            <b>Возраст:</b> {paramsObj.manAge}
            <br/>
        </div>
    )
}

const objFirst = {
    manSurname: "Петров",
    manName: "Пётр",
    manAge: "15"
};

const objSecond = {
    manSurname: "Иванов",
    manName: "Иван",
    manAge: "19"
};

function PrintMain() {
    return (
        <div>
            <PrintManInfo paramsObj={objFirst} />
            <br/>
            <PrintManInfo paramsObj={objSecond} />
            <br/>
        </div>
    )
}


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