Главная » React & Redux » Синтаксис React. Препроцессор JSX и его ограничения.

Синтаксис React. Препроцессор JSX и его ограничения.


12.10.2021, 00:07

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

react и react-dom из папки node_modules проекта (для работы с React, JSX и DOM-деревом)

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

Код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; /* здесь имеется в виду файл App.js  */

в самом файле App.js функция App экспортируется по умолчанию:

Код

export default App;

после импортов идёт запуск библиотеки ReactDOM, это класс и у него есть метод render()

Код

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

Метод render() получает два аргумента: первый - что мы будем рендерить (в данном случае это всё наше приложение), второй - куда будем рендерить (в данном случае, в блок с id = "root").

Создадим переменную elem и поместим в неё заголовок 2-го уровня с текстом:

Код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const elem = <h2>Hello World</h2>;

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

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

Код

ReactDOM.render(
   elem,
   document.getElementById('root')
);

ReactDOM.render() вызывается только один раз на самом верхнем уровне приложения

Так как React может работать и без использования JSX-синтаксиса, мы можем создать этот же элемент вручную, стандартными средствами JavaScript, это делается так:

Код

const elem = React.createElement('h2',null,'Hello World');

первый аргумент - это наш тег h2

второй аргумент нужен для передачи css-классов с помощью передачи объекта, если они не передаются, передаётся null

третий аргумент - это содержимое нашего тега h2

тоже самое с передачей какого-то класса:

Код

const elem = React.createElement('h2',{className: 'green'},'Hello World');

если посмотреть в код страницы, то получаем:

Код

<div id = "root">
       <h2 class = "green">Hello World</h2>
</div>

Но такой вариант намного сложнее, чем использование синтаксиса JSX. И именно babel переводит JSX-синтаксис в нативный JavaScript, в данном случае он просто напрямую отправит код, в отличие от первого варианта, где он его предварительно скомпилирует.

В результате запуска кода выше, возвращается такой объект:

Код

const elem = {
      type: 'h2',
      props: {
           className: 'green',
           children: 'Hello World'
      }
};

который затем используется для создания нашего элемента (заголовка с содержимым) на странице сайта.

В данном коде в переменной elem мы создали React-элемент (элемент интерфейса)

Код

const elem = <h2>Hello World</h2>; // мы создали React-элемент

Если элемент имеет многострочную структуру, его помещают в круглые скобки и блок-обёртку (так как у многострочного элемента всегда должен быть один родитель):

Код

const elem = (
   <div>
       <h2>Hello World</h2>
       <input type="text" />
       <button>Нажми</button>  /* кнопка с текстовым содержимым */
       <button /> /* кнопка без текстового содержимого */
   </div>
);

Для простоты написания кода, нужно 'подружить' Emmet с React-ом, для этого в настройках VSCode перейти в расширения (Extensions), далее выбрать пункт Emmet и в его вкладке найти пункт Include Languages.

Здесь жмём кнопку "Добавить элемент", в поле "Элемент" прописываем javascript, в поле "Значение" прописываем javascriptreact, жмём ОК


Теперь Emmet и React лучшие друзья!

Теперь Emmet будет работать внутри React-кода и вы сможете быстрее набирать код, например, пишем сокращённую структуру:

Код

h2.red

после чего нажимаем Tab и сразу получаем готовый код:

Код

<h2 className="red"></h2>

Если вынести в отдельную переменную содержимое заголовка h2 из нашего кода:

Код

const text = 'Hello World';

то эту переменную мы можем использовать внутри нашего элемента:

Код

const elem = (
   <div>
       <h2>{text}</h2>
       <input type="text" />  
       <button>Нажми</button>  
       <button />  
   </div>
);

можно совмещать использование фигурных скобок и обычного текста:

Код

const elem = (
   <div>
       <h2>Выводим на страницу: {text}</h2>
       <input type="text" />  
       <button>Нажми</button>  
       <button />  
   </div>
);

Обращаю внимание: в данном случае при использовании фигурных скобок не нужны знак доллара $ и `бэктики`

В фигурных скобках можно помещать всё, что угодно, кроме объектов (даже пустой объект вызовет ошибку).

В React-элементах можно также использовать все доступные атрибуты, как и в HTML, но есть особенности:

- атрибуты пишутся в формате camelCase (например, tabIndex и т.д)

- есть атрибуты, не совпадающие по написанию с атрибутами HTML: className и htmlFor (так как class и for уже используются)

Код

const elem = (
   <div>
       <h2 className="text">Выводим на страницу: {text}</h2>
       <input type="text" />  
       <label htmlFor=""></label>
       <button>Нажми</button>  
       <button />  
   </div>
);

Значения элементов атрибута также можно вставлять при помощи фигурных скобок

КОММЕНТАРИИ (0)

РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)