Введение
Добро пожаловать в документацию по React! В этом практическом занятии вы познакомитесь с созданием и вложением компонентов.
Создание и вложение компонентов
Виртуальная машина уже содержит проект React. В общем случае, вам нужно только добавить код в
App.js.
Для установки зависимостей используйте следующую команду:
npm i
React-приложения состоят из компонентов. Компонент — это часть пользовательского интерфейса (UI), которая имеет свою собственную логику и внешний вид. Компонент может быть настолько маленьким, как кнопка, или настолько большим, как целая страница.
React-компоненты — это JavaScript-функции, которые возвращают разметку:
// App.js
function MyButton() {
return <button>I'm a button</button>;
}
Теперь, когда вы объявили MyButton, вы можете вложить его в другой компонент:
// App.js
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
Заметьте, что <MyButton /> начинается с заглавной буквы. Именно так вы понимаете, что это React-компонент. Имена React-компонентов всегда должны начинаться с заглавной буквы, в то время как HTML-теги должны быть в нижнем регистре.
Ключевые слова export default определяют главный компонент в файле. Если вы не знакомы с некоторой конструкцией JavaScript-синтаксиса, на MDN и javascript.info есть отличные справочные материалы.
Для запуска проекта используйте следующую команду. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
npm start
Резюме
Поздравляем! Вы завершили практическое занятие по созданию и вложению компонентов. Вы можете выполнить больше практических заданий в LabEx, чтобы улучшить свои навыки.