Этот учебник научит вас основам React, создав простое приложение. Все, что я не считаю необходимым, будет исключено.
React обеспечивает значительное повторное использование кода и эффективность. По сравнению с другими фреймворками или библиотеками вы можете создавать масштабируемую структуру для приложений ReactJS быстрее. Согласно статистике BuiltWith, React используется примерно на 1,2 миллиона веб-сайтов.
React.js — это пакет JavaScript с открытым исходным кодом, который используется для создания пользовательских интерфейсов одностраничных приложений. Для веб-приложений и мобильных приложений он используется для управления уровнем представления. Мы также можем создавать повторно используемые компоненты пользовательского интерфейса с помощью React.
Основные характеристики React.js включают виртуальный DOM, декларативный пользовательский интерфейс, JSX, одностороннюю привязку данных, простую совместимость с React Native и дизайн на основе компонентов.
Зачем использовать React?
ReactJS — это популярный набор инструментов JavaScript с открытым исходным кодом, основанный на компонентах, для создания многократно используемых компонентов пользовательского интерфейса для онлайн-приложений и мобильных приложений. React часто ошибочно принимают за инструмент, фреймворк или язык, и иногда его путают с React Native, кроссплатформенным инструментом разработки мобильных приложений.
Краткий обзор каталога проекта
Просто введите код. в каталоге проекта, чтобы запустить проект в VSCode, если вы его используете.
package.json — этот файл содержит все зависимости и сценарии проекта.
package-lock.json — это гарантирует, что наши зависимости будут установлены последовательно.
gitignore — список файлов, которые следует игнорировать при загрузке проекта на GitHub. Мы также можем добавить файлы, которые нам не нужны, в GitHub вручную.
README.md — этот файл содержит информацию о приложении React (как запустить, собрать и т. д.).
модули узла — все наши установленные зависимости.
public — символы и графика, которые отображаются в образце шаблона реакции. Единственная HTML-страница в проекте — index.html.
src — это папка, в которой мы делаем большую часть нашей разработки.
Укажите корневой компонент (приложение) и элемент DOM в index.js. Это связано с index.html, который мы видели ранее в приложении. JavaScript отвечает за HTML, отображаемый в браузере. Представляют текущее представление браузера.
CSS-файлы — в этих файлах хранятся CSS-дизайны.
Вы должны знать следующие основные понятия.
Компонент
Компоненты — это основные строительные части в реагирующем приложении. Реактивный проект состоит из набора компонентов.
Есть 2 типа компонентов.
- Компонент класса
- Функциональный компонент
Реквизит
Реквизиты неизменяемы, что позволяет сделать компоненты более динамичными, передавая свойства/данные от одного к другому. Это просто родительский компонент, передающий информацию дочернему компоненту.
Аргументы, передаваемые компонентам React, называются реквизитами. Атрибуты HTML используются для передачи свойств компонентам. Реквизиты — это сокращение от «свойства».
Штат
Объект состояния — это встроенный объект React, который содержит данные или информацию о компоненте. Состояние компонента может меняться со временем, и когда это происходит, компонент перерисовывается. В приложении состояние позволяет нам управлять изменяющимися данными. Это тип объекта, в котором мы создаем пары ключ-значение, определяющие различные данные, которые мы хотим отслеживать в приложении. Весь код, который мы пишем в React, содержится внутри компонента.
Особенности Реакта
JSX
ДОМ
Привязка данных
Компоненты
Компонентная архитектура
Я надеюсь, что мой учебник «Что такое React» помог вам лучше понять, как работает React. Если вы хотите изучить React и стать фронтенд-разработчиком, вам следует пройти полный курс разработки.
