React Başlangıç

Bu yazıda öğreneceklerinizin bir listesi;

  • React Nedir?
  • React’i Neden Tercih Etmeliyim?
  • React JSX Nedir?
  • React İle Proje Nasıl Oluşturulur?
  • React Nasıl Kullanılır?
  • React Component(Bileşen) Nedir ve Nasıl Kullanılır?

Bu yazıda her içeriği başlıklara ayırdık ve bu sayede aklınız karışmadan kolay bir şekilde öğrenebileceksiniz.

React Nedir?

React, günümüzde en popüler olan JavaScript kütüphanesidir. Facebook tarafından kodlandı ve her geçen gün yeni güncellemelerle karşımıza çıkmaktadır.

Öncelikle “React ile neler yapılabilir ve kimler kullanıyor” sorusuna cevap vereyim.

React ile neler yapılabilir?

React ile web sitelerinin ön uçlarını kodlayabilirsiniz.

React’i kimler kullanıyor?

Facebook, Instagram, Airbnb ve daha fazla web sitenin yapımında kullanılmıştır.

React’i Neden Tercih Etmeliyim?

React ile kod yazarken eğlenirsiniz ve hızlı bir şekilde web siteleri yapabilirsiniz. Componentler ile web sitenizi bölümlere ayırır ve kodlar tamamıyla anlaşılır olur. Yazdığınız kodları tekrar etmeyi önler. State ile yapılan değişiklik hemen web siteden de güncellenir. Sayfalar arası geçiş yaparken site yeniden yüklenmez böylece projeleriniz daha performanslı ve daha hızlı çalışır.

Yukarıda anlattığımı pek anlamamış olabilirsiniz bunları yazının devamında kodlar ile çok rahat anlayacaksınız.

Örnek verecek olursak bir iletişim formu olduğunu düşünün. Sitenizde her sayfaya iletişim formunun html ve js kodlarını eklediğinizi düşünelim. Bir yenilikte tüm sayfalarda yeniden düzenlemek ve yeniden kodlarını yazmak zorunda kalacaksınız. React ile bunun önüne kolayca geçebilirsiniz.

React JSX Nedir?

Normalde HTML içerisinde JavaScript yazarsınız. React kullandığınızda JavaScript içerisinde HTML yazıyorsunuz. Bunu kodlarla örneklendirelim mi?

Aşağıdaki 2 kodunda çıktısı aynı olacaktır. 1. örnekte sıradan HTML ile yazılmışken 2. örnekte JS içerisinde HTML yazılmış.

<html>

<body>
  <div>
    <h1>Hello App</h1>
  </div>
</body>

</html>
import React from "react";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello App</h1>
      </div>
    );
  }
}

React İle Proje Nasıl Oluşturulur?

Bu kısımda proje oluşturmayı ve içerisindeki dosyaların ne işe yaradığını öğreneceksiniz.

React’i web sitenize script etiketleri ile ekleyebilir veya CLI(komut satırı) kullanarak proje oluşturabilirsiniz.

Eğer var olan web sitenize script etiketi ile eklemek isterseniz React’in kendi eğitimine uğrayın. https://tr.reactjs.org/docs/add-react-to-a-website.html

Burada sadece CLI ile nasıl oluşturacağınızı anlatacağım, çünkü başlangıçta neyin ne olduğunu anlamalısınız. Projenizi oluşturmak istediğiniz yerde komut satırınızı başlatın ve komut satırına aşağıdaki komutu yazın.

Komut satırını başlatmayı bilmiyorsanız: Bulunduğunuz klasöre shift basılı tutarak sağ tıklayın ve PowerShell penceresini açın ve aşağıdaki kodları gerçekleştirin

npx yazım hatası değildir. npm 5.2+ versiyonuyla beraber gelmektedir.

npx create-react-app my-app

İndirmelerin tamamlanmasını bekleyin. İşlem tamamlandığında en aşağıda Happy Hacking yazısını göreceksiniz ve aşağıdakileri sırayla komut satırına girmelisiniz.

cd my-app
npm start

Bu işlemleri gerçekleştirdiğinizde projeniz kurulmuş ve başlatılmış olacaktır. Sizin için bir sekme açacaktır ve yaptığınız değişikler sitede anında yenilenecektir.

React Nasıl Kullanılır?

Projeyi kurduğunuzda fazla sayıda dosya olabilir fakat bunların bir kaç tanesini kullanacaksınız.

Aşağıdaki listede klasörlerin ne işe yaradıklarını öğrenin.

  1. public

    Web sitenizde kullanacağınız ve web sitenize giren herkesin bunlara erişebileceği klasördür. Burada resimlerinizi, videolarınızı, yazı tiplerinizi ve daha fazlasını barındırabilirsiniz.

  2. src

    Burada projenizin kaynak kodlarını barındırabilirsiniz.

Aslında detaylı bir klasör yapısı mevcut fakat ben burada yeni başlayanlar için klasörlerin ne işe yaradığını kısaca özet geçtim.

Ziyaretçi siteye girdiğinde public/index.html çalışır ve src/App.js çağrılır. Yani sizin aslında başlangıçta ilgileneceğiniz 2 adet dosya var. index.html’i dosyasını meta ve cdn için kullanın. Onun dışında sizin ilgileneceğiniz dosya App.js. Projenizin tüm her şeyi App.js’den geçer.

App.js’i açalım ve karşınıza gelen kısımda biraz düzenleme yapalım.

NOT: return() içerisinde en az 1 etiket olmalı ve 1 etiket içerisinde her şeyi yapmalısınız. Zaten kodlarınızı yazarken hata yaptığınızda React size hatanızı gösterir. Şimdi neyden bahsettiğimi açıklayayım. Normalde HTML yazıyordunuz ve aşağıdaki gibi kullanım yapıyordunuz.

  <div>
    <h1>Menü</h1>
  </div>
  <div>
    <h1>İçerik</h1>
  </div>

Fakat React’te yani JSX’de böyle bir şey yapamazsınız. Peki nasıl yapacaksınız? Bunun için aşağıdaki örneği inceleyin.


return (
    <div>
      <div>
        <h1>Menü</h1>
      </div>
      <div>
        <h1>İçerik</h1>
      </div>
    </div>
);

Şimdi daha iyi anladığınızı düşünüyorum.

React Component Nedir ve Nasıl Kullanılır?

Component’in Türkçesi bileşen olarak geçmektedir. React’in asıl amacı her şeyi componentlere ayırmasıdır. Componentler kodları tekrar yazmanızı önler ve daha okunaklı kodlar yazmanızı sağlar.

Aşağıda 2 kullanım örneği verilmiştir. Bu kullanımlarından ilki HTML diğeri React JSX’dir. Anlayabilmeniz için kısa kod örneği verilmiştir fakat uzun kod olduğunda çok faydasını göreceksiniz.

Aşağıdaki kodu HTML ile yazsaydınız böyle yazardınız.

 <div>
    <h1>Menü</h1>
  </div>
  <div>
    <h1>İçerik</h1>
  </div>

Eğer React JSX ve component yoluyla yapmak isteseydiniz aşağıdaki yolu izlerdiniz.

src klasörü içerisine components klasörü oluşturun ve MenuComponent.js adında bir js dosyası oluşturun.

Daha sonrasında MenuComponent.js dosyasını açın ve içerisine aşağıdaki kodları yazın.

function MenuComponent() {
  return (
    <div>
      <h1>Menü</h1>
    </div>
  );
}

export default MenuComponent;

Şimdi ise src/App.js ile MenuComponent dosyasını çağıracağız ve içerisinde ki kodları çağırdığımız kısıma ekleyecek.

src/App.js dosyasını açın ve aşağıdaki kodlarla düzenleyin.

import logo from './logo.svg';
import './App.css';
// MenuComponent dosyasını çağırıyoruz
import MenuComponent from './components/MenuComponent';

function App() {
  return (
    <div>
      {/* MenuComponent'i buraya ekle diyoruz */}
      <MenuComponent />
      <div>
        <h1>İçerik</h1>
      </div>
    </div>
  );
}

export default App;

Aslında buraya 2 satır kod ekledik.

import MenuComponent from './components/MenuComponent';

ve

<MenuComponent />

SONUÇ

Umarım React başlangıç eğitim yazısını beğenmişsinizdir. Aslında bu kategori içerisinde eğitim yazıları yazmayı planlıyorum. Bu yazımız başlangıç eğitim yazısıydı.

3.5 4 votes
Puanla
guest
4 Yorum
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
doğukan
doğukan
3 ay önce

siteyi wordpress ile yazarsın ama o site içerisinde reactı anlatırsın güzel hikaye

Veysel
Veysel
7 ay önce

İlk defa bu denli güzel anlaşılır ve okunaklı bir react yazısına denk geldim. Devamının gelmesi dileğiyle.