component-steps.md

Компонент по шагам

Предположим, компонент будет называться LikeButton

---

Создаем файл src/components/LikeButton.jsx

src/
  components/
    LikeButton.jsx

Если придерживаться правила "как компонент называется, с таким же именем создаем файл", будет проще находить нужный файл.

---

Создаем пустой компонент

src/components/LikeButton.jsx

export const LikeButton = () => {
  return ()
}

---

Добавляем разметку

src/components/LikeButton.jsx

export const LikeButton = () => {
  return (
    <div>
      <button>Press me</button>
    </div>
  )
}

---

Добавляем параметры и используем их

src/components/LikeButton.jsx

export const LikeButton = ({
  text = "Press me",
  onClick = () => null,
}) => {
  return (
    <div>
      <button onClick={ onClick }>{ text }</button>
    </div>
  )
}

---

Добавляем стилизацию

src/components/LikeButton.module.css

.wrapper {
  /* свойства кнопки тут */
}

src/components/LikeButton.jsx

import classes from './LikeButton.modules.css'

export const LikeButton = ({
  text = "Press me",
  onClick = () => null,
}) => {
  return (
    <div className={classes.wrapper}>
      <button onClick={ onClick }>{ text }</button>
    </div>
  )
}