RUDE

Способ ниндзя для изучения React

CoderStudio, 17.03.2023 13:30
Способ ниндзя для изучения React

Глава 4: JSX, синтаксис, связывающий HTML с Javascript

JSX - это расширение синтаксиса, используемое в React для создания элементов пользовательского интерфейса путем объединения HTML и JavaScript.

Впервые он был представлен компанией Facebook в 2013 году и с тех пор является ключевой особенностью библиотеки React.

JSX стал невероятно полезным инструментом для создания сложных пользовательских интерфейсов в React.

Поначалу синтаксис JSX может показаться немного странным, поскольку он объединяет элементы HTML и JavaScript в один блок кода.

Но если разобраться, JSX может значительно упростить создание пользовательских интерфейсов.

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

Синтаксис JSX довольно прост. Вместо того чтобы создавать элементы пользовательского интерфейса с помощью чистого JavaScript, в коде JavaScript можно использовать элементы HTML.

Например, чтобы создать текстовый элемент в компоненте React, можно использовать следующий код:

const element = <p>Hola, mundo</p>;

Здесь элемент p создается с помощью синтаксиса HTML, а затем используется в коде JavaScript.

Помимо стандартных элементов HTML, можно использовать и пользовательские элементы.

Эти элементы определяются в React с помощью функций, которые возвращают элементы JSX.

В этом примере пользовательский элемент определяется с помощью функции, которая возвращает элемент JSX.

Затем экземпляр пользовательского элемента создается в коде JavaScript с использованием синтаксиса JSX:

function CustomElement() {
  return <div>Este es un elemento personalizado</div>;
}

const element = <CustomElement />;

Выражения JavaScript

Одной из самых мощных возможностей JSX является возможность использования выражений JavaScript в HTML-коде. Например, переменная JavaScript может быть использована для определения содержимого текстового элемента:

const myName = "Luis";
const element = <h1>Hola, {myName}</h1>;

В этом примере переменная myName используется внутри скобок {} для вставки ее значения внутрь элемента h1.

Классы и стили

В JSX вы можете определять классы и стили для элементов, используя синтаксис атрибутов HTML. Например:

const element = <div className = "my-class" style = {{ color: 'red' }}>Este es un elemento con clase y estilo</div>;

В этом примере вы определяете класс my-class, используя атрибут className, и определяете стиль color: red, используя атрибут style.

Вложенные элементы

В JSX элементы могут быть вложены внутрь других элементов для создания сложных структур элементов. Например:

const element = (
  <div>
    <h1>Este es el encabezado</h1>
    <p>Este es un párrafo.</p>
  </div>
);

В этом примере определен элемент div, который содержит заголовок h1 и абзац p.

Условный рендеринг

В JSX выражения JavaScript можно использовать для условного отображения элементов. Например:

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? (
      <h1>Bienvenido de nuevo!</h1>
    ) : (
      <h1>Inicia sesión para continuar.</h1>
    )}
  </div>
);

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

Функции обратного вызова

В JSX функции обратного вызова могут быть переданы в качестве реквизитов пользовательским компонентам. Например:

function Button(props) {
  return <button onClick = {props.onClick}>{props.label}</button>;
}

function App() {
  function handleClick() {
    console.info('El botón fue presionado');
  }

  return (
    <div>
      <Button label = "Haz clic aquí" onClick = {handleClick} />
    </div>
  );
}

В этом примере определен компонент Button, который получает два реквизита: label и onClick.

Затем вы используете компонент Button в компоненте App, передавая функцию обратного вызова handleClick в качестве реквизита onClick.

Это лишь некоторые из возможностей JSX, которые делают создание пользовательских интерфейсов в React проще и мощнее.

Надеюсь, эти примеры помогли вам лучше понять JSX.

Заключение

JSX - это очень мощный синтаксис, который позволяет создавать сложные пользовательские интерфейсы с помощью элементов HTML и JavaScript.

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

Определение компонентов с помощью функций, возвращающих элементы JSX, является распространенной альтернативой синтаксису классов ES6, который расширяет из React.Component старый синтаксисReact.createClass.

React.Component - это базовый класс в React, который используется для создания пользовательских компонентов.

Компоненты - это фундаментальные строительные блоки в приложениях React.

Их можно повторно использовать и комбинировать для создания сложных пользовательских интерфейсов. Базовый пример класса компонента в React :

import React, { Component } from 'react';
class MiComponente extends Component {
 render() {
 return <h1>Hola, mundo!</h1>;

В данном примере MyComponent - это класс, расширяющий класс React Component. Метод render() является обязательным и возвращает содержимое, которое будет отображаться в пользовательском интерфейсе. В данном случае компонент выводит заголовок с текстом "Hello, world!

React.createClass - это метод, который использовался в старых версиях React для создания компонентов класса. Этот метод считается устаревшим в новых версиях React и был заменен классами JavaScript.

Если вам понравилась статья, дайте мне знать, вы можете следить за мной на 🐦twitter и 🧑‍💻 linkedin.