Підручник з ReactJS для початківців

Що таке ReactJS?

ReactJS є інтерфейсом з відкритим кодом JavaБібліотека скриптів для побудови інтерфейсів користувача. ReactJS підтримується Meta (раніше Facebook) та спільнотою окремих розробників і компаній. Він широко використовується як основа для створення односторінкових та мобільних додатків. Він дуже простий у використанні та дозволяє користувачам створювати компоненти інтерфейсу користувача, які можна використовувати повторно.

Перш ніж писати перший рядок коду React, корисно знати, чим ця бібліотека відрізняється від звичайної JavaСкрипт. У наступному розділі розглядаються його основні функції.

Особливості ReactJS

JSX: JSX – це розширення для JavaСкрипт. Хоча використання JSX у React не є обов'язковим, це одна з хороших функцій, і вона проста у використанні.

компонентиКомпоненти як чисті JavaФункції скриптів, які допомагають спростити код, розділяючи логіку на незалежний код, який можна використовувати повторно. Ми можемо використовувати компоненти як функції, а компоненти як класи. Компоненти також мають стан та властивості, що спрощує життя. Усередині компонента класу зберігаються стан та властивості.

Віртуальний DOM: React створює віртуальний DOM, тобто кеш структур даних в оперативній пам'яті. Лише остаточні зміни пізніше оновлюються в DOM браузера, що забезпечує швидкий рендеринг.

JavaВирази скрипту: JS-вирази можна використовувати у JSX-файлах за допомогою фігурних дужок, наприклад {}.

Переваги ReactJS

Ось важливі переваги/плюси використання ReactJS:

• ReactJS використовує віртуальний DOM, який використовує кеш структур даних в пам'яті, і лише останні зміни оновлюються в DOM браузера. Це робить застосунок швидшим.
• Ви можете створювати компоненти на власний вибір, використовуючи функцію компонентів React. Компоненти можна використовувати повторно, а також вони корисні для підтримки коду.
• ReactJS — це програма з відкритим вихідним кодом JavaБібліотека скриптів, тому з неї легко почати.
• ReactJS став дуже популярним за короткий проміжок часу та працює на таких продуктах, як Facebook та InstagramЙого використовують багато відомих компаній, таких як Apple, Netflix, І т.д.
• Meta підтримує бібліотеку ReactJS, тому вона добре підтримується та постійно оновлюється.
• ReactJS можна використовувати для розробки розширеного інтерфейсу користувача як для настільних, так і для мобільних додатків.
• Легко налагоджувати та тестувати, оскільки більшість програмування виконується в JavaScript а не в HTML.

Недоліки ReactJS

Ось недоліки/мінуси використання ReactJS:

• Більшість коду написано на JSX, тобто HTML та CSS є частиною JavaСкрипт. Це може бути досить заплутано, оскільки більшість інших фреймворків надають перевагу keeping HTML окремо від JavaКод скрипта.
• Розмір файлу ReactJS порівняно великий.

Знаючи про компроміси, ви готові налаштувати React. Найшвидший спосіб спробувати це – безпосередньо з CDN, яку ми розглянемо спочатку; налаштування на основі npm для реальних проектів будуть розглянуті пізніше.

Використання ReactJS з CDN

Щоб почати працювати з React, нам спочатку потрібно додати ReactJS на нашу сторінку. Ви можете легко почати використовувати ReactJS за допомогою CDN. JavaФайли скриптів, як показано нижче.

Перейдіть на сайт документації React, щоб отримати посилання на CDN, тобто https://legacy.reactjs.org/docs/cdn-links.html, і ви отримаєте необхідні файли, пояснення яких наведено на наступному зображенні.

Для розробників

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Для вироб

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

заміщати версія з потрібною вам версією React як для react.development.js, так і для react-dom.development.js. На цій сторінці ми використовуємо версію 16, тому наведені нижче приклади працюють без змін.

Якщо ви плануєте використовувати CDN-файли, обов’язково збережіть атрибут crossorigin, щоб уникнути проблем між доменами. Код ReactJS не можна виконати безпосередньо у браузері, і його потрібно транспілювати за допомогою Babel у звичайний код. JavaСкрипт перед виконанням у браузері.

