Tepki Bileşenleri

Bileşenler, HTML öğelerini döndüren işlevler gibidir.

Tepki Bileşenleri

Bileşenler bağımsız ve yeniden kullanılabilir kod parçalarıdır. JavaScript işlevleriyle aynı amaca hizmet ederler, ancak ayrı ayrı çalışırlar ve HTML döndürürler.

Bileşenler, Sınıf bileşenleri ve İşlev bileşenleri olmak üzere iki türde gelir, bu eğitimde İşlev bileşenlerine odaklanacağız.

İlk Bileşeninizi Oluşturun

Bir React bileşeni oluştururken, bileşenin adı büyük harfle başlamalıdır ZORUNLU .

Sınıf Bileşeni

extends React.ComponentBir sınıf bileşeni deyimi içermelidir . Bu ifade, React.Component için bir miras oluşturur ve bileşeninize React.Component'in işlevlerine erişim sağlar.

Bileşen ayrıca bir render()yöntem gerektirir, bu yöntem HTML döndürür.

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

İşlev Bileşeni

İşte yukarıdakiyle aynı örnek, ancak bunun yerine bir Function bileşeni kullanılarak oluşturuldu.

Bir Function bileşeni de HTML döndürür ve bir Class bileşeniyle hemen hemen aynı şekilde davranır, ancak Function bileşenleri çok daha az kod kullanılarak yazılabilir, anlaşılması daha kolaydır ve bu öğreticide tercih edilecektir.

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

Bileşen Oluşturma

Artık React uygulamanızın, bir öğe döndüren Car adlı bir bileşeni var <h2>.

Bu bileşeni uygulamanızda kullanmak için normal HTML'ye benzer bir sözdizimi kullanın: <Car />

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

sahne

propsBileşenler , özellikleri temsil eden olarak geçirilebilir .

Proplar, fonksiyon argümanları gibidir ve bunları bileşene nitelik olarak gönderirsiniz.

propsBir sonraki bölümde daha fazlasını öğreneceksiniz .

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

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

Bileşenlerdeki Bileşenler

Diğer bileşenlerin içindeki bileşenlere başvurabiliriz:

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'));

Dosyalardaki Bileşenler

React tamamen kodu yeniden kullanmakla ilgilidir ve bileşenlerinizi ayrı dosyalara bölmeniz önerilir.

Bunu yapmak için, dosya uzantısına sahip yeni bir dosya oluşturun .js ve kodu içine koyun:

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

export default Car;

Araba bileşenini kullanabilmek için dosyayı uygulamanıza aktarmanız gerekir.

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>;
}