react-app-with-notes-and-cheatsheet: A JavaScript repository from Didar83

React

vscode: add extension "Prettier". In settings type "formatter" and change "Editor: Default Formatter" to "Prettier".

Создать компонент - CostItem.js, внутри создаем функцию "CostItem()" и экспортируем ее - "export default CostItem;"

Добавляем css-стили - 'import "./CostItem.css"'. Теперь с помощью className добавляем стили к элементам: import "./CostItem.css"

function CostItem() { return (

2022/03/01

Fridge

$999.99

) }

export default CostItem;

{} - в реакте внутри фигурных скобок можно поместить js-выражение или переменную.

function CostItem() { const costDate = new Date(2021, 2, 12); const costDescription = "Refridgarator"; const costAmount = 999.99; return (

{costDate}

{costDescription}

{2 + 3}

// = 5

${costAmount}

) } export default CostItem;

Передача значений в компонент с помощью props: В App.js при создании экземпляра компонента передаем туда параметры: import CostItem from "./components/CostItem";

function App() { const costs = [ { date: new Date(2021, 2, 12), description: "Refrigerator", amount: 999.95 } ];

return (

); }

export default App;

Далее в CostItem можем ссылаться на эти параметры и отображать их значения в компоненте: function CostItem(props) { // props - указывает на то что мы будем использовать параметры return (

{props.date.toISOString()}

// props.date - это ссылка на значение date переменной costs

{props.description}

// props.description - это ссылка на значение description переменной costs

${props.amount}

// props.amount - это ссылка на значение amount переменной costs

) }

Теперь инкапсулируем дату в отдельном компоненте CostDate: function CostDate(props){ const month = props.date.toLocaleString('ru-RU', {month: "long"}); const year = props.date.getFullYear(); const day = props.date.toLocaleString('ru-RU', {day: "2-digit"});

return (
    <div>
        <div>{month}</div>
        <div>{year}</div>
        <div>{day}</div>
    </div>
);

}

export default CostDate;

В CostItem теперь ссылаемся на CostDate и передаем ему параметры через props: ... import CostDate from "./CostDate";

function CostItem(props) { ... // передаем параметры Т.о. мы передаем дату в компнент CostDate через компнент CostItem из компонента App.js.

Еще один пример по props: В App.js создаем тег и передаем ему параметр costs, в который ложим массив costArray. Теперь в компоненте Costs через props мы можем обращатся к элементам массива costArray так: props.costs[0].description

Композиция props.children Создадим компонент Card, который будет инкапсулировать закругление и тень (свойства css): function Card(props){ // передаем параметры const classes = 'card ' + props.className; // создаем список css-файлов с помощью props.className return

{props.children}

//для вставки свойств внутрь компонента Card нужно использовать {props.children} }

function App() то же самое со стречоной функцией: const App = () => {}

Didar83/react-app-with-notes-and-cheatsheet

Fridge

{costDescription}

{props.description}