Автор оригинала: FreeCodeCamp Community Member.

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

Если вы хотите стать интерфейсом разработчиком или найти работу веб-разработки, вы, вероятно, выиграете бы от изучения в реагировании.

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

Для начала, вот как вы можете установить реагирование.

Что такое JSX?

Первое, что вы будете реализовать после установки вашего первого проекта RACT, заключается в том, что функция JavaScript возвращает какой-то код HTML:

function App() {
  return (
    

      

        
        

          Edit src/App.js and save to reload.
        
      
    
  );
}

Это специальное и допустимое расширение синтаксиса для реагирования, которое называется JSX (JavaScript XML). Обычно в проектах, связанных с Frontend, мы сохраняем HTML, CSS и JavaScript код в отдельных файлах. Однако в реакции это работает немного по-другому.

В реактивных проектах мы не создаем отдельные файлы HTML, поскольку JSX позволяет нам писать HTML и JavaScript вместе в одном файле, как в примере выше. Однако вы можете отделить ваши CSS в другом файле.

В начале JSX может показаться немного странным. Но не волнуйтесь, вы привыкнете к этому.

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

function App() {
  const text = 'Hello World';
  
  return (
    

      
 {text} 
    
  );
}

Кроме того, вы можете назначить теги HTML к переменным JavaScript:

const message = 
React is cool!
;

Или вы можете вернуть HTML внутри логики JavaScript (например, если нет случаев):

render() {
    if(true) {
        return 
YES
;
    } else {
        return 
NO
;
    }
}

Я не буду входить в другие подробности JSX, но убедитесь, что вы учитываете следующие правила во время записи JSX:

• HTML и компонентные теги всегда должны быть закрыты
• Некоторые атрибуты, такие как «Класс» стать «ClassName» (потому что класс относится к JavaScript Classes), «Tabindex» становится «Tabindex» и должен быть написана камера
• Мы не можем вернуть более одного HTML-элемента сразу, поэтому обязательно оберните их внутри родительской бирки:

return (
  

    
Hello
    
World
  
);

• Или как альтернатива, вы можете обернуть их пустыми тегами:

return (
  <>
    
Hello
    
World
  
);

Вы также можете посмотреть мою реакцию для начинающих учебников для получения дополнительной информации:

Что такое функциональные и классные компоненты?

После привыкания к синтаксису JSX следующая вещь для понимания является компонентной структурой реагирования.

Если вы пересмотрите пример код в верхней части этого поста, вы увидите, что код JSX возвращается функцией. Но функция APP () не является обычной функцией – это на самом деле компонент. Так что такое компонент?

Что такое компонент?

Компонент является независимым, многоразовым блоком кода, который разделяет интернет-интерфейс на более мелкие кусочки. Например, если мы строили UI Twitter реагировать:

Вместо того, чтобы построить все UI в один единственный файл, мы можем разделить все разделы (отмеченные красным) на меньшие независимые части. Другими словами, это компоненты.

React имеет два типа компонентов: функционал и класс. Давайте посмотрим на каждого сейчас более подробно.

Функциональные компоненты

Первый и рекомендуемый тип компонента в реакции является функциональными компонентами. Функциональный компонент в основном является функцией JavaScript/ES6, которая возвращает React Element (JSX). Согласно официальным документам Regact, функция ниже является действительным функциональным компонентом:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Кроме того, вы также можете создать функциональный компонент с определением функции стрелки:

const Welcome = (props) => { 
  return 
Hello, {props.name}
; 
}

Чтобы иметь возможность использовать компонент позже, вам нужно сначала экспортировать его, чтобы вы могли импортировать его где-то еще:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

export default Welcome;

После импорта его вы можете вызвать компонент, как в этом примере:

import Welcome from './Welcome';

function App() { 
  return (
    

      
    
  );
}

Таким образом, функциональный компонент в реакции:

• функция JavaScript/ES6
• Должен вернуть элемент React (JSX)
• всегда начинается с заглавной буквы (Конвенция об именах)
• принимает опоры в качестве параметра, если необходимо

Какие компоненты класса?

Второй тип компонента – это компонент класса. Компоненты класса являются классами ES6, которые возвращают JSX. Ниже вы видите нашу функцию приветствия, на этот раз как компонент класса:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

Разное из функциональных компонентов, компоненты класса должны иметь дополнительный метод Render () для возврата JSX.

Зачем использовать компоненты класса?

Мы использовали для использования компонентов класса из-за «государства». В более старых версиях реагирования (версия <16.8) было невозможно использовать состояние внутри функциональных компонентов.

Следовательно, нам нужны функциональные компоненты для рендеринга UI только, тогда как мы используем компоненты класса для управления данными и некоторые дополнительные операции (например, методы жизненного цикла).

Это изменилось с помощью реактивных крюков, и теперь мы также можем использовать состояния в функциональных компонентах. (Я буду охватывать государство и крючки в моих следующих постах, так что не против их сейчас).

Компонент класса:

• Это класс ES6, будет компонентом после того, как он «расширяет» комментарий реагирования.
• принимает реквизиты (в конструкторе), если это необходимо
• Должен иметь рендеринг () Способ возвращения JSX

Что такое реквизит в реакции?

Еще одна важная концепция компонентов заключается в том, как они общаются. React имеет специальный объект, называемый опорой (подставки для свойства), который мы используем для транспортировки данных из одного компонента к другому.

Но будьте осторожны – реквизиты только транспортные данные в одностороннем потоке (только от родителей к дочерним компонентам). Невозможно с реквизитами передавать данные от ребенка к родителю или к компонентам на одном уровне.

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

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

import Welcome from './Welcome';

function App() { 
  return (
    

      
      
      
    
  );
}

Реквиты являются пользовательскими значениями, и они также делают компоненты более динамичными. Поскольку приветственный компонент является ребенком здесь, нам нужно определить реквизиты на своем родиве (приложение), поэтому мы можем пропустить значения и получить результат, просто добравшись к принципу «имя»:

function Welcome(props) {
  return 
Hello, {props.name}
;
}

Регистрационные реквизиты действительно полезны

Так что разработчики реагирования используют реквизиты для передачи данных, и они полезны для этой работы. Но как насчет управляющих данных? Реквисы используются для передачи данных, а не для манипулирования его. Я собираюсь охватывать управляющие данные с реагированием в моих будущих сообщениях здесь на FreeCodeCamp.

Тем временем, если вы хотите узнать больше о разработке React & Web, не стесняйтесь Подписаться на мой канал YouTube Отказ

Спасибо за чтение!