Елементи в React

Щоб зрозуміти базу React - почнемо з чистого листа.

  1. Запустимо проєкт такою командою в терміналі

terminal
npm start

  1. У теці src видалимо всі файли крім index.js і index.css і в терміналі побачимо помилки, які підсвічуються червоним. У разі коректного коду - виводиться зелене повідомлення. Уразі, якщо є компоненти, які в коді не використані, то буде повідомлення жовтого кольору.

Помилка виникла тому, що в index.js файлі ми звертаємося до компонента App.js, який тільки-но видалили. Тому видалимо весь код з index.js і збережемо. Як бачимо, немає коду - немає і помилок.

Відкриємо файл public/index.html. У ньому є такий код в тезі <body>

 <div id="root"></div>

Весь написаний в React код буде верстатися всередині цього елемента. Але напряму із файлом index.html ми практично працювати не будемо. Весь код буде писатися у теці src і за допомогою React компілюватися у нашу верстку.

Елементи React

Згадаймо синтаксис створення елемента в DOM за допомогою ванільного JS.

index.js
// Створення елемента div
const div = document.createElement('div');

// Отримання елемента root по його id
const root = document.getElementById('root');

// Поміщення елемента div у елемент root
root.append(div);

Тепер розглянемо створення елемента за допомогою React.

Згори файлу підключають бібліотеки React і ReactDOM. Вони відповідають за створення React-елементів і роботу з DOM деревом.

У класу React є метод createElement, за допомогою якого створюється React-елемент. Назва елемента передається у лапках всередині круглих дужок.

У класу ReactDOM є метод createRoot в якому вказуємо кореневий елемент застосунку і render в якому вказують який елемент необхідно зарендерити в ньому.

index.js
// Бібліотеки
import React from 'react';
import ReactDOM from 'react-dom/client';

// Створення React-елемента
const div = React.createElement('div');
console.log(div);

// Отримання елемента root по його селектору
const root = document.querySelector('#root');

// Рендеринг елемента div в кореневий елемент
ReactDOM.createRoot(root).render(div);

Замість двох останніх рядків можна було записати так 

ReactDOM.createRoot(document.getElementById('root')).render(div);

Якщо подивитися на верстку, то вона буде ідентична як і при ванільному JS. Утім подивимося на елемент div у консолі та переконаємось, що це React-елемент.

Пропси (props) і чілдрени (children)

При створенні React-елемента другим параметром можна передати об'єкт налаштувань (props). У верстку вони поміщаються як атрибути тега. 2-й і подальші параметри формуються в масив children. children - поміщається всередині тега.

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

const div = React.createElement(
  'div',
  { id: 123, className: 'main-div' },
  'Hello',
  'React'
);
console.log(div);

ReactDOM.createRoot(document.getElementById('root')).render(div);

У прикладі вище слова 'Hello' і 'React' ніби "склеїлися" і помістилися всередину тега <div>. Тобто вони - children, які також помістилися в масив пропсів попуч із id і class.

Тому доречно children передавати не третім і подальшими параметрами, а всередині другого параметра, як children.

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

const div = React.createElement('div', {
  id: 123,
  className: 'main-div',
  children: ['Hello', 'React'],
});
console.log(div);

ReactDOM.createRoot(document.getElementById('root')).render(div);

Якщо ми передаємо третій параметр один, то він буде як string один елемент. як параметр children ми також можемо преедати не масив, а string.

Вкладеність елементів

PreviousСтворення і клонування своєї збірки React на базі Create React AppNextJSX

Last updated