React.JS Component Kullanımı

Merhabalar,
React.JS ile yeni bir component oluşturma ve bu componentler ile ilgili detayları göreceğiz. Öncelikle yeni bir react projesi oluşturalım. Proje oluştuktan sonra src klasörü içerisindeki tüm dosyaları silelim (Gereksiz dosyalar’ı temizlemek adına) app.js ve index.js isminde iki adet js dosyası oluşturalım. İçerikleri aşağıdaki gibi olacaktır.

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Test</h1>
      </div>
    );
  }
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Daha sonra aşağıdaki kod ile projemizi çalıştıralım. Localhost:3000 adresinde “Test” yazısını görüyorsak doğru yoldayız demektir

npm start

1-İlk Componentimizi oluşturalım

Src klasörü içerisine Header.js isminde yeni bir dosya oluşturalım ve bu dosyanın içeriğide aşağıdaki gibi olsun

Header.js

import React, { Component } from 'react';

export default class Header extends Component {
  render() {
    return (
      <div>
        <h1>Burası Header Alanı</h1> 
      </div>
    );
  }
}

Şuan ilk componentimizi oluşturduk bunu kullanmak içinse app.js dosyasını aşağıdaki şekilde güncelleyelim

import React, { Component } from 'react';
import Header from './Header';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <h1>Test</h1>    
      </div>
    );
  }
}

export default App;

daha sonra komut satırından npm start komutu ile projeyi çalıştırdığınızda aşağıdaki görüntü alıyor olmanız gerekmektedir.

2- Props(Dışarıdan componente veri gönderme)

Bir componentin içerisinde dışarıdan data göndermek  için props özelliğinden faydalanıyoruz

Header.js içerisindeki return () içeriğini aşağıdaki şekilde güncelleyelim.

<div>
   <h1>Burası Header Alanı - {this.props.sitename}</h1> 
</div>

Yukarıda componentin sitename isminde bir props kullandığını görüyoruz. Bu parametreyi dışarıdan vermek içinse app.js içerisindeki

<Header />

kodunu aşağıdaki kod ile değiştiriyoruz

<Header sitename="DerinKod" />

Header componenti içine sitename isminde bir parametre ile veri gönderdik ve daha sonra bu veriyi kullandık.

Bir cevap yazın