Ось сценарій BabelJS, який можна використовувати:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Ось робочий приклад ReactJS з використанням CDN-файлів та скрипта BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

вихід:

Ми детально розглянемо код у наступному розділі; давайте розглянемо роботу з CDN-файлами. Використання скрипта Babel безпосередньо не є гарною практикою, і новачкам варто використовувати його лише для вивчення ReactJS поки що. У продакшені вам доведеться встановити React за допомогою пакета npm.

Використання пакетів NPM

Переконайтеся, що у вас встановлено Node.js. Якщо він не встановлений, перегляньте цей посібник з Node.js (https://www.guru99.com/node-js-tutorial.html) встановлення.

Після встановлення Node.js створіть папку реагувати/.

Щоб почати налаштування проекту, виконайте команду npm ініціал.

Ось як виглядатиме структура папок:

reactproj\
package.json

Тепер ми встановимо потрібні пакети.

Ось список пакетів для ReactJS. Ми закріплюємо React до версії 16, тому ReactDOM.render приклади на цій сторінці працюють саме так, як показано:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Відкрийте командний рядок та виконайте наведені вище команди всередині папки reactproj/.

Створіть папку src / куди буде розміщено весь JS-код. Весь код для проєкту ReactJS буде доступний у папці src/. Створіть файл index.js та імпортуйте react та react-dom, як показано нижче.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Ми написали базовий код для ReactJS. Ми пояснимо його деталі в наступному розділі. Ми хочемо відобразити Привіт, з Guru99 підручників, і те саме надається елементу DOM з ідентифікатором «root». Він береться з файлу index.html, який є початковим файлом, як показано нижче.

Створіть папку public/ та додайте в неї файл index.html, як показано нижче.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Пакет react-scripts подбає про компіляцію коду та запуск сервера для відображення HTML-файлу, тобто index.html. Вам потрібно додати команду в package.json, яка подбає про використання react-scripts для компіляції коду та запуску сервера, як показано нижче:

 "scripts": {
    "start": "react-scripts start"
  }

Після встановлення всіх пакетів і додавання наведеної вище команди остаточний файл package.json виглядає так:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Щоб розпочати тестування ReactJS, виконайте команду:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Він відкриє браузер із URL http://localhost:3000/ як показано нижче:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Ми будемо використовувати той самий процес для виконання JavaФайли скриптів також у наступних розділах. Додайте всі ваші файли .js та .jsx до папки src/. Структура файлів буде такою:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Як створити свій перший проект React

Ось покрокова інструкція з цього посібника з ReactJS, щоб розпочати роботу з першим застосунком React.

Крок 1) Імпортуйте пакети React.
1. Щоб почати роботу з ReactJS, нам потрібно спочатку імпортувати пакунки react, як описано нижче.

import React from 'react';
import ReactDOM from 'react-dom';

2. Збережіть файл як index.js у папці src/.

Крок 2) Пишіть просто Code.
У цьому підручнику React JS ми напишемо простий код, у якому буде показано повідомлення «Привіт, з Guru99 навчальних посібників!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render додасть тег до елемента з ідентифікатором root. Ось HTML-файл, який ми маємо:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Крок 3) Складіть Code.

Далі в цьому посібнику з React.js нам потрібно скомпілювати код, щоб отримати результат у браузері.

Ось структура папок:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Ми додали наступні команди для компіляції остаточного файлу в package.json:

"scripts": {
    "start": "react-scripts start"
  },

Щоб скомпілювати остаточний файл, виконайте таку команду:

npm run start

Коли ви запустите наведену вище команду, файли будуть скомпільовані та повідомлені про будь-які помилки. Якщо все виглядає добре, браузер відкриється та сторінка буде запущена за адресою http://localhost:3000/

Команда: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Крок 4) Перевірте вихід.
Команда URL http://localhost:3000 відкриється у браузері після компіляції коду, як показано нижче:

Як налаштувати React за допомогою Vite (сучасний підхід)

