React JS Props ile CSS Uygulama

React JS, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. React, sanal bir DOM (Document Object Model) üzerinde çalışarak, web uygulamalarını daha hızlı ve daha yüksek performanslı hale getirir. Ayrıca, React sayesinde UI (User Interface) bileşenleri kolayca yeniden kullanılabilir ve modüler hale getirilebilir.

React uygulamaları, bileşenler adı verilen modüllerden oluşur. Bileşenler arasında veri ve fonksiyonların paylaşımı, props (properties) adı verilen bir yöntemle gerçekleştirilir. Props, bir bileşenden diğerine veri aktarmak için kullanılır.

Bu tutorialda, React props kullanarak CSS uygulama örneği yapacağız.

Adım 1: Uygulama Kurulumu

React uygulamamızı oluşturmak için, öncelikle Node.js ve NPM kurulu olmalıdır. Node.js ve NPM, ayrı ayrı yüklenir. Bunları indirmek için https://nodejs.org/en/ adresine gidiniz.

Node.js yükledikten sonra, command prompt'a aşağıdaki komutu yazarak React uygulama şablonunu indirebilirsiniz:

npx create-react-app react-css-uygulama

Bu komut, react-css-uygulama adında bir klasör oluşturur ve içine React uygulama şablonunu indirir.

Uygulama şablonunu indirdikten sonra, uygulama klasörüne gidip, uygulamayı başlatabiliriz:

cd react-css-uygulama
npm start

Tarayıcınızda http://localhost:3000/ adresine giderek uygulamayı görüntüleyebilirsiniz.

Adım 2: Bileşen Oluşturma

Uygulamamızın bileşenlerini oluşturmak için, src klasörü altında components adında bir klasör oluşturun:

mkdir src/components

Daha sonra, src/components klasörü altında, App.js adında bir dosya oluşturun:

touch src/components/App.js

App.js dosyasındaki bileşenimizi şu şekilde oluşturalım:

import React from 'react';

function App() {
  return (
    <div>
      <h1>CSS Uygulama</h1>
    </div>
  );
}

export default App;

Bu bileşen sadece bir div içinde "CSS Uygulama" başlığını gösterir.

Adım 3: Props Kullanımı

Bir bileşenden diğerine veri aktarmak için, props kullanılır. Props, component içinde bir değişken gibi kullanılır ve bileşenin çağrısında iletilir.

Bileşenimizde, props kullanarak bir alt bileşene bir mesaj aktaracağız. Bileşenimiz, şu şekilde güncellenecektir:

import React from 'react';

function AltBilesen(props) {
  return (
    <div>
      <p>{props.mesaj}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>CSS Uygulama</h1>
      <AltBilesen mesaj="Bu bir mesajdır." />
    </div>
  );
}

export default App;

Bileşenimiz, AltBilesen adında bir bileşen oluşturur ve ona mesaj adında bir props iletilir. AltBilesen bileşeninde, props'daki mesaj değeri görüntülenir. App bileşeninde, AltBilesen bileşeni çağrılır ve props'da "Bu bir mesajdır." değeri iletilir.

Adım 4: CSS Eklemek

React JS, dinamik olarak stil eklemeyi mümkün kılar. Bileşenlere stil eklemek için, React'ta birçok yöntem vardır, ancak en yaygın yöntem, bileşenin içinde**