Часто самой сложной частью изучения нового языка программирования, библиотеки или фреймворка является понимание синтаксиса и структуры, на которых построен язык. В этом руководстве будет подробно рассказано о том, «что все значит» в популярной библиотеке Javascript ReactJS.

Краткие факты

  • ReactJS использует JSX (сокращение от JavaScript XML), что позволяет пользователям писать на JavaScript и HTML прямо внутри исходного кода.
  • Вместо отдельных файлов HTML и JavaScript в ReactJS используются компоненты, содержащие языки разметки (HTML) и логики (JS).
  • Компоненты являются основными используемыми единицами. Однако элементы – это наименьшие единицы, из которых состоят компоненты.
  • DOM, или объектная модель документа, представляет страницу, которую пользователь увидит в браузере, и позволяет разработчикам подключаться к языкам программирования, чтобы изменить то, что пользователь видит (структуру и содержимое) на странице. DOM представляет документ HTML как нечто, называемое «узлами» или «объектами»; на данный момент мы можем думать об этом как о списке всего текста на странице. Если пользователь каким-либо образом взаимодействует с DOM (например, нажимает кнопку или ссылку), весь DOM (все узлы в документе) должен быть перезагружен (не очень эффективно, если вы изменяете только один элемент, а вся ваша веб-страница надо обновить)
  • Виртуальный DOM ReactJS похож на собственную копию DOM React (копия всего списка узлов). При взаимодействии с пользователем узлы в React Virtual DOM изменяются. Поскольку виртуальный DOM является «виртуальным» и на самом деле ничего не «рисует» на веб-странице, вносимые в него изменения выполняются очень быстро. Этот виртуальный DOM сравнивается с реальным DOM веб-страницы, и в реальном DOM изменяются только различия между ними, поэтому нет необходимости обновлять страницу.

Основы

В JavaScript большинство операторов содержат хотя бы одно из следующих ключевых слов:

var — переменная, которую можно повторно объявить и обновить (можно использовать в любом месте функции, в которой она объявлена).

let — переменная, которую можно переобъявить и обновить (можно использовать только в том блоке, в котором она была объявлена)

const — переменная, которую нельзя переназначить или обновить (можно использовать только в том блоке, в котором она была объявлена)

функция — набор инструкций, которые могут принимать входные данные (аргументы), выполнять некоторый код и затем возвращать значение.

return — при вызове функции у нее есть возможность вернуть значение; в React компоненты часто возвращаются из функций

console.log() — не совсем ключевое слово, а способ распечатать некоторые выходные данные, чтобы разработчик мог помочь в отладке.

А в HTML все операторы заключены в «теги», которые имеют формат ‹tagname› Text! ‹/tagname›, вот некоторые из наиболее часто используемых в ReactJS:

‹p›‹/p› — абзац текста

‹h1›‹/h1› — заголовок 1, есть заголовки, размер которых уменьшается от 1 до 6

‹div›‹/div› — определяет «контейнер», который обычно содержит больше тегов внутри.

‹span›‹/span› — еще один контейнер, который обычно просто окружает текст.

В файле index.js

В вашем приложении ReactJS файл index.js используется для рендеринга виртуального DOM. Давайте посмотрим, что это значит:

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

import извлекает ресурсы из библиотеки (ресурс, созданный другими разработчиками и который вы можете использовать в своем приложении после его импорта). В данном случае он извлекает ресурсы из React объект из библиотеки 'react' и ReactDOM из библиотеки 'react-dom'

import './index.css';

в этом случае импорт извлекает ресурсы из локального файла в текущем каталоге (./) с именем index.css, чтобы добавить стиль к этой странице (обратите внимание на кавычки '', чтобы показать, что это файл где-то в каталоге пользователя)

import App from './App';

здесь мы извлекаем функциональный компонент App из локального файла в текущем каталоге ./App.

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

