ReactJS - DOM: руковод Beginner's Guide

Здравствуйте, будущие разработчики React! Я рад пригласить вас в увлекательное путешествие по миру ReactJS и Document Object Model (DOM). Кто-то, кто уже давно преподает информатику, видел, как многие студенты сначала мучаются с этими conceptами, но поверьте мне, как только вы это поймете, это будет как ездить на велосипеде - вы никогда не забудете!

Что такое DOM?

Прежде чем мы углубимся в relación между React и DOM, давайте начнем с азов. Представьте DOM как родословную вашего веб-страницы. Каждый элемент на вашей странице - будь то кнопка, абзац или изображение - это как член семьи в этом дереве. Точно так же, как вы можете изменить прическу или одежду члена семьи, вы можете манипулировать этими DOM-элементами, чтобы изменить的外观 и поведение вашего веб-страницы.

ReactDOM: Мост между React и браузером

Теперь познакомимся с нашим звездным игроком: ReactDOM. Представьте ReactDOM как super-эффективного личного помощника для React. Его основная задача - взять React-компоненты, которые вы создаете, и перевести их в то, что браузер может понять и отобразить.

Использование ReactDOM

Давайте начнем с простого примера:

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

const element = <h1>Привет, мир React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

В этом фрагменте кода мы говорим ReactDOM, чтобы он взял наш element (простой заголовок h1) и отрендерил его внутри DOM-элемента с ID 'root'. Это как сказать вашему помощнику: "Эй, можешь положить эту картинку (наш React-элемент) в эту рамку (элемент 'root') на стене?"

ReactDOMServer: Отображение React на серверной стороне

Следующий пункт, ReactDOMServer. Это как двойник ReactDOM, который работает за кулисами. Пока ReactDOM занимается делами в браузере, ReactDOMServer помогает нам рендерить React-компоненты на сервере.

Вот простой пример:

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

Этот код берет весь наш App компонент и преобразует его в строку HTML. Это как сделать снимок вашей React-приложения - это моментальный снимок, который можно быстро отправить в браузер.

ReactDOMClient: Новый парень в округе

С React 18 мы познакомились с ReactDOMClient. Это как младший, более энергичный брат ReactDOM, который всех о производительности и новых возможностях.

Вот как вы можете использовать его:

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

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Instead of directly rendering our app, we're creating a 'root' first. This root is like a special pot where we can plant our React app and watch it grow with all the new features React 18 offers.

Применение ReactDOMClient

Давайте углубимся немного больше в то, как мы можем использовать ReactDOMClient в реальном сценарии:

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

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Вы clicked {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажмите меня
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

В этом примере мы создаем простое приложение-счетчик. Функция createRoot настраивает наше окружение React 18, позволяя нам использовать все новые функции, такие как автоматическое batchирование для лучшей производительности.

Сравнение методов ReactDOM

Чтобы помочь вам понять различные методы, о которых мы говорили, вот удобная таблица:

Метод	Используется в	Цель
ReactDOM.render()	Браузер	Рендерит React-элементы в DOM
ReactDOMServer.renderToString()	Сервер	Рендерит React-компоненты в строки HTML
ReactDOMClient.createRoot()	Браузер	Создает корень для функций React 18
root.render()	Браузер	Рендерит компоненты в созданный корень

Заключение

И вот мы и добрались до конца,朋友们! Мы прошли через ландшафт React DOM, от классического ReactDOM до серверного ReactDOMServer и finally к новому и блестящему ReactDOMClient. Помните, как при изучении любого нового языка (программирования или иного), практика делает perfect. Не бойтесь экспериментировать с этими conceptами в своих собственных проектах.

Как я всегда говорю своим студентам, программирование - это как готовка - сначала вы можете сделать mess, но с временем и практикой, вы будете готовить美味的 React-приложения в кратчайшие сроки! Так что вперед, запачкайте руки кодом и приятного React-инга!

Credits: Image by storyset