React — это декларативная, эффективная и гибкая JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».
React имеет несколько разных видов компонентов, но мы начнём с функциональных.
Для начало вам нужно создать свое первое react приложение инструкции по его созданию вы можете найти тут
После того как вы создали и запустили свое приложении у вас должна появиться такая страница
В каталоге src создадим каталог Components в котором файл ShoppingList.jsx в него запишем следующие:
import React from 'react';
const ShoppingList = (props) => {
return (
<div className="shopping-list">
<h1>Список покупок для {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
export default ShoppingList;
// Пример использования: <ShoppingList name="Марк" />
ShoppingList является примером функционального компонента React. Компонент принимает параметры, которые называются пропсами (props, сокращение от properties — свойства), и возвращает иерархию представлений для отображения.
Передача данных через пропсы
Для начала давайте попробуем передать некоторые данные в компонент ShoppingList.
Настоятельно рекомендуем набирать код самостоятельно, а не копировать его и вставлять. Это упрощает понимание и развивает мышечную память.
В файле app.js запишем данный код:
import ShoppingList from './components/ShoppingList';
const App = (props) => {
return (
<ShoppingList name="Марк" />
); }
export default App;
Мы создали функциональный компонент App и вернули наш дочерний компонент ShoppingList c аргументом name заранее его импортировав.
В итоге мы подставили в конструкцию {props.name} строку "Марк".
Поздравляю! Вы только что «передали пропc» из родительского компонента App в дочерний компонент ShoppingList. Передача пропсов это то, как данные в React-приложениях «перетекают» от родительских компонентов к дочерним.