Наведене вище налаштування react-scripts взято з Create React App (CRA), який роками був стандартним стартовим інструментом. Команда React офіційно виключила Create React App з підтримки у лютому 2025 року, тому нові проекти повинні використовувати сучасний інструмент збірки. Найпопулярнішим вибором сьогодні є Віте, який запускається швидше та створює менші збірки.

Ось як створити новий проект React за допомогою Vite:

Крок 1) Виконайте команду scaffolding у вашому терміналі:

npm create vite@latest my-react-app -- --template react

Крок 2) Перемістіть у папку та встановіть залежності:

cd my-react-app
npm install

Крок 3) Запустіть сервер розробки:

npm run dev

Vite обслуговує додаток за адресою http://localhost:5173/ за замовчуванням і миттєво перезавантажується після збереження файлу.

Ключові відмінності від попередньої версії на цій сторінці:

• Вхідний файл – це src/main.jsx замість src/index.js.
• Він встановлює найновішу версію React, яка використовує createRoot замість ReactDOM.render.
• index.html знаходиться в кореневому каталозі проєкту, а не в public/.
• Збірки виготовляються з npm run build у папку dist/.

Для повноцінних потреб, таких як маршрутизація та рендеринг сервера, команда React також рекомендує фреймворки, такі як Next.jsВсе, що ви дізнаєтеся в розділах нижче — JSX, компоненти, стан та властивості — застосовується без змін у проекті Vite або Next.js.

Що таке JSX?

JSX – це розширення для JavaСкрипт. Це шаблон скрипта, де ви матимете змогу використовувати HTML та JavaСценарій разом.

Ось простий приклад коду JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Навіщо нам JSX у React?

Для ��нтерфейсу користувача нам потрібен HTML, і кожен елемент у DOM матиме події, які потрібно обробляти, зміни стану тощо.

У випадку React, це дозволяє нам використовувати HTML та JavaСкрипт в тому ж файлі та ефективна обробка змін стану в DOM.

Вирази в JSX

Ось простий приклад використання виразів у JSX.

У попередніх прикладах ReactJS ми писали щось на кшталт:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Тепер ми змінимо наведений вище код, щоб додати вирази. Вирази використовуються всередині фігурних дужок {} і розгортаються під час виконання. Вирази в React такі ж, як JavaВирази скрипту.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Давайте тепер перевіримо те саме в браузері.

На скріншоті вище видно, що вираз {display} не замінюється. React не знає, що робити, коли вираз використовується всередині .js-файлу.

Тепер додамо зміни та створимо файл .jsx, як показано нижче:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Ми додали необхідний код і використовуватимемо файл test.jsx в index.js. Нам потрібно, щоб h1tag змінна, яка буде використовуватися всередині index.js, тому вона експортується, як показано вище у test.jsx.

Ось змінений код в index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Щоб використовувати test.jsx в index.js, нам спочатку потрібно імпортувати його, як показано нижче:

import h1tag from './test.jsx';

Тепер ми можемо використовувати тег h1 у ReactDOM.render, як показано нижче:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Ось результат, коли ми перевіряємо те саме в браузері:

Що таке компоненти в ReactJS?

Компоненти як чисті JavaФункції скриптів, які допомагають спростити код, розділяючи логіку на незалежний код, який можна використовувати повторно.

Компоненти як функції

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Ми створили функцію під назвою Привіт що повертає тег h1, як показано вище. Ім'я функції діє як елемент, як показано нижче:

const Hello_comp = <Hello />;
export default Hello_comp;

Компонент Привіт використовується як тег HTML, тобто , призначений Hello_comp змінна, і вона експортується за допомогою export.

Давайте тепер використаємо цей компонент у файлі index.js, як показано нижче:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ось результат у браузері:

Клас як компонент

Ось приклад ReactJS, який використовує клас як компонент.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Ми можемо використовувати компонент Hello у файлі index.js наступним чином:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Компонент Hello використовується як тег HTML, тобто .

Ось результат того самого.

Компоненти класу проти компонентів та хуків функцій

Ви вже бачили обидва способи написання компонента, тож який з них слід використовувати? На цій сторінці розглядаються компоненти класу, оскільки вони чітко визначають концепції стану та життєвого циклу, що цінно для початківців і досі зустрічається у застарілих кодових базах. Однак, оскільки React 16.8 представив хуки, функціональні компоненти також можуть зберігати стан, і вони є рекомендованим стилем для всього нового коду.

