Часто самой сложной частью изучения нового языка программирования, библиотеки или фреймворка является понимание синтаксиса и структуры, на которых построен язык. В этом руководстве будет подробно рассказано о том, «что все значит» в популярной библиотеке 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!