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

1656583452 vse chto vam nuzhno znat chtoby nachat rabotu v react

«Труднее всего начать – это начать» — Гай Кавасаки

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

Окружающая среда

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

<script src="
<script src="
<script src="

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

<!DOCTYPE html>
<html>
<head>    
    <title>My React App</title>

    <script src="
    <script src="
    <script src="    
</head>
<body>
    
    <div id="root"></div>

    <script type="text/babel" >   
    
       //React code should go here
    </script>
</body>
</html>
</script></body></html>

Сейчас мы готовы.

Dgrr7QYoN3uYtpLisYwkUzzXyuj-oQhyZdNH
кредиты: https://www.pexels.com

Компоненты

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

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

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

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

Наш компонент App – это класс ES6, расширяющий класс Component React. На данный момент у него есть единственный метод renderкоторый возвращает an h3 элемент, возвращающий текст «Hello React World». В браузере будут отображаться только элементы, возвращенные файлом. render() метод.

Но подождите минутку, нужен ли этот способ визуализации?

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

ReactDOM.render() воспроизводит компонент App в элементе div с идентификатором «root». Он принимает компонент в качестве первого параметра и родительский div как второй параметр.

Расширение синтаксиса JavaScript (JSX)

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

class App extends React.Component{
 render(){
  const element = <h3>Hello React World</h3>;
  return <div>{element}</div>;
 }
}

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

render() {
 const users = [‘Abdul Moiz’,’Linda Lee’,’John Frank’];
 const listItems = users.map(user => <li>{user}</li>);
 return <ul>{listItems}</ul>; 
}

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

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

Реквизит

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

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

class App extends React.Component {
 render() {
  return <Greet greeting="Hello" />;  
 }
}
class Greet extends React.Component{
 render(){
  return <h3>{this.props.greeting} World</h3>;
 }
}

В приведенном выше примере мы передали элемент приветствия компоненту Greet и использовали его в нашем компоненте App. Мы можем получить доступ ко всем реквизитам из this.rekvizit объект нашего класса. В этом случае мы получаем доступ приветствие как это.реквизит.приветствие.

Хорошо, но какой тип данных можно передать в props?

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

государство

State, как и props, также содержит данные, но некоторые разные типы данных.

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

Реквизиты передаются компоненту (например, параметры функции), тогда как состоянием управляют внутри компонента (как переменные, объявленные в функции) — React Docs

Сложный? Не беспокойтесь, мгновенно все станет понятно.

class App extends React.Component {
 constructor(){
  super();
  this.state = {name :"Abdul Moiz"};
 }
 changeName(){
  this.setState({name : "John Doe"});
 }
 
 render(){
  return (
   <div>
     <h3>Hello {this.state.name}</h3>
     <button type="button" onClick=this.changeName.bind(this)}>
      Change
     </button>
   </div>
  );
 }
}

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

setState()

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

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

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

this.state.name = “John Doe”;

Ибо когда мы звоним setState(), он сообщает React, что данные были изменены, и нам нужно повторно отобразить компонент с обновленными данными. Немедленное обновление состояния не повлияет на пользовательский интерфейс.

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

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

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

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

<button type=”submit” onclick=”doSomething()”></button>

А вот как это делается в React:

<button type=”submit” onClick=doSomething></button>

Если вы заметили, что в DOM мы обрабатываем событие клика с помощью onclick (нижний регистр) Свойство DOM. В React мы используем onClick (camelCase) обработчик событий от React. Кроме того, мы передаем строчное значение doSomething() в DOM. Но в React мы передаем ссылку на функцию doSomething как значение.

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

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

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

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

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 (
   <div>
    <p>Name : {this.state.person.name}</p>
    <p>City : {this.state.person.city}</p>
   </div>
  );
 }
}

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

Вывод

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

И не забудьте подписаться на меня в Twitter.

Ресурсы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *