Компонент React

Компоненты представляют собой шаблоны и компануют однородные структуры информации
Имя компонента обязательно пишется с прописной буквы.

Компонент на основе класса JS

React.Component абстрактный класс, на основе которого создаются компоненты React. this.props позволяет обращаться к переданным компоненту аргументам (к свойствам компонента). this к свойствам и методам компонента.

const mc = ['первый li','второй li', 'третий li']

class McList extends React.Component {
    liList(mcValue, key) {
        return React.createElement("li", { key: key }, mcValue)
    }
    render() {
    return React.createElement("ul", {className: "ul"},
        this.props.mc.map(this.liList)
    )
    }
}
//создание экземпляра компонента
const S = React.createElement(McList, {mc}, null)

render() возвращает основной компонент React, в данном случае React.createElement("ul", {className: "ul"}
this.props.mc обращается к переданным аргументам компоненту в данном случае к массиву mc map(this.liList) передает элементы массива методу liList класса McList
liList(mcValue, key) получает параметры в виде значения и ключа массива mc на основе которых создает список.

Функциональный компонент

const els = ['элемент 1','элемент 2','элемент 3']

const FComp=(s)=>
    React.createElement('ul',{className:'els'},
        s.els.map((value, elsKey)=>React.createElement('li',{key:elsKey},value))
    )

let R = React.createElement(FComp, {els}, null)

ReactDOM.render(R, document.getElementById('root'))

FComp - функциональный компонент
R - экземпляр функционального компонента FComp

Пример передачи деструктурированных аргументов: const moon = { name: "Луна", status: "cпутник Земли", mean_radius: "1737.1 km (0.273 of Earth's)" }; const TestRestr3 = ({ name, status, mean_radius }) => React.createElement( "h3", { className: "hello" }, ` ${name} - ${status}, радиус: ${mean_radius} ` ); ReactDOM.render(TestRestr3(moon), document.getElementById("root2"));