Blog

React ile Temel Başlangıç

React ile Temel Başlangıç: Merhaba Dünya Uygulaması

React ile temel başlangıç

React ile temel başlangıç konusuyla karşınızdayız !

React Nedir?

React, Facebook tarafından geliştirilen, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Kullanıcı arayüzlerini bileşenlere ayırarak daha kolay ve hızlı bir şekilde geliştirmenizi sağlar.

Bu Yazıda Neler Yapacağız?

Bu yazıda, React ile ilk uygulamanızı nasıl oluşturacağınızı adım adım inceleyeceğiz. Basit bir “Merhaba Dünya” uygulaması ile başlayarak React’in temel kavramlarını ve çalışma prensiplerini öğreneceksiniz.

Gerekli Araçlar:

Adım 1: Proje Oluşturma

  1. Terminalinizi açın ve yeni bir proje klasörü oluşturmak için aşağıdaki komutu çalıştırın:
mkdir my-app
cd my-app
  1. Projenize React ve diğer gerekli kütüphaneleri kurmak için aşağıdaki komutu çalıştırın:
yarn create react-app .
  1. Bu komut, projeniz içinde node_modules klasörünü ve package.json dosyasını oluşturacaktır.

Adım 2: Uygulama Kodları

  1. src klasörü altında App.js dosyasını açın. Bu dosya, uygulamanızın ana bileşenini içerir.
  2. Aşağıdaki kodları App.js dosyasına ekleyin:

JavaScript

import React from 'react';

function App() {
  return (
    <div>
      <h1>Merhaba Dünya!</h1>
    </div>
  );
}

export default App;
  1. Bu kodlar, “Merhaba Dünya!” metnini içeren bir h1 başlığı oluşturur.

Adım 3: Uygulamayı Çalıştırma

  1. Terminalde aşağıdaki komutu çalıştırarak uygulamayı çalıştırın:
yarn start
  1. Tarayıcınızda http://localhost:3000 adresini açın. “Merhaba Dünya!” metnini ekranda görmelisiniz.

Temel Kavramlar:

  • JSX: JavaScript’in XML benzeri bir uzantısıdır. HTML elementlerini ve React bileşenlerini doğrudan JavaScript kodunda yazmanızı sağlar.
  • Bileşenler: React’in temel yapı taşlarıdır. Her bileşen, belirli bir işlevi yerine getiren ve kendi HTML, CSS ve JavaScript koduna sahip bir modüldür.
  • Props: Bileşenlere veri göndermek için kullanılır.
  • State: Bileşenin iç durumunu saklamak için kullanılır.

Sonuç:

Bu yazıda, React ile ilk uygulamanızı nasıl oluşturacağınızı adım adım inceledik. Basit bir “Merhaba Dünya” uygulaması ile React’in temel kavramlarını ve çalışma prensiplerini öğrendiniz.

Serinin Devamı:

Bu blog yazı serisinde, React’in temel ve ileri düzey özelliklerini detaylı bir şekilde inceleyeceğiz.

Ek Kaynaklar:

Bu blog yazı serisinde, React’ın temel özelliklerini ve kullanımını detaylı bir şekilde inceleyeceğiz. Takipte kalın!

Not: Bu yazı sadece basit bir örnektir. Gerçek bir blog uygulaması için daha fazla özellik ve işlev eklemeniz gerekir.

Takipte kalarak React ile uygulama geliştirmenin keyfini çıkarabilirsiniz!

Bir yanıt yazın