Ладно, это длинно. Но в основном, чтобы React создал виртуальный DOM, который может эффективно обновлять реальный DOM, он должен «рендерить» новый элемент каждый раз, когда происходит изменение. Это означает, что каждый раз, когда разработчик что-то меняет в своем коде, виртуальный DOM принимает этот новый измененный элемент в качестве параметра, сравнивает его с реальным DOM и вносит только необходимые изменения. Здесь объект ReactDOM, который мы импортировали ранее, имеет функцию render, которую мы можем использовать для достижения этой цели. Render принимает два параметра: элемент JSX и элемент HTML. JSX в этом примере называется ‹App /› и представляет собой компонент (то, что содержит множество других элементов), который инкапсулирует весь код React, написанный разработчиком. Как правило, все компоненты в React имеют синтаксис ‹ComponentName /›. Таким образом, всякий раз, когда в этом компоненте ‹App /› происходит изменение, функция рендеринга обнаружит это и обновит настоящий DOM. Второй параметр — это HTML-элемент, представляющий «корневой» div HTML-файла, на котором построена веб-страница, document.getElementById(‘root’). Чтобы React запустился, он должен «подключиться» к файлу HTML и «загрузить» в него весь свой код. Здесь предполагается, что файл HTML содержит тег ‹div id= «root»›‹/div›. Затем мы можем получить этот элемент HTML по его идентификатору root и загрузить весь код JSX в файл с помощью функции render.

А теперь остальное (файл App.js)

В проектах React обычно много файлов и компонентов, но для простоты я буду работать только с одним компонентом под названием ‹App /›. Эта часть содержится в файле App.js.

import React, {useState} from 'react';

Как и раньше, мы видим, что используем import для извлечения объекта React из библиотеки React. Кроме того, здесь мы извлекаем хук с именем useState из библиотеки, обозначенной как {useState}. Подробнее о хуках позже…

import './App.css';

здесь мы извлекаем файл CSS (стили, такие как шрифты и цвета) с именем App.css из текущего каталога ./App.css. Обратите внимание, что при импорте файлов .js нам не нужно расширение, но для других типов файлов нам нужно указать расширение (.css).

Определение компонента в файле App.js

В React есть несколько разных способов объявить компонент в файле (внутри компонента мы будем содержать весь наш код). Я подробно расскажу об использовании функции и константной переменной для объявления этого компонента. Во-первых, мы можем объявить функцию:

function App() {
    lots of code here...
    return(
        <div>
            Everything we want to load to the HTML document
        </div>
    );
}

При этом была создана функция с именем компонента (в данном случае она называется App). Всякий раз, когда у нас есть функция, за ее именем следует набор скобок (), которые могут содержать любые параметры, которые мы хотим передать в это приложение. Здесь мы ничего не передаем в функциональный компонент. Далее, у функции всегда есть тело, заключенное в две фигурные скобки {}. В теле находится весь код, связанный с функцией. Наконец, оператор return находится в конце функции перед закрытием тела. Какой бы код мы ни написали ранее, мы можем использовать его, чтобы определить, что мы хотим вернуть (мы возвращаемся к функции, вызвавшей эту функцию; например, объект ReactDOM, о котором мы говорили ранее, использовал ‹App /› для отображения документа, поэтому компонент App возвращает значение в это место). Внутри круглых скобок () этого оператора возврата мы обычно возвращаем один элемент ‹div›HTML here!‹/div›, обертывающий все, что находится внутри.

В качестве альтернативы мы можем создать константную переменную:

const App = () => {
    lots of code here...
    return (
        <div>
            Everything we want to load to the HTML document
        </div>
    );
}

Это очень похоже на function ранее. const указывает, что имя приложения является постоянной переменной, которую нельзя объявить снова или изменить. Другими словами, App — это ссылочная переменная, которая просто хранит, где находится анонимная (безымянная) функция. По сути, разработчики, использующие эту нотацию, создают функцию, которая запускается только один раз и не нуждается в повторном вызове.

export default App;

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

К настоящему времени, надеюсь, вы лучше понимаете базовый синтаксис документа ReactJS. Я точно знаю, что меня очень смущала комбинация JavaScript и HTML в одном языке JSX, но после множества поисков в Google я думаю, что разобрался;) Спасибо за чтение, и я надеюсь, что это спасло вы из многих поисковых запросов Google!