🙈
React
  • 🧑‍💻Full-Stack Web Developer
  • 📚Теорія
    • 1️⃣Введення в React
      • Веб-застосунки
      • Бібліотека React
      • Інструменти
      • Створення і клонування своєї збірки React на базі Create React App
      • Елементи в React
      • JSX
      • Компоненти
      • Рендер за умовою
      • Колекції
    • 2️⃣Стилізація
      • Вбудовані стилі
      • Ванільний CSS
      • CSS модулі
      • Стилізовані компоненти
      • Нормалізація стилів
    • 3️⃣Події та стан
    • 4️⃣Форми
      • Formik
      • Yup валідація форм Formik
    • 5️⃣Життєвий цикл
    • 6️⃣HTTP-запити
    • 7️⃣React-хуки
    • 8️⃣Контекст та рефи
    • 9️⃣Маршрутизація
      • Маршрутизація
      • Компонент <BrowserRouter>
      • Компоненти <Route> та <Routes>
      • Компоненти <Link> та <NavLink>
      • URL-параметри
      • Вкладені маршрути
      • Індексні маршрути
      • Програмна навігація
      • Рядок запиту
      • Обʼєкт місцезнаходження
      • Розподілення коду
    • 🔟Redux Toolkit
      • Управління станом
    • 🕚Асинхронний Redux
    • Бібліотека Redux Persist для роботи з localstorage
    • Помилка non-serializable value і її виправлення
    • переключення теми
    • 👷Практика
  • Про мене
    • Про мене
Powered by GitBook
On this page
  • Елементи React
  • Пропси (props) і чілдрени (children)
  • Вкладеність елементів
  1. Теорія
  2. Введення в React

Елементи в React

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

Last updated 1 year ago

Щоб зрозуміти базу 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.

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

📚
1️⃣