Все, что вам нужно знать, чтобы начать реагировать

Автор оригинала: Abdul Moiz Ansari.

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

Среда

Мы будем использовать простой HTML-файл в этой статье. Просто обязательно включите следующие теги скрипта в заголовке файла HTML.

Таким образом, наш рабочий файл должен выглядеть так.




    
    My React App

Мы готовы идти сейчас.

Компоненты

Компоненты – это мясо и картофель приложения реагирования.

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

Давайте посмотрим на наш первый компонент.

class App extends React.Component{
 render(){
  return Hello React World.
 }
}
ReactDOM.render(            
 ,
 document.getElementById('root')
);

Наш компонент приложения – это класс ES6, который расширяет класс компотента реагирования. У этого есть один метод, который сейчас называется оказывать , который возвращает H3 Элемент, возвращая текст ‘ Здравствуйте, погибший мир ». Браузер будет только рендерировать элементы, возвращаемые Render () метод.

Но подожди минутку, это необходимо сделать метод необходимым?

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

Reactom.runder () Оказывает компонент приложения в элементе Div с ID «root». Он принимает компонент в качестве первого параметра и Parent Div в качестве второго параметра.

Удлинитель Syntax JavaScript (JSX)

Элемент H3, который мы объявили в компоненте приложений, не является HTML, его расширение синтаксиса JavaScript (JSX). JSX – это синтаксическое расширение в JavaScript. Это позволяет нам написать HTML, как объекты JavaScript (JSX) в JavaScript.

class App extends React.Component{
 render(){
  const element = Hello React World;
  return {element};
 }
}

JSX дает нам мощность JavaScript при записи HTML. Эти фигурные брекеты {} В приведенном выше примере сообщите компилятору реагирования что элемент является переменной JavaScript. Давайте посмотрим еще один практический пример.

render() {
 const users = ['Abdul Moiz','Linda Lee','John Frank'];
 const listItems = users.map(user => {user});
 return {listItems}; 
}

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

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

Реквизит

Реквиты – это свойства, переданные родительским компонентом для дочерних компонентов.

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

class App extends React.Component {
 render() {
  return ;  
 }
}
class Greet extends React.Component{
 render(){
  return {this.props.greeting} World;
 }
}

В приведенном выше примере мы прошли приветствие природы к компоненту приветствия и использовали его в нашем компоненте приложения. Мы можем получить доступ к всем реквизам от Это .props объект нашего класса. В этом случае мы доступны приветствие как Это .props.greeting Отказ

Хорошо, но какие данные я могу пройти в реквизитах?

В значительной степени каждая структура данных по умолчанию в JavaScript: строковые литералы, цифры, массив, объекты и даже функции. Да, мы можем пропустить функции, но мы не будем вступить в это прямо сейчас.

Состояние

Состояние, как реквизиты, также проводит данные, но некоторые различные типы данных.

Реквизиты удерживают данные, отправленные родительским компонентом. Государство содержит частные, динамические данные компонента. Состояние содержит данные, которые изменяются между несколькими визуализациями компонента.

Сложный? Не волнуйтесь, все будет иметь смысл в мгновение.

class App extends React.Component {
 constructor(){
  super();
  this.state = {name :"Abdul Moiz"};
 }
 changeName(){
  this.setState({name : "John Doe"});
 }
 
 render(){
  return (
   
     Hello {this.state.name}
     
   
  );
 }
}

Как мы видим, мы должны инициализировать состояние в конструкторе И тогда мы можем использовать его в методе рендера. Как реквизиты, мы получаем доступ к состоянию с объектом «this.state». И в случае нашего Click нашего Изменить Кнопка, мы изменяем значение имени в состоянии «Джон Доу».

setState ()

Мы используем setState () Способ изменить наше состояние. setState () Доступен по умолчанию в области реагирования и является единственным способом изменить состояние. Мы передаем объект как параметр для setState () Отказ Реагирование будет смотреть на пропущенный объект и изменится только прилагаемые ключи состояния с указанными значениями.

Но подожди минутку, если setState () Это единственный способ изменить состояние, это означает, что я не могу сразу изменить состояние?

Да, мы не можем сразу изменить состояние, как это:

this.state.name = "John Doe";

Потому что когда мы называем setState () Он говорит, что реагирует, что данные были изменены, и нам нужно перенаправить компонент с обновленными данными. Обновление состояния сразу не повлияет на UI.

Обработчики событий

Обработчики событий в реакции не сильно отличаются от обработчиков событий в DOM. Но у них есть небольшие, но важные различия.

В DOM обработчики событий являются строчными, но в реакции, обработчики событий являются камерой. Во-вторых, в DOM, обработчики событий принимают значение в виде строки, но в реакции, обработчики событий принимают ссылку на функцию в качестве значения.

Ниже приведен пример того, как мы обрабатываем событие в DOM:

И вот как это делается в реакции:

Если вы заметите, в DOM мы обрабатываем событие Click, используя OnClick (строчные) Дом недвижимости. В то время как в реакции мы используем OnClick (CamelCase) обработчик событий от реакции. Кроме того, мы передаем строковое значение dosomething () в доме. Но в реакции мы передаем ссылку на функцию Досметочное как значение.

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

Усталый? Я тоже, но мы почти там – продолжайте учиться!

Методы жизненного цикла (крючки жизненного цикла)

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

ComponentDidMount ()

Монтаж – это время, когда компонент отображается впервые в браузере. ComponentDidMount () работает после того, как компонент устанавливается. Это хорошее место для получения любых данных или инициировать что-нибудь.

ComponentDidupdate ()

Как предполагает его название, ComponentDidupdate () Запускается после обновления компонента. Это место для обработки изменений данных. Может быть, вы хотите обрабатывать некоторые сетевые запросы или выполнять расчеты на основе измененных данных. ComponentDidupdate () это место, чтобы сделать все это.

Посмотрим, что в действии:

class App extends React.Component {
 constructor(){
  super(); 
  this.state = {
   person : {name : "" , city : ""}
  };
 }
 componentDidMount(){
  //make any ajax request
  this.setState({
   person : {name : "Abdul Moiz",city : "Karachi"}
  });
 }
 componentDidUpdate(){
  //because I could'nt come up with a simpler example of //componentDidUpdate
  console.log('component has been updated',this.state);
 }
 render(){
  return (
   
    Name : {this.state.person.name}
    City : {this.state.person.city}
   
  );
 }
}

Наше первоначальное состояние имеет два свойства, имени и города, и оба имеют пустую строку в качестве значения. В ComponentDidMount () Мы устанавливаем состояние и изменение имени «Абдул Моз» и город на «Карачи». Поскольку мы изменили состояние, компонент обновляется в результате выполнения ComponentDidupdate () Отказ

Заключение

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

И не забудьте следовать за мной на Twitter Отказ

Ресурсы

Оригинал: “https://www.freecodecamp.org/news/everything-you-need-to-know-to-get-started-in-react-11311ae997cb/”