Компоненты – основные строительные блоки React. Если вы изучали Angular, то компоненты очень похожи на директивы (в других языках – виджеты или модули). Компонент может представлять собой код на JavaScript или на JSX (набор HTML, CSS, JS) + информация, работающая с этим объектом. Если вы будете использовать JSX, то потребуется компиляция проекта для преобразования JSX в JavaScript.

Пособие по React начинается с создания первого компонента.

Этот код выводит на экран уже привычное “Hello world”.

В нашем классе присутствует единственный метод render. Каждый из компонентов содержит этот метод, т. к. он определяет внешний вид созданного интерфейса.

ReactDOM.render принимает два аргумента: объект для отображения и ноду, в которую будет установлен объект.

В описанном коде определяется, каким образом React должен оперировать с объектом HelloWorld, и как его отобразить в блоке с id root. Через архитектуру React, которая наследует отношения между компонентами по принципу “предок – потомок”, нам необходимо будет использовать в наших приложениях только ReactDOM.render т. к. рендеринг родительского компонента отобразит все вложенные в него дочерние компоненты.

Может показаться странным смешивать логику JavaScript и разметку, но в этом и есть суть использования JSX – применение связки HTML и JavaScript кода в одном объекте программы.

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

Следующий код демонстрирует результат трансформации нашего JSX:

Обычно интерфейс пользователя имеет много различных состояний, что мешает контролировать его. Повторный рендеринг virtual Object Model при изменении ее состояния облегчает отслеживание текущего статуса приложения.

Описанный выше процесс можно представить так:

  • некоторые действия пользователя влияют на статус приложения;
  • повторный рендеринг virtual Object Model;
  • сравнивается предыдущая и новая версия virtual Object Model;
  • реальная Object Model принимает данные, полученные в процессе сравнения.

React статус компонента

Следующий базовый компонент, который включен в пособие по React, – это state. Каждый объект React может влиять на свое состояние и передавать эту информацию в качестве параметров дочерним объектам или при помощи props. Рассмотрим код:

В этом примере мы добавили новый метод constructor. Как говорилось ранее, это способ установки состояния компонента. Другими словами, любые данные, размещенные в this.state внутри конструктора, будут частью состояния этого компонента. В примере мы указываем нашему компоненту, что хотим отслеживать username. Это имя пользователя теперь можно применять внутри нашего компонента вызвав , что мы и делаем в методе render.

Последнее, что важно помнить про state, – компоненту необходимо иметь возможность модифицировать его собственное состояние. В коде это делается при помощи метода setState. Ранее мы уже рассматривали процесс изменения состояния:

  • сообщаем приложению, что состояние изменилось;
  • повторный рендеринг virtual DOM;
  • предыдущая версия virtual Object Model сравнивается с новой virtual DOM;
  • текущая Object Model получает информацию после сравнения.

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

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

Мы ввели несколько новых понятий. Метод handleChange вызывается каждый раз при введении текста в поле ввода. Когда handleChange срабатывает, вызывается setState, чтобы переназначить username независимо от входных данных (e.target.value). Помните, что при вызове setState создается обновленная виртуальная Object Model, сравнивает ее с существующей, а потом обновляет реальную Object Model.

Алгоритм работы кода из примера выше:

  • пользователь вводит текст в соответствующее поле;
  • срабатывает handleChange;
  • изменяется state компонента;
  • виртуальная Object Model перестраивается;
  • сравниваются отличия;
  • обновляется реальная Object Model.

Передача состояния наследнику через props открывает возможность коду на React оставаться понятным.

В четвертой строке есть атрибут name, который хранит значение Biblprog. Теперь наш компонент сможет использовать и получит в ответ Biblprog.

Рассмотрим более сложный пример: родительский компонент будет отслеживать состояние и передавать часть состояния наследнику через props.

В этом куске кода ничего нового не происходит, кроме появления нового класса ShowList:

Запомните, что код, возвращаемый методом render, является репрезентацией реальной DOM, а Array.prototype.map создает массив и заполняет его значениями, которые вернутся после вызова callback-функции.

В примере console.log возвращает [“<li> ‘Dwight Eisenhower’ </li>”, “<li> ‘Charles de Gaulle’ </li>”, “<li> ‘Winston Churchill’ </li>”]. Обратите внимание, что был создан новый массив, и к каждому элементу массива добавлено <li></li>.

Еще один важный нюанс в работе props: несмотря на расположение данных, существует определенное место для управления ими. Пособие по React пропагандирует такой подход, который упрощает манипулирование данными и позволяет сохранить простоту архитектуры.

В методе addFriend был вызван setState, в котором мы передаем функцию, а она, в свою очередь, переходит в state. Описание может казаться слегка запутанным, но дальше все прояснится.

Здесь мы имеем возможность добавлять имена в наш список друзей при помощи компонента AddFriend. Мы так делаем для того, чтобы придерживаться правил манипуляции нашими данными – объект AddFriend получит метод addFriend при помощи props только после вызова handleAddNew.

React props

  • prop-types – проверяет наличие и типы props в дочернем объекте.
  • propTypes – следит за тем, чтобы конкретные props были определенного типа.
  • defaultProps – позволяет определить значение по умолчанию для отдельных props.

В следующем примере требуется, чтобы addFriend был функцией, передаваемой компоненту AddFriend.

Пособие по React завершает тема жизненного цикла – важный момент в генерировании DOM.

Пособие по React

Все компоненты, создаваемые вами, будут иметь собственные жизненные события. Например, если мы хотим сделать ajax-запрос на первоначальный рендеринг и получить ответ, в каком месте его нужно вызвать? Как использовать определенную логику, когда реквизиты компонента изменились? Ответами на все вопросы будут – различные жизненные события.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях