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

Составная часть

Компонент React - это функция JavaScript, которая возвращает элемент React. Он не может вернуть «undefined» (явно или неявно). Он должен возвращать значение или ноль. С другой стороны, компонент React - это часть пользовательского интерфейса, шаблона, плана и глобального определения. Это может быть функция или класс с методом рендеринга. Компоненты могут использоваться повторно и могут быть вложены в другие компоненты. Есть два типа компонентов.

  1. Функциональный компонент без сохранения состояния
  2. Компонент класса с отслеживанием состояния

Функциональный компонент: просто функция JavaScript, которая вводит некоторые свойства в качестве свойств и возвращает HTML как JSX.

Это пример функционального компонента. Думаю, это может быть непонятно. Не волнуйтесь, через несколько шагов я расскажу подробнее.

Компонент класса: это просто класс ES6, который вводит некоторые свойства в качестве свойств и возвращает ноль или некоторый HTML как JSX. Но у него есть какое-то частное внутреннее состояние.

Похоже на класс ES6, верно.

Компоненты функции и класса. Давайте посмотрим на разницу между ними обоими.

JSX

JSX - это расширение JavaScript, которое позволяет нам писать вызовы функций в синтаксисе, подобном HTML. По сути, это компромисс. Вместо того, чтобы писать компоненты React с использованием синтаксиса React.createElement, мы используем синтаксис, очень похожий на HTML, а затем используем компилятор для преобразования его в вызовы React.createElement. Когда вы используете create-response-app, сгенерированное приложение будет внутренне использовать Babel для транспиляции вашего JSX. Этот синтаксис преобразуется в React, но JSX также можно использовать отдельно. Это не только React. JSX делает ваш код React более простым и элегантным. Теги JSX имеют имя тега, атрибуты и дочерние элементы. JSX в конечном итоге преобразуется в чистый JavaScript, понятный браузерам. Давайте посмотрим на пример JSX.

Как я сказал выше, это XML-подобный код для элементов и компонентов. Вот почему этот код выглядит как HTML. Давайте посмотрим без JSX в React.

Собственно, за кадром есть сама большая картина. ReactDOM.rende r - это точка входа для приложения React в DOM браузера. У него 2 аргумента. Первый - это ЧТО визуализировать (элемент React), а второй - ГДЕ для визуализации (действительный DOM, существующий в статически визуализированном HTML). Что такое элемент React? Это ВИРТУАЛЬНЫЙ элемент, описывающий элемент DOM. Это то, что возвращает метод API React.createElement. Есть много аргументов. Первые аргументы - это тег HTML, второй - любые атрибуты (id, href, title и т. Д.), третий аргумент - это содержимое элемента DOM.

В моем коде это метод React.createElement, за исключением минимум трех параметров. Первые параметры - это HTML-теги для рендеринга. Вторые параметры - это атрибуты id и className. Последний - это еще один метод React.createElement, который также имеет три параметра, например «h1», «null» и «Hello Maruf» (дочерние элементы HTML-элемента). Если вы немного разбираетесь в этом коде, возможно, у вас возникнет вопрос, почему в этом примере мы используем React.createElement два раза. Хакерство заключается в том, чтобы создать HTML-тег в одном методе React.createElement.

Давайте сравним оба этих примера кода и узнаем красоту JSX.

Отличия JSX:

Класс - ›ClassName

для - ›htmlFor

Соглашение об именах свойств camelCase

  • onclick - ›onClick
  • tabindex - ›tabIndex

Реквизит

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

В этом примере в компоненте «Приложение» мы используем компонент «Приветствие», и его можно использовать повторно, потому что мы повторно используем его 3 раза. Итак, когда вы повторно используете компонент в это время, появляются «Реквизиты». Просто «Реквизит» не хватает свойств. Компонент Greet в приложении имеет свойство name и Hero name. Эти реквизиты передаются компоненту «Greet», и он получает объект, используя реквизиты, как в правой части примера. Если вы зарегистрируете свой аргумент props в компоненте Greet, вы получите вывод в консоли браузера.

Хотя у вас есть Object. Таким образом, вы можете использовать его самостоятельно динамически. Снова с нетерпением ждем нашего кода, вы видите первое и второе «Привет», мы передали HTML-теги «p» и «button» с текстовым узлом через свойство «props». После передачи этого тега компонент Greet также получает его как «props.children».

Состояние

Его рабочая концепция такая же, как и у props, но разница определяется состоянием внутри компонента. Давайте посмотрим на разницу между реквизитом и состоянием.

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

Посмотрите на пример кода. Здесь состояние управляется внутри «компонента сообщения».