React: Komponenty podstawy

Jak stworzyć własny komponent?

Żeby stworzyć własny komponent, wystarczy napisać:

function Header() {
	return <h2>Some header</h2>
}

Jak widać, użyliśmy tutaj zwykłej funkcji i to wystarczy. Komponenty w React można stworzyć za pomocą funkcji i klas. W tym wpisie przedstawiamy przykłady komponentów stworzonych za pomocą funkcji.

Żeby go użyć, piszemy:

function App() {
	return (
		<div>
			<Header />
		</div>
	);
}

We fragmentach kodu korzystamy z JSX

Jak wyświetlić dane w komponencie?

Jeśli chcemy wyświetlić jakieś dane w komponencie, musimy użyć nawiasów klamrowych: { }

function Header() {
    const title = 'Some header';
    return <h2>{title}</h2>
}

Jak przekazać dane do komponentu?

Żeby przekazać dane do komponentu, korzystamy z obiektu, który nazywa się: props:

function Header(props) {
    return <h2>{props.title}</h2>
}

albo krócej:

function Header({ title }) {
    return <h2>{title}</h2>
}

Następnie:

function App() {
	return (
		<div>
			<Header title="My header" />
		</div>
	);
}

Jeśli wartość, którą chcemy przekazać, przechowujemy w zmiennej, to musimy użyć nawiasów klamrowych:

function App() {
    const myHeader = 'My header';

    return (
        <div>
            <Header title={myHeader} />
        </div>
    );
}