Начало работы с React и JSX

React - это библиотека для создания интерфейсных представлений. Он имеет большую экосистему библиотек, которые с ним работают. Кроме того, мы можем использовать его для улучшения существующих приложений.

В этой статье мы рассмотрим, как создавать простые приложения с помощью React.

Начиная

Самый простой способ создать приложение React - использовать пакет Create React App Node.

Мы можем запустить его, запустив:

npx create-react-app my-app

Затем мы можем перейти к my-app и запустить приложение, запустив:

cd my-app
npm start

Create React App полезен для создания одностраничного приложения.

Приложения React не обрабатывают серверную логику или базы данных.

Мы можем использовать npm run build для создания приложения, чтобы создать приложение для производства.

Создание нашего первого приложения на React

Как только мы запустили Create React App, как мы делали выше, мы можем создать наше первое приложение. Чтобы создать его, мы заходим в App.js, а затем начинаем там изменять код.

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

Поэтому мы будем использовать обычные конструкции JavaScript в JSX.

Начнем с создания приложения Hello World. Для этого мы заменяем то, что есть, на следующее в index.js:

import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В приведенном выше коде у нас есть компонент App, который является просто функцией. Он возвращает:

<div>
  <h1>Hello World</h1>
</div>

это наш код JSX для отображения Hello World. h1 - это заголовок, а div - это элемент div.

Приведенный выше код выглядит как HTML, но на самом деле это JSX.

То, что мы имеем выше, является компонентом, основанным на функциях, поскольку компонент написан как функция.

В последних двух строках мы получаем элемент с ID root из public/index.html и помещаем в него наш App компонент.

Другой способ написать приведенный выше код - написать:

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Приведенный выше код представляет собой компонент на основе классов, в котором есть метод render для преобразования того же кода JSX в HTML.

Разница между двумя примерами в том, что один - это функция, а другой - класс, расширяющий React.Component.

В остальном они такие же. Любой файл компонента должен включать:

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

В противном случае мы получим ошибку.

React не требует JSX, просто им гораздо удобнее пользоваться. Третий способ создать приложение Hello World - использовать метод React.createElement.

Мы можем использовать метод следующим образом:

import React from "react";
import ReactDOM from "react-dom";
const e = React.createElement;
const App = e("h1", {}, "Hello World");
const rootElement = document.getElementById("root");
ReactDOM.render(App, rootElement);

Первый аргумент метода createElement - это имя тега в виде строки, второй аргумент имеет реквизиты, которые являются объектами, которые мы передаем созданному компоненту, а третий аргумент - это внутренний текст их элемента.

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

Во всех 3 примерах мы получаем:

отображается на экране.

Встраивание выражений в JSX

Мы можем вставлять выражения JavaScript между фигурными скобками. Например, мы можем написать:

import React from "react";
import ReactDOM from "react-dom";
function App() {
  const greeting = "Hello World";
  return (
    <div>
      <h1>{greeting}</h1>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Затем мы снова видим на экране Hello World.

Что-то более полезное в мире, вызывающее функцию следующим образом:

import React from "react";
import ReactDOM from "react-dom";
function App() {
  const formatName = user => {
    return `${user.firstName} ${user.lastName}`;
  };
  const user = {
    firstName: "Jane",
    lastName: "Smith"
  };
  return (
    <div>
      <h1>{formatName(user)}</h1>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

В приведенном выше коде мы определили функцию formatName внутри компонента App, которая принимает объект user и возвращает соединенные вместе user.firstName и user.lastName.

Затем мы определили объект user с этими свойствами и вызвали функцию внутри фигурных скобок.

Все, что будет возвращено, будет отображаться между фигурными скобками. В данном случае это будет Джейн Смит.

Заключение

Мы можем создать приложение React с помощью пакета Create React App Node.

Затем мы можем добавлять компоненты как функцию, класс или с React.createElement.

Чаще всего используются первые 2 способа, поскольку они возвращают JSX в функции или render методе класса компонента соответственно.

JSX намного удобнее, чем createElement, для написания кода JavaScript с помощью React, особенно когда наше приложение становится сложным.

Мы можем вставлять выражения JavaScript между фигурными скобками.