1 Nedir

ReactJS Ders 1 | React Nedir & Proje Oluşturma

React.js, kullanıcı arayüzü (UI) oluşturmak için kullanılan bir JavaScript kütüphanesidir.

Facebook tarafından geliştirilen React, bileşen tabanlı bir yaklaşım sunar ve verimli bir şekilde dinamik ve etkileşimli web uygulamaları oluşturmayı amaçlar.

React, sanal DOM (Virtual DOM) kullanarak sadece güncellenen bileşenlerin yeniden render edilmesini sağlar, bu da performansı artırır.

React.js’in temel özelliklerinden bazıları şunlardır:

  1. Bileşen Tabanlı Yaklaşım: React, uygulamanızı küçük ve yeniden kullanılabilir bileşenlere ayırmanıza olanak tanır. Bileşenler, kendilerine ait durumları (state) ve özellikleri (props) olan bağımsız yapılardır. Bu sayede, bileşenleri bir araya getirerek karmaşık bir UI oluşturabilirsiniz.
  2. Sanal DOM (Virtual DOM): React, sanal DOM kullanarak performansı optimize eder. Sanal DOM, gerçek DOM ağacının bir kopyasıdır ve React bileşenlerinin durumu değiştiğinde gerçek DOM ağacıyla karşılaştırılır. Yalnızca değişiklikleri içeren kısımlar gerçek DOM’a uygulanır, bu da gereksiz yeniden render işlemlerini minimize eder ve uygulamanın daha hızlı çalışmasını sağlar.
  3. JSX: React, JavaScript kodunun içine HTML benzeri bir sözdizimi olan JSX‘i kullanır. JSX, React bileşenlerini oluşturmayı ve bileşenler arasında veri akışını sağlamayı kolaylaştırır. JSX, aynı zamanda React bileşenlerini okunabilir ve kolayca anlaşılabilir hale getirir.

Birinci ders adımında, React.js ile basit bir fonksiyonel bileşen oluşturarak başlayabilirsiniz.

İşte bir örnek:

1. Adım: Proje Oluşturma İlk adımda, React.js ile çalışmak için bir proje oluşturmanız gerekmektedir. Node.js kurulu olduğundan emin olun ve aşağıdaki komutu bir komut satırında çalıştırarak yeni bir React projesi oluşturun:

npx create-react-app my-app

Bu komut, “my-app” adında yeni bir React projesi oluşturacaktır. Oluşturulan projenin dizinine geçiş yapın:

cd my-app

2. Adım: Fonksiyonel Bileşen Oluşturma İkinci adımda, src klasörü içinde yeni bir dosya oluşturun ve bu dosyaya Example.js adını verin. Ardından, aşağıdaki kodu Example.js dosyasına yapıştırın:

import React from 'react';

const Example = () => {
  return (
    <div>
      <h1>Merhaba, Dünya!</h1>
      <p>Bu bir React fonksiyonel bileşenidir.</p>
    </div>
  );
}

export default Example;

Bu örnekte, Example adında bir fonksiyonel bileşen oluşturduk. Bu bileşen, bir div içinde bir başlık (h1) ve bir paragraf (p) içerir.

3. Adım: Ana Bileşende Kullanma Üçüncü adımda, src klasörü içinde yer alan App.js dosyasını açın ve Example bileşenini ekleyin:

import React from 'react';
import Example from './Example';

const App = () => {
  return (
    <div>
      <h1>React.js Örneği</h1>
      <Example />
    </div>
  );
}

export default App;

Bu örnekte, App adında bir bileşen oluşturduk ve Example bileşenini içine ekledik.

4. Adım: Uygulamayı Başlatma Son adımda, komut satırında aşağıdaki komutu çalıştırarak React uygulamasını başlatın:

npm start

Bu komut, React uygulamanızı yerel sunucuda (localhost) çalıştıracak ve tarayıcınızda görüntülenecektir.

Artık tarayıcınızda React uygulamanızı görebilirsiniz. Uygulama, Example bileşenini içeren bir başlık ve paragraf içeren bir sayfa gösterecektir.

Bu örnek, React.js’deki temel bileşen oluşturma ve kullanma konusunda size bir fikir verecektir. İlerleyen adımlarda, React.js ile daha karmaşık bileşenler oluşturmayı, bileşenler arasında veri akışını yönetmeyi ve daha fazlasını öğreneceksiniz.

İletişim: admin@herseymi.com
Yazı oluşturuldu 110

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön