React Bileşenleri ve Proje Oluşturma

React UI platformu geliştirmek için kullanılan javascript kütüphanesidir. React kullanabilmek için npm yüklü olması gerekmektedir.

Bununla birlikte kullanacağınız repository’i .npmrc üzerinden değiştirebilirsiniz.

1. Proje Oluşturulması
   

React ile yeni bir proje oluşturmak için komut satırından npm init react-app first-app komutu çalıştırılır. Bu işlem gerekli kütüphaneleri indirdiği için biraz uzun sürebilir.

npm init react-app first-project-name

1. Proje Yapısı

Proje oluşturulduktan sonra Visual Studio Code üzerinden projeyi açıdığında, ilk olarak aşağıdaki şekilde bir yapı görürsünüz.


Node_modules : proje için gerekli olan package’ların bulunduğu folderdır.

Public: içerisinde index.html bulunur ve yapılan geliştirmeler burada render edilir.

Src: Asıl geliştirmelerin yapacağımız folderdır. İçerisinde index.js bulunur bu da app.js içerisine eklenen tüm componentlerin index.html'e dahil olmasını sağlar.


1. Projenin Başlatılması

npm start komutu çalıştırdığınızda default olarak localhost 3000 portu olarak react ekranı karşımıza gelir.

npm start

Resim-1

Yeni paket yükleme

Projede kullanılacak yeni bir paket indirmek için aşağıdaki komut kullanılır.

Npm i paket_ismi –save

Çalıştıktan sonra node_modules folderında bu paketin olduğunu görülür.

REACT BİLEŞENLERİ

Component

React’da yapılan geliştirmelerin her bir parçasına component adı verilir. Bir component 2 farklı şekilde oluşturulabilir. Bunların neler olduğunu söylemeden önce state ve props kavramlarından biraz bahsedelim.

State’ler, componenet içerisinde tutulan değerlere,

Prop’lar ise, componente dışarıdan gelen değerler olarak ifade edilir.

Bunlarla kısa bilgilerle birlikte her iki çomponent çeşidinden bahsedelim,

1. Function Component
2. Class Component

Her iki component methodu da aynı sonuca çıkıyor. Aralarındaki farklardan biraz bahsetmek gerekirse, class componentlerde state’ler kullanılabiliyorken, function componentlerde kullanılamıyordu, bu eksiklik de React Hook ile birlikte çözülmüş oldu. React hook ile artık function componentlerde de state kullanabilir durumda olduk. Bununla birlikte class componenet ve function componentlerin yaşam döngüleri de farklıdır. Bunlar dışında function componentlerde render işlemi otomatik yapılırken, class componentlere render eklenmelidir.

Genel olarak bakıldığında her iki yöntem de kullanılmaktadır, fakat yine de function componentlerin class componentlere göre daha performanslı söylemlerini bilmek gerekir. Bunlar dışında her iki yapı için de bir diğer ortak özellik component isimlerinin büyük harfle başlamasıdır.

UYGULAMA

Component oluşturma

En temel class component yapısı aşağıdaki gibidir,

İlk olarak react ve class component’i extends etmek için Component dahil edilir,

Daha önce söylediğimiz class componentlerde render işlemi yapılır ve return değerindeki div tagleri arasında elementler dahil edilir.

Son olarak da export default ile de bundan dönen sonuç diğer componentlerde kullanılmak üzere export edilir.

Burada da dikkat edileceği gibi component ismi büyük harflerle yazıldı.

ClassComponent.js

import React,{Component} from ‘react’;

class ClassComponent extends Component{ 
   render(){
   return(
                <div>
                        <p>Class Component</p>
                </div>        
);    
}}

export default ClassComponent;

FunctionComponent.js

Burada ise class componentden farklı olarak render’ı kullanmadık,

import React from ‘react’;
function FunctionComponent() {
    return (
        <div>
         <p>Function Component</p>
        </div>
    );}
export default FunctionComponent;

Yapılan bu componentleri projeye App.js’e ekleyerek dahil edebiliriz.

İlk olarak hangi component’i kullanmak istiyorsak onu projeye import etmeliyiz.

Return içerisinde direkt kendi componentlimizi eklediğimizde değişikliklerimizi görebiliriz.

App.js

import React from ‘react’;
import ‘./App.css’;
import ClassComponent from ‘./ClassComponent’;
import FunctionComponent from ‘./FunctionComponent;

function App() {
  return (
<div>
        <ClassComponent/>
       <FunctionComponent/>
</div>
  );
}
export default App;
}

VS Code terminalden npm start komutu ile çalıştırdığımızda , yaptığımız değişiklikleri görmüş oluruz.

Bundan sonraki adımlarda, state ve props ile çalışacağız.

Bu konuyla ilgili sorularınızı  alt kısımda bulunan yorumlar alanını kullanarak sorabilirsiniz.

Referanslar        

www.mshowto.org

TAGs: React Bileşenleri ve Proje Oluşturma