Учебник по React

React — это библиотека JAVASCRIPT для создания пользовательских интерфейсов.

React в основном используется для создания пользовательского интерфейса. Многие рассматривают React как V (View) в MVC.

React возник из внутреннего проекта Facebook, использовавшегося для создания сайта Instagram, и в мае 2013 года был выпущен с открытым исходным кодом.

React обладает высокой производительностью и очень простой логикой кода. Всё больше людей начинают обращать на него внимание и использовать его.

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

  • 1. Декларативный дизайн−React использует декларативную парадигму, что упрощает описание приложений.

  • 2. Эффективность−React минимизирует взаимодействие с DOM путём имитации DOM.

  • 3. Гибкость−React хорошо работает с известными библиотеками или фреймворками.

  • 4.JSX− JSX — это расширение синтаксиса JavaScript. Для разработки на React не обязательно использовать JSX, но мы рекомендуем его.

  • 5. Компоненты− Создание компонентов с помощью React упрощает повторное использование кода и хорошо применимо при разработке крупных проектов.

  • 6. Однонаправленный реактивный поток данных− React реализует однонаправленный реактивный поток данных, тем самым уменьшая дублирование кода. Именно поэтому это проще, чем традиционное связывание данных.

Прежде чем читать этот учебник, вам нужно знать:

Прежде чем начать изучать React, вам необходимо иметь следующие базовые знания:

Первый пример на React

В каждой главе вы можете редактировать примеры онлайн, а затем нажать кнопку, чтобы просмотреть результаты.

В этом руководстве используется React версии 18.2.0. Вы можете посетить официальный сайт, чтобыhttps://react.dev/скачать последнюю версию.

Пример React

<div id="example"></div> <script type="text/babel">// Простой компонент React function App() { return<h1>Привет, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // Отрисовка компонента React в DOM root.render(<App />); </script>

Попробуйте »

Импорт внешних скриптов:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Эти три строки кода импортируют библиотеки React, ReactDOM и Babel Standalone соответственно.

  • React используется для создания пользовательских интерфейсов.
  • ReactDOM используется для рендеринга React-компонентов в браузере.
  • Babel Standalone используется для компиляции синтаксиса JSX на лету в браузере.

Или используйте среду разработки React, созданную с помощью инструмента create-react-app (представлен в следующей главе):

Пример

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

В этот момент откройте браузерhttp://localhost:3000/Он выведет:

Hello World!

Ссылки

Другие расширения