React

us.content https://react.dev/learn Расширение для Хром установить React Dev Tools https://react-icons.github.io/react-icons/icons/lu/ Btn.props.ts: import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react' export interface BtnProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> { children: ReactNode, color?: 'black' | 'white' } Btn.module.sass: @use '../../../sass/config' as config .btn text-transform: uppercase &.black background-color: config.$black color: config.$white &:hover background-color: config.$white color: config.$black &.white &:hover background-color: config.$black color: config.$white Btn.tsx: import {BtnProps} from './Btn.props' import styles from './Btn.module.sass' import cn from 'classnames' export const Btn = ({ children, color = 'black', className, ...props }: BtnProps) => { const classes = cn(className, styles.btn, styles[color]) return ( <button className={classes} {...props} > { children } </button> ) } Указывает, что компонент фронтовый 'use client' Hooks useState - состояние компонента useEffect - подпись на изменения компонента useContext - модифицировать глобавльный контекст Counter.tsx: 'use client' import React, { useState, useEffect } from 'react'; export const Counter = () => { // useState const [counter, setCounter] = useState<number>(0); // useEffect должен вызываться на верхнем уровне, ни в какие условия не кладём useEffect(() => { // Сработает при загрузке или обновлении компонента console.log('counter ' + counter) return () => { // Сработает при размонтировании console.log('unmounting') } // Подписываемся на изменения counter }, [counter]) // По клику увеличиваем counter return ( <section> <button onClick={ () => setCounter(i => i + 1) }>Click me</button> <p>{ counter }</p> </section> ) }