5. Первый проект на React

---

Перед работой добавим в проект библиотеку:

yarn add react

yarn add react-dom

Создаем файл .jsx и добавляем следующий код:

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Дописываем строчки:

import './index.css';

import React from 'react';

Создаем папку src/react-basics/, чтобы в ней создавать файлы компонентов.

Создаем файл A_Title.jsx

class A_Title extends Component {
  render() {
    return <h1 className="A_Title">Hello, {this.props.name}!</h1>;
  }
}

В основном файле jsx импортируем компонент

import A_Title from './react-basics/A_Title.jsx';

И вместо:

root.render(<h1>Hello, world</h1>);

Пишем:

root.render();

Окончательно подключим компонент

import React from 'react';

class A_Title extends React.Component {
  render() {
    return <h1 className="A_Title">Hello, {this.props.name}!</h1>;
  }
}

И не забудем экпортировать его export default

Передадим props

root.render(<A_Title name="World"/>);

root.render(
    <>
        <A_Title name="World" />
        <A_Title name="NotWorld" />
    </>
);

Применение диструктора:

const {title, description} = this.props;