Учебник ReactJS для начинающих

Что такое ReactJS?

ReactJS это интерфейс с открытым исходным кодом JavaБиблиотека скриптов для создания пользовательских интерфейсов. ReactJS Он поддерживается компанией Meta (ранее Facebook) и сообществом отдельных разработчиков и компаний. Он широко используется в качестве основы для создания одностраничных и мобильных приложений. Он очень прост в использовании и позволяет пользователям создавать многократно используемые компоненты пользовательского интерфейса.

Прежде чем написать первую строку кода React, полезно понять, чем эта библиотека отличается от обычной. JavaСценарий. В следующем разделе будут рассмотрены его основные функции.

Особенности ReactJS

JSX: JSX — это расширение JavaСкрипт. Хотя использование JSX в React не является обязательным, это одна из его полезных и простых в использовании функций.

Компоненты: Компоненты как чистые JavaСкриптовые функции упрощают написание кода, разделяя логику на многократно используемый независимый фрагмент. Компоненты можно использовать как функции, так и как классы. Компоненты также имеют состояние и свойства, что значительно упрощает работу. В компоненте-классе состояние и свойства хранятся и управляются.

Виртуальный дом: React создает виртуальный DOM, то есть кэш данных в оперативной памяти. Только окончательные изменения впоследствии обновляются в DOM браузера, что обеспечивает быструю отрисовку.

JavaСкриптовые выражения: В JSX-файлах выражения JavaScript можно использовать с помощью фигурных скобок, например, {}.

Преимущества ReactJS

Вот важные преимущества использования ReactJS:

• ReactJS использует виртуальный DOM, который задействует кэш данных в оперативной памяти, и в DOM браузера обновляются только окончательные изменения. Это делает приложение быстрее.
• С помощью функции компонентов React вы можете создавать компоненты по своему выбору. Компоненты можно использовать повторно, и они также полезны для сопровождения кода.
• ReactJS — это проект с открытым исходным кодом. JavaБиблиотека скриптов, так что начать работу с ней очень просто.
• ReactJS быстро завоевал популярность и используется в таких продуктах, как Facebook и другие. InstagramЕго используют многие известные компании, такие как Apple. Netflix, и т.д.
• Meta поддерживает библиотеку ReactJS, поэтому она хорошо поддерживается и обновляется.
• ReactJS можно использовать для разработки насыщенного пользовательского интерфейса как для настольных, так и для мобильных приложений.
• Легко отлаживать и тестировать, поскольку большая часть кода выполняется в JavaСценарий а не в HTML.

Недостатки ReactJS

Вот минусы и недостатки использования ReactJS:

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

Зная все нюансы, вы готовы к настройке React. Самый быстрый способ попробовать — это использовать его напрямую с CDN, что мы рассмотрим в первую очередь; настройка на основе npm для реальных проектов последует позже.

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

Чтобы начать работать с React, нам сначала нужно добавить ReactJS на нашу страницу. Вы можете легко начать использовать ReactJS с помощью CDN. JavaСкриптовые файлы, как показано ниже.

Чтобы получить ссылки на CDN, перейдите на старый сайт документации React, например: 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 создайте папку. реакцияпроект/.

Чтобы начать настройку проекта, выполните команду инициализация нпм.

Вот как будет выглядеть структура папок:

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 будет выглядеть следующим образом:

Пакет.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/ как показано ниже:

общедоступный / 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) Импортируйте пакеты реагирования.
1. Чтобы начать работу с ReactJS, нам нужно сначала импортировать пакеты реагирования следующим образом.

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:

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 года, поэтому для новых проектов следует использовать современный инструмент сборки. Сегодня наиболее популярным выбором является... Vite, что обеспечивает более быстрый запуск и меньший размер файлов сборки.

Вот как создать новый проект React с помощью Vite:

Шаг 1) Выполните команду создания структуры проекта в терминале:

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, которая использует создатьRoot вместо 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 аналогичны выражениям в 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. Нам нужно, чтобы h1тег Эта переменная будет использоваться внутри файла 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';

Теперь мы можем использовать тег h1tag в 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-тега, т. е. , назначенный на Привет_комп переменная, и та же самая экспортируется с помощью функции экспорта.

Теперь давайте используем этот компонент в файле 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()
Жизненный цикл	componentDidMount, componentDidUpdate, componentWillUnmount	Хук useEffect() охватывает все три варианта.
Синтаксис	Ещё немного шаблонного кода (конструктор, привязка, 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')
);

Вот что мы получаем, когда тестируем это в браузере:

Что такое реквизиты в ReactJS?

Свойства (props) — это параметры, используемые внутри компонента. Они выступают в роли глобальных объектов или переменных, которые можно использовать внутри компонента.

Реквизит функционального компонента

Вот пример передачи реквизита функциональному компоненту.

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 /> и <select /> имеют собственное состояние и должны обновляться при взаимодействии пользователя с помощью метода setState().

В этой главе мы рассмотрим, как работать с формами в ReactJS.

Вот рабочий пример:

форма.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() Используйте метод `inside 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 метод, который помогает поддерживать состояние при каждом изменении.

Мы использовали события по изменению и по щелчку на текстовом поле и кнопке. Когда пользователь вводит текст в текстовое поле, по изменению Событие вызывается, и поле имени внутри объекта состояния обновляется, как показано ниже:

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')
);

Вот вывод в браузере:

Когда пользователь вводит имя:

Когда пользователь нажимает кнопку «Нажмите здесь»:

Работа со встроенным 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 использует имя класса вместо атрибута `class` в HTML, поскольку `class` является зарезервированным ключевым словом. JavaСкрипт. Теперь давайте протестируем его в браузере.

Вот что вы видите, когда проверяете тег h1 в браузере:

Как видите, класс "h1tag" успешно добавлен к тегу h1.

Почему ReactDOM.render был заменен на createRoot?

В каждом примере на этой странице приложение монтируется с помощью ReactDOM.render, что корректно для React 16 и 17, версий, на которые ориентирован этот курс. React 18, выпущенный в марте 2022 года, заменил эту точку входа на API createRoot, а React 19 полностью удалил ReactDOM.render. Причина — параллелизм: createRoot позволяет React одновременно подготавливать несколько версий пользовательского интерфейса, прерывать рендеринг с низким приоритетом и поддерживать...ping Анимация плавная. От неё зависят такие функции, как автоматическая пакетная обработка, useTransition и потоковая передача на основе Suspense.

Современный аналог файла 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.

Часто задаваемые вопросы (FAQ)

Также проверьте: - 70 лучших вопросов и ответов на собеседовании по React (обновлено)