Создание приложения First React

React - это библиотека Javascript с открытым исходным кодом для создания динамических приложений. MVC означает Model View Controller, а React - это V или View в этой архитектуре.

Вот некоторые из преимуществ создания приложений на React:

  1. Инкапсулированные компоненты: поскольку приложения можно разделить на более мелкие компоненты, это позволяет разбить их на более мелкие части, которые можно будет использовать повторно.
  2. Динамические свойства и состояния: элементам и компонентам в React могут быть присвоены состояния и свойства (свойства). Эти состояния и свойства можно изменять и передавать другим элементам и компонентам в приложении. Это дает больше возможностей для повторного использования и лучшую организацию.
  3. Виртуальный DOM: React работает на основе виртуального DOM. Поскольку обновление фактического DOM может привести к увеличению времени загрузки, React полагается на виртуальную DOM, которая похожа на облегченную и более быструю версию DOM. всякий раз, когда в состояния или свойства вносятся изменения, React проверяет эти изменения и повторно визуализирует только те элементы, которые были изменены, вместо визуализации всего документа.
  4. React не зависит от остальной части приложения: если вы хотите использовать React и интегрировать серверную базу данных с MongoDB или любой другой структурой, вы можете легко это сделать.

Начиная:

Начать работу с React просто. После его установки вы можете просто запустить приложение create-response-app в командной строке, а затем указать имя приложения, которое вы хотите создать. В результате создается приложение React со всеми необходимыми функциями, которые уже встроены в приложение. Затем вы можете просто cd войти в приложение React и запустить его с помощью npm start.

Вот как это будет выглядеть в командной строке:

После запуска приложения откройте его в текстовом редакторе. Первое, на что стоит обратить внимание, - это файловая структура. Create-React-App уже установил для вас несколько файлов и организовал некоторые из них в папки. Ваши основные папки - это папка src и общая папка.

Если вы перейдете к файлу package.json, вы увидите, что приложение create-response-app также установило для вас несколько сценариев реакции. Я также установил здесь некоторые функции начальной загрузки для этого проекта, но все остальное уже предустановлено.

Далее идет страница index.html, расположенная в общей папке. Если вы действительно связываете какие-либо внешние таблицы стилей, или вам нужно добавить загрузочную программу, или другую функцию, вы должны добавить ее сюда. Здесь вы можете увидеть, где я добавил бутстрап в проект. Вы также можете изменить заголовок здесь, что, как видите, мне не удалось сделать. В остальном вам обычно не нужно сильно трогать этот файл. Вы также заметите div с идентификатором «root». Здесь будет выводиться весь контент. Вам не нужно это менять, просто знайте, что это есть.

Следующий файл, который вы, возможно, захотите посмотреть, - это ваш файл index.js в папке src. Здесь мы импортируем React и ReactDOM. Мы также рендерим все здесь в «корневой» элемент. Вам также не нужно трогать или изменять этот файл, но хорошо знать, что именно так он структурирован.

Ранее я упоминал, что одна из замечательных особенностей React - это способность разделять код на отдельные компоненты. Вы можете создать все свои компоненты в одном файле app.js. Однако, чтобы избежать длинного файла app.js, часто с организационной точки зрения проще создать папку компонентов и хранить в ней отдельные файлы js для каждого необходимого компонента. Я изменил свою файловую структуру, чтобы отразить это. Я также создал папку стилей, поэтому я могу хранить свои файлы CSS отдельно. Как вы это организуете, зависит от вас, но мне кажется, что это хорошо работает.

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

Вот как будет выглядеть верхняя часть нашего файла App.js. Во-первых, мы импортируем React из «react», а также любые таблицы стилей. Затем мы используем тот же синтаксис для импорта всех наших отдельных компонентов. Поскольку наш файл App.js также находится в нашей папке компонентов, мы можем просто сказать «./ProductImage» для нашего компонента «Изображение продукта». Однако, если ваш App.js находится за пределами папки компонентов, вам нужно будет добавить компоненты в путь к файлу, и он будет выглядеть как «./components/ProductImage». Нет правильного или неправильного способа сделать это, просто нужно помнить о чем-то, когда вы настраиваете свой файл.

Компоненты и конструкторы

Тогда вы заметите линию,

класс App расширяет компонент

мы будем использовать этот синтаксис и во всех других наших компонентах. По сути, это означает, что любые атрибуты, содержащиеся в Component, будут расширены через App. Наш компонент ProductImage также расширит основной компонент, а также все другие отдельные компоненты. Первый метод, который мы вызываем после расширения компонента, - это метод конструктора. Вот как мы инициализируем состояние.

Конструктор компонента React вызывается перед его монтированием. При реализации конструктора для подкласса React.Component вы должны вызывать super(props) перед любым другим оператором. В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Конструктор - это подходящее место для инициализации состояния. Если вы не инициализируете состояние и не связываете методы, вам не нужно реализовывать конструктор для вашего компонента React.

