Требования
- Узел и IDE, установленные на вашем компьютере.
Что такое React? 😕💭
React - это интерфейсная библиотека JavaScript с открытым исходным кодом, созданная Facebook в 2013 году. React - одна из лучших библиотек JavaScript, которая делает веб-приложения более быстрыми и эффективными с минимальным кодированием.
В этой статье мы расскажем об основах React и о том, как создать приложение для реагирования.
Почему React? ❗️ ❗️
- Легче учиться. Поскольку React известен и используется во многих отраслях, существует множество хороших документов, блогов, статей и руководств по React. Так легче учиться самому.
- Наличие JSX. JSX представляет собой комбинацию HTML и JavaScript, которая значительно упрощает кодирование.
- Компоненты многократного использования. В ответ мы можем разбить код на компоненты меньшего размера и использовать их снова и снова. Это поможет уменьшить кодовую базу.
Давайте создадим приложение для реагирования с помощью ‘create-react-app’ 💻
На вашем компьютере должны быть Node› = 10.16 и npm ›= 5.6.
Затем откройте командную строку (CLI) и установите create-react-app на свой компьютер глобально, используя:
npm install -g create-react-app
Теперь, чтобы создать приложение для реагирования, я создаю папку с названием «First React» и открываю терминал в этой папке. Затем введите create-react-app <project name> в терминале. В качестве названия проекта можно указать любое имя. Но убедитесь, что в названии проекта нет заглавной буквы, иначе реакция выдаст ошибку.
Это приложение create -react-app создаст шаблон приложения React.
Также вы можете использовать приложение create-response-app напрямую, не устанавливая его. Используйте команду ниже:
npx create-react-app <project name>
npx - это команда запуска пакета, включенная в npm.
Теперь нам нужно перейти в каталог проекта. Тип cd <project name>
Затем для запуска реагирующего приложения введите npm start
Поскольку приложение create-react-app создает образец шаблона, мы можем запустить и просмотреть образец приложения.
После успешного запуска проекта вы получите что-то вроде этого. Он автоматически запустит приложение реакции в браузере, или вы можете вручную ввести https://localhost:3000/ в своем браузере, чтобы открыть приложение.
Краткое описание каталога проекта 👍
Если вы используете VSCode, просто введите code . в каталоге проекта, чтобы открыть проект в VSCode.
package.json - этот файл содержит зависимости и скрипты, необходимые для проекта.
package-lock.json - это обеспечивает последовательную установку наших зависимостей.
.gitignore - файлы, которые нужно игнорировать при добавлении проекта в GitHub. Мы также можем вручную добавить файлы, которые не хотим добавлять на GitHub.
README.md - подробные сведения о приложении реакции (как запустить, собрать и т. д.)
node_modules - все наши установленные зависимости.
общедоступные - значки и изображения, используемые в образце шаблона реакции, index.html - единственная HTML-страница в проекте.
src - папка, которую мы чаще всего используем для разработки.
i ndex.js - укажите корневой компонент (приложение) и элемент DOM. Это связано с index.html, который мы видели раньше.
App.js - отвечает за HTML, отображаемый в браузере. Представьте представление, которое мы видим в браузере.
Файлы CSS - содержат дизайны CSS.
Основные понятия, которые вам нужно знать 👀
JSX
JSX - это синтаксис, подобный XML / HTML. который добавляет синтаксис XML / HTML в JavaScript.
Компонент
В приложении React компоненты являются основными строительными блоками. Группа компонентов составляет реактивный проект.
Здесь вы можете видеть, что эта единственная страница создана с использованием 5 компонентов. (Верхний колонтитул, Страна, Диаграмма и Нижний колонтитул). Мы можем повторно использовать верхний и нижний колонтитулы на любых других страницах.
Есть 2 типа компонентов.
- Компонент класса
- Функциональный компонент
Реквизит
Свойства являются неизменяемыми, что позволяет сделать компоненты динамическими путем передачи свойств / данных от одного компонента к другому. Он просто передает некоторую информацию родительским компонентом дочернему компоненту.
Штат
Состояние - это переменная в каждом компоненте класса, которая имеет возможность динамически хранить информацию и контролируется компонентом. Это личное для этого одного компонента.
