Mala Anlatır Gibi React — 2: Temeller

Temelleri aslında ilk yazı da anlatmam gerekirdi, fakat pek önemli görmedim. Diğer yazı daha çok, React’ın yapısını anlamış ama hooks’ları anlayamamış kişilereydi. Ama fakat, diğer ufak-tefek şeylere de değinmek gerektiğini düşündüm.

Projeyi ayağa kaldırmak

Projenin bağımlılıklarını yüklemek: npm i

Projeyi çalıştırmak: npm run dev

import ve from

import ve from, genellikle bir dosyayı veyahût kütüphaneyi dahil ederken kullanılır.

Meselâ, React içinde react kütüphanesini kullanacağımız vâkit:

import {useState} from ‘react’

kullanacağız. Burada import {} ile aldığımız şey, kütüphane içindeki fonksiyonlardır. from ise nereden olarak diye tanımlayabiliriz.

şöyle de alabilirdik:

import React from ‘react’

fakat kullanımı şöyle olurdu:

React.useState()

bu yüzden {} içerisiden almak mantıklı olacaktır.

import ve from: Bir React dosyası dahil etmek

bir React dosyası dahil etmek istediğiniz de ise aynı görevi görecektir. Fakat farklılık şudur: {} ile alabilmeniz için yarattığınız dosyayı ne tür çıkartığınıza bağlıdır.

Bunu az sonra göreceğiz. Fakat bir component yarattığınız da meselâ menü component’ı (Navbar.js & veyahût .jsx) bunu dahil etmek için import Navbar from ‘./Navbar’

Peki ya “./” nedir? Ve neden sonuna “.js” gelmedi?

“./” dizini belirtiyoruz. Yani bu dizin diyoruz. Eğer bir klasör içerisinde olsaydı, şöyle olacaktı: “./components/Navbar”

.js gelmemesinin sebebi ise, .js direkt kendi algılıyor zâten.

Neyse export konusuna gelelim.

CSS’i dahil etmek

Bir CSS dosyanız var diyelim, bunu da aynı şekil de import edeceksiniz fakat. import “./style.css” diye etmeniz gerek.

export

Bir component yaratıp, import edeceğiniz vâkit o dosyayı önce export etmeniz lâzım.

export function ile export ederseniz eğer {} ile alabilirsiniz. Fakat export default ile export ederseniz direkt dosyayı alıp kullanabilirsiniz.

fragment

Boş bir tag döndürüyor. Genel de şöyle kullanılır: <> </> Ya da import {Fragment} from ‘react’ ile de kullanılabilir.

Avantajları, boş bir tag. Bir şey dönmüyor. Fragment ise bir key verirken genellikle kullanıyoruz. Aslında <></> bu ve <Fragment></Fragment> aynı şey.