Reaguj Komponenty

Komponenty są jak funkcje, które zwracają elementy HTML.

Reaguj Komponenty

Komponenty to niezależne i wielokrotnego użytku bity kodu. Służą temu samemu celowi co funkcje JavaScript, ale działają w izolacji i zwracają kod HTML.

Komponenty występują w dwóch typach: Komponenty klasowe i Komponenty funkcyjne, w tym samouczku skoncentrujemy się na komponentach funkcyjnych.

Stwórz swój pierwszy komponent

Podczas tworzenia komponentu React nazwa komponentu MUSI zaczynać się od dużej litery.

Składnik klasy

Składnik klasy musi zawierać extends React.Componentinstrukcję. Ta instrukcja tworzy dziedziczenie po React.Component i daje Twojemu komponentowi dostęp do funkcji React.Component.

Komponent wymaga również render()metody, ta metoda zwraca kod HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Komponent funkcji

Oto ten sam przykład, co powyżej, ale utworzony przy użyciu komponentu Function.

Składnik Function również zwraca kod HTML i zachowuje się podobnie jak składnik Class, ale składniki Function można pisać przy użyciu znacznie mniejszej ilości kodu, są łatwiejsze do zrozumienia i będą preferowane w tym samouczku.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Renderowanie komponentu

Teraz Twoja aplikacja React ma komponent o nazwie Car, który zwraca <h2>element.

Aby użyć tego komponentu w swojej aplikacji, użyj podobnej składni jak normalny HTML: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Rekwizyty

Komponenty mogą być przekazywane jako props, co oznacza właściwości.

Rekwizyty są jak argumenty funkcji i wysyłasz je do komponentu jako atrybuty.

Więcej o tym dowiesz się propsw następnym rozdziale.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Komponenty w Komponentach

Możemy odnosić się do komponentów wewnątrz innych komponentów:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Komponenty w plikach

React polega na ponownym wykorzystaniu kodu i zaleca się podzielenie komponentów na osobne pliki.

Aby to zrobić, utwórz nowy plik z .js rozszerzeniem pliku i umieść w nim kod:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Aby móc korzystać z komponentu Car, musisz zaimportować plik w swojej aplikacji.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}