Создание и вложение компонентов
Виртуальная машина уже содержит проект 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
