alpavlove

import React, { ReactNode } from 'react'
import './Button.css'

export type ButtonProps = {
  onClick(): void
  children: ReactNode
  variant?: 'primary' | 'success'
  isDisabled?: boolean
}

alpavlove

name: Storybook
on:
  push:
    paths: ["stories/**", "src/**"]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected]

alpavlove

useEffect(() => {
  console.log(title)
}, [title]) // Re-run the effect only if title was changed

alpavlove

useEffect(() => {
  // to do smth...

  return () => {
    // to do smth else when a component is unmounted...
  }
})

alpavlove

//componentDidMount and componentDidUpdate. An effect re-runs every render

useEffect(() => {
    // to do smth...
})
  
//componentDidMount. An effect runs only on mount

useEffect(() => {
    // to do smth...

alpavlove

const Component = React.memo(function Component(props) {
 // your code is here...
})

alpavlove

import React, { ReactElement, useState } from "react"
import TabTitle from "./TabTitle"

type Props = {
  children: ReactElement[]
}

const Tabs: React.FC<Props> = ({ children }) => {
  const [selectedTab, setSelectedTab] = useState(0)

alpavlove

import React from "react"

type Props = {
  title: string
  index: number
  setSelectedTab: (index: number) => void
}

const TabTitle: React.FC<Props> = ({ title, setSelectedTab, index }) => {

alpavlove

import React from "react"
import Tabs from "../Tabs"
import Tab from "../Tabs/Tab"

function App() {
  return (
    <Tabs>
      <Tab title="Lemon">Lemon is yellow</Tab>
      <Tab title="Strawberry">Strawberry is red</Tab>
      <Tab title="Pear">Pear is green</Tab>

alpavlove

import React from "react"

type Props = {
  title: string
}

const TabTitle: React.FC<Props> = ({ title}) => {

  return (
    <li>