B. szybki TS - React 4

Idziemy dalej, bo jeszcze sporo przed nami, aby się przebić do ciekawych rzeczy. Zbieramy do kupy wiedzę z Reacta i TSa robiąc na razie proste ćwiczenia, ale łączymy React + TS. Do dzieła!

Ok, poprzednio napisaliśmy sobie self-closing (obowiązkowo) komponent, z domyślnym propsem stringowym i niczym więcej:

import { ReactElement } from "react"

type HeadingProps = { title?: string };

const Heading= ({ title = 'default title' } : HeadingProps): ReactElement => {
    return <h1>{title}</h1>
}

//(parameter) title: string

export default Heading;

Teraz napiszemy sobie komponent, który obowiązkowo przyjmuje tytuł i obowiązkowo przyjmuje dzieci. Najpierw piszemy propsy:

type SectionProps = { 
    title: string, 
    children: JSX.Element 
};

Children będą typu JSX.Element. Ok, teraz dekompozycja propsów z anotacją i export:

const Section = ({ title, children} : SectionProps ) => {
    return (
        <>
    <h1>{title}</h1>
    {children}
    </>
)
}

export default Section;

To jest mega prosty React i bardzo prosty TypeScript. Jedyna warstwa trudności to to, że mamy tutaj jedno z drugim. Ok, użyjmy teraz tego w App.tsx.

Pamiętajmy o imporcie, użyjmy go sobie:

<Section title="My Section">
   <p>Bla bla bla</p>
</Section>

Tak jak to mamy, to nie przejdzie ani bez dziecka ani bez tytułu. Z drugiej strony, aby mieć kilka dzieci, musimy użyć fragmentu:

<Section title="My Section">
  <>
     <p>Bla bla bla</p>
     <p>Bla bla bla</p>
     <p>Bla bla bla</p>
  </>
</Section>

Ok, działa. Więcej TSowego Reacta już niedługo!

B. szybki TS – React 4