Аспект	Компонент класу	Функціональний компонент з хуками
стан	this.state та this.setState()	Гачок useState()
Життєвий цикл	компонентDidMount, компонентDidUnmount, компонентWillUnmount	Хук useEffect() охоплює всі три
синтаксис	Більше шаблонних шаблонів (конструктор, bind, this)	Коротше, немає цього ключового слова
Статус	Підтримуваний, застарілий стиль	Рекомендовано для нового коду

Ось приклад стану з цієї сторінки, переписаний за допомогою хука useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Обидві версії відображають однаковий результат. Вивчіть синтаксис класу, який використовується в розділах нижче, а потім потренуйтеся конвертувати кожен приклад у хуки.

Що таке стан у ReactJS?

Держава – це JavaОб'єкт скрипту, подібний до props, який містить дані для використання з рендерингом ReactJS. Дані стану є приватним об'єктом і використовуються в компонентах усередині класу.

Приклад Держави

Ось робочий приклад того, як використовувати стан всередині класу.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Ось що ми отримуємо, коли тестуємо його в браузері:

Що таке Props у ReactJS?

Властивості (props) – це властивості, які використовуються всередині компонента. Вони діють як глобальні об'єкти або змінні, які можна використовувати всередині компонента.

Компонент Props to Function

Ось приклад передачі пропсів у функціональний компонент.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Як показано вище, ми додали MSG приписують компонент. До нього можна отримати доступ як реквізит всередині функції Hello, яка є об'єктом, що матиме MSG деталі атрибута, і те саме використовується як вираз.

Компонент використовується в index.js наступним чином:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ось результат у браузері:

Реквізити для компонента класу

Щоб отримати доступ до властивостей у класі, ми можемо зробити це наступним чином:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Команда MSG атрибут передається компоненту в index.js наступним чином:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Це вихід у браузері:

Також перевірте: - Посібник AngularJS для початківців: вивчайте AngularJS крок за кроком

Життєвий цикл компонента

Після того, як компоненти, стан та властивості розглянуто, наступним кроком є ​​розуміння того, коли React викликає методи вашого компонента. Життєвий цикл компонента поділяється на етапи ініціалізації, монтування, оновлення та відмонтування.

Ось детальне пояснення кожного етапу.

Компонент у ReactJS має такі етапи:

Ініціалізація: це перший етап життєвого циклу компонента.

Тут він матиме властивості за замовчуванням і стан на початковому рівні.

МонтажНа цьому етапі компонент відтворюється всередині DOM. У стані монтування ми маємо доступ до таких методів:

• render(): Цей метод використовується для всіх створених компонентів. Він повертає вузол HTML.
• componentDidMount(): Ця функція викликається одразу після додавання компонента до DOM.

Оновити: У цьому стані користувач взаємодіє з DOM, і він оновлюється. Наприклад, ви вводите щось у текстове поле, тому властивості стану оновлюються.

Нижче наведено методи, доступні в стані оновлення:

• shouldComponentUpdate(): викликається перед повторним рендерингом; дозволяє вирішити, чи слід оновлювати компонент. Повернення значення true повторно рендерить компонент.
• componentDidUpdate(): викликається після оновлення компонента.

Демонтування: Цей стан виникає, коли компонент не потрібен або його видалено.

Нижче наведено метод, доступний у стані розмонтування:

• componentWillUnmount(): викликається безпосередньо перед видаленням або знищенням компонента.

Робочий приклад методів життєвого циклу

Ось робочий приклад, який показує методи, що викликаються на кожному етапі.

Приклад: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

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

Коли ви перевіряєте вивід у браузері:

У консолі браузера ви отримаєте:

Коли користувач вводить у текстове поле:

У консолі відображаються такі повідомлення:

Тепер, коли ви знаєте, коли компонент відображається та оновлюється, давайте застосуємо стан та події до практичного випадку використання: обробка введених користувачем даних через форми.

Робота з формами

У ReactJS, елементи введення HTML, такі як , , та <select /> мають власний стан і потребують оновлення під час взаємодії з користувачем за допомогою методу setState().

У цьому розділі ми побачимо, як працювати з формами в ReactJS.

Ось робочий приклад:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Для полів введення нам потрібно підтримувати стан, тому для цього React надає спеціальний метод під назвою setState, що допомагає підтримувати стан щоразу, коли відбуваються зміни. У реальному застосунку також викличте event.preventDefault() всередині formSubmit, щоб зупинити перезавантаження сторінки браузером після надсилання.

Ми використали події onChange та onClick для текстового поля та кнопки відправлення. Коли користувач вводить текст у текстовому полі, викликається подія onChange, і поле імені всередині об'єкта стану оновлюється, як показано нижче:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

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

Висновок у браузері такий:

Крок 1) Введіть своє ім'я в текстове поле:

Крок 2) Натисніть кнопку «Надіслати»:

Робота з подіями в ReactJS

Форми — це лише одне з джерел взаємодії з користувачем. Робота з подіями в ReactJS така ж, як і в JavaСкрипт. Ви можете використовувати всі обробники подій, які використовуються в JavaСкрипт. Метод setState() використовується для оновлення стану, коли користувач взаємодіє з будь-яким елементом HTML.

Ось робочий приклад того, як використовувати події в ReactJS.

події.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Для полів введення нам потрібно підтримувати стан, тому для цього React надає setState метод, який допомагає підтримувати стан щоразу, коли відбуваються зміни.

Ми використали події ми змінюємось та onClick у текстовому полі та кнопці. Коли користувач вводить текст у текстовому полі, ми змінюємось викликається подія, і поле імені всередині об'єкта стану оновлюється, як показано нижче:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

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

Ось результат у браузері:

Коли користувач вводить ім'я:

Коли користувач натискає кнопку Натисніть тут:

Робота з Inline CSS у ReactJS

Після того, як ваші компоненти оброблять дані та події, останнім кроком буде їх стилізація. Ми розглянемо робочий приклад, щоб зрозуміти вбудований CSS в ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Я додав стиль color: 'red' до тегу h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Висновок у браузері такий:

Ви можете створити об'єкт із потрібним стилем для елемента та використати вираз для додавання цього стилю, як показано у наведеному вище прикладі.

Робота із зовнішнім CSS в ReactJS

Давайте створимо зовнішній CSS-файл. Для цього створіть папку css/ та додайте в неї style.css.

style.css

.h1tag {
color:red;
}

Додайте style.css до свого файлу index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Тепер додамо клас до тегу h1 у файлі .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Атрибуту className надаються деталі класу. Зверніть увагу, що JSX використовує className замість атрибута HTML class, оскільки class є зарезервованим ключовим словом у JavaСкрипт. Тепер давайте перевіримо його у браузері.

Ось що ви бачите, коли перевіряєте тег h1 у браузері:

Ви можете бачити, що class=”h1tag” успішно додано до тегу h1.

Чому ReactDOM.render було замінено на createRoot

Кожен приклад на цій сторінці монтує застосунок за допомогою ReactDOM.render, що правильно для React 16 та 17, версій, на які орієнтований цей курс. React 18, випущений у березні 2022 року, замінив цю точку входу на API createRoot, а React 19 повністю видалив ReactDOM.render. Причина полягає в паралельності: createRoot дозволяє React готувати кілька версій інтерфейсу одночасно, переривати рендеринг з низьким пріоритетом та підтримувати ty.ping і плавна анімація. Такі функції, як автоматичне пакетне створення, useTransition та потокове передавання на основі саспенсу, залежать від цього.

Сучасний еквівалент index.js, який використовується на цій сторінці, виглядає так:

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

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Все інше, що ви тут дізналися — компоненти, JSX, стан, властивості та події — працює так само після цієї зміни в один рядок у точці входу. Різниця між версіями, подібна до цієї, часто виникає в Питання на співбесіді з React JS, тому варто розуміти обидва API.

Поширені запитання

Також перевірте: - 70 найпопулярніших запитань і відповідей на інтерв’ю React (оновлено)