Инициализация состояния на основе свойств - это нормально. Это эффективно «разветвляет» реквизиты и устанавливает состояние с исходными реквизитами. Вот пример допустимого конструктора подкласса React.Component:

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

Ниже нашего метода конструктора у нас есть рендеринг и возврат. Внутри вы увидите то, что выглядит как HTML. Это то, что называется JSX, который React конвертирует в Javascript при рендеринге. Очевидно, наш JSX выглядит довольно голым, и это потому, что, опять же, вся работа фактически выполняется в компоненте. Это больше похоже на наш HTML-скелет, где мы говорим нашим различным компонентам о рендеринге. Все, что нам нужно сделать, это поместить различные компоненты в самозакрывающийся тег, и все готово. И, наконец, мы хотим экспортировать приложение в самом конце.

Состояния и реквизит

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

Есть два типа данных, которые управляют компонентом: props и state. props устанавливаются родителем и фиксируются на протяжении всего жизненного цикла компонента. Для данных, которые собираются измениться, мы должны использовать state.

В общем, вы должны инициализировать state в конструкторе, а затем вызывать setState, когда хотите его изменить.

Например, предположим, что мы хотим сделать текст, который будет постоянно мигать. Сам текст устанавливается один раз при создании мигающего компонента, поэтому сам текст является prop. Параметр «включен ли текст в данный момент или выключен» со временем меняется, поэтому его следует сохранить в state.

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

Думайте о setState() как о запросе, а не о немедленной команде для обновления компонента. Для лучшего восприятия производительности React может отложить ее, а затем обновить несколько компонентов за один проход. React не гарантирует немедленного применения изменений состояния.

setState() не всегда сразу обновляет компонент. Он может выполнить пакетное обновление или отложить его на потом. Это делает чтение this.state сразу после вызова setState() потенциальной ловушкой. Вместо этого используйте componentDidUpdate или setState обратный вызов (setState(updater, callback)), любой из которых гарантированно сработает после применения обновления. Если вам нужно установить состояние на основе предыдущего состояния, прочтите об аргументе updater ниже.

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

В этом примере вы можете увидеть настройку страницы ProductImage. Вверху мы импортируем bootstrap, а также React, так же, как мы видели в нашем файле App.js. Мы также вызываем класс, который снова расширяет компонент, а затем инициализируем его конструктором и суперметодом. Все это может показаться очень знакомым, и это хорошо. После настройки одного компонента вы можете скопировать большую часть кода для повторного использования в других компонентах. Поскольку это наш компонент изображения продукта, основная часть этой части страницы - это изображение. Мы больше не занимаемся чем-то другим, поэтому единственное состояние, которое мы используем и изменяем, - это изображения. Как видите, мы изначально устанавливаем состояние в пустой массив с помощью this.state. Чаще всего вы хотите, чтобы ваше состояние было пустым, чтобы при установкеState вы меняли его на что-то с реальным содержанием. Мы используем метод жизненного цикла componentDidMount, чтобы инициировать запрос на выборку данных API. Вы можете увидеть через этот код, как состояние изображений передается и изменяется. В строке 23 мы отображаем изображения, а в строке 27 мы сообщаем React, из какой части api брать. Затем в строке 33 мы используем this.setState. setState изменяет или обновляет состояние. Это сигнал, который React ищет при чтении кода. setState - это сигнал о том, что состояние компонента изменилось, и React затем обновит этот компонент в DOM с новым изменением состояния.

Ниже у нас есть наш рендеринг и возврат, где мы синяем структуру компонента с помощью JSX и вставляем сопоставленные данные и изменение состояния. Мы вызываем это состояние и вставляем его с помощью фигурных скобок. Здесь говорится:

{this.state.pictures}

Это все, что нам нужно сделать, чтобы передать состояние через компонент. Если вы помните, у нас уже есть этот компонент, импортированный в ваш файл app.js, и он может быть отрисован там, как только React обнаружит, что состояние изменилось. React упрощает изменение и передачу состояний и свойств через компоненты.

Это всего лишь краткое описание React, как настроить базовый файл, и на самом деле только поверхностное представление о том, как использовать состояния и свойства в вашем приложении. Для получения дополнительной информации о начале работы и более глубоком изучении React посетите веб-страницу React по адресу: https://facebook.github.io/react/

Если у вас есть дополнительные вопросы или я пропустил что-то важное, не стесняйтесь обращаться к нам. Спасибо!



Итан Джаррелл | Профессиональный профиль | LinkedIn
Просмотрите профессиональный профиль Итана Джаррелла в LinkedIn. LinkedIn - крупнейшая в мире деловая сеть, помогающая… www.linkedin.com