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

React — это открытый исходный код, внешний интерфейс, библиотека JavaScript для создания пользовательских интерфейсов или компонентов пользовательского интерфейса. Поддерживается Facebook. React можно использовать как базу при разработке одностраничных или мобильных приложений.

Теперь обсудите некоторые особенности React.

Компоненты

Компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие, что должно появиться на экране.

Пример компонента:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Hasibul Islam" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

name="Hasibul Islam" передаст значение в {props.name} из function Welcome(props) и вернет компонент, которому присвоено значение name="Hasibul Islam". После этого React отобразит элемент в html.

JSX

JSX, или JavaScript XML, является расширением синтаксиса языка JavaScript.

JSX — это выражение, которое использует допустимые операторы HTML в JavaScript. Вы можете присвоить это выражение переменной и использовать ее в другом месте. Вы можете комбинировать другие допустимые выражения JavaScript и JSX в этих операторах HTML, помещая их в фигурные скобки ({}).

Пример JSX:

const myelement = <h1>I am Hasibul ISlam .I love to Code</h1>;

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

Реагировать на хуки

Хуки — это функции, которые позволяют разработчикам «подключаться» к функциям состояния и жизненного цикла React из функциональных компонентов. Они делают код читаемым и понятным. Хуки не работают внутри классов, они позволяют использовать React без классов.

React предоставляет несколько встроенных хуков, таких как useState, useContext, useReducer и useEffect, и это лишь некоторые из них. Все они указаны в Справочнике API хуков. useState и useEffect, которые наиболее часто используются, предназначены для управления состояниями и побочными эффектами соответственно в React Components.

Существуют также правила хуков, которым необходимо следовать, прежде чем их можно будет использовать.

  1. Хуки следует вызывать только на верхнем уровне.
  2. Хуки следует вызывать только из функциональных компонентов React, а не из обычных функций или компонентов класса.

Пример React Hook:

import React, { useState } from 'react';

function Example() {
[count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Реагировать маршрутизатор

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

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}