Начнем
В этом уроке мы изучим основы компонентов и несколько терминов React.
На изображении выше вы можете увидеть файл с именем App.js внутри папки src. В React компонент приложения является корневым компонентом для всех компонентов, которые мы создаем. Мы узнаем больше об этом позже в этом курсе.
Вы можете видеть в mage, что у нас есть функция с именем Приложение, которую мы экспортируем с помощью приложения функции экспорта по умолчанию. Итак, когда мы что-то экспортируем, нам нужно это куда-то импортировать. Вам может прийти в голову такой вопрос: «Где именно мы импортируем этот компонент приложения?
Внутри файла index.js мы импортируем наш компонент приложения из файла App.js в строке 4. Мы используем ReactDOM для визуализации нашего компонента приложения.
Если вы заметили, сначала тщательно изобразите, то вы можете заметить две вещи:
- Мы использовали функцию в нашем компоненте приложения.
- Мы написали HTML внутри нашей функции.
Мы будем обсуждать все эти два пункта один за другим.
Тип компонента в React
В React мы можем создавать компоненты, используя либо функцию, либо класс. В этой серии мы научимся реагировать, создавая функциональные компоненты.
Что такое JSX?
JSX означает JavaScript XML. JSX используется в React, что позволяет разработчикам использовать HTMLвнутри JavaScript.
На первом изображении в нашей функции есть оператор return с именем App. Мы печатаем «Это мое первое приложение» внутри нашего тега h1.
Теперь мы напишем тот же тег h1 внутри нашего файла firstApp.js.
Давайте используем этот компонент внутри нашего компонента приложения.
В строке 1 на изображении выше мы импортировали компонент FirstApp из файла FirstApp.js. Вы заметите, что мы не пишем .js в пути к файлу при импорте. Потому что нам это не нужно. Мы должны просто дать имя файла, вот и все.
**Если у вас есть какие-либо сомнения, задавайте их в комментариях. Мы наверстаем упущенное в следующем уроке из этой серии.**
