JavaScript ile React.js Temelleri

Adı : JavaScript ile React.js Temelleri

React.js, JavaScript tabanlı bir kütüphanedir. Bu kütüphane, kullanıcı arayüzü oluşturmak için geliştirilmiş ve Facebook tarafından açık kaynaklı olarak sunulmuştur. React.js web sayfalarını, mobil uygulamaları ve hatta masaüstü uygulamalarını geliştirmek için kullanılabilir. Bu yazıda, React.js hakkında temel bilgilere değineceğiz.
React.js'in Temelleri
React.js, bir kullanıcı arayüzünün temel taşlarını \"component\" denilen birimler halinde oluşturur. Bu nedenle, bir React uygulaması, bir seri bileşen tarafından oluşturulur. Bileşenler, birbirleriyle etkileşim kurarak bir kullanıcı arayüzü oluşturur.
React, bileşenlerin daha yeniden kullanılabilir olmasını sağlar. Bu sayede, geliştiriciler aynı bileşeni farklı yerlerde kullanarak farklı işlevler için yeniden kullanabilirler. Bu durum, kodun tekrar yazılmasını önler ve geliştirme sürecini hızlandırır.
React.js, sanal DOM (Document Object Model) mimarisine dayanmaktadır. Bu mimari, bir uygulamanın hızını arttırır çünkü sadece değiştirilen bileşenleri güncelleyerek sayfanın tamamını yeniden çizmek yerine sadece değişen kısımları günceller.
React.js, JSX adı verilen bir söz dizimi kullanır. Bu söz dizimi, JavaScript'de HTML'ye benzer bir yazım şeklidir. Bu sayede, geliştiriciler HTML’i React bileşenleri içinde kullanabilirler. Bu, geliştirme sürecini kolaylaştırır ve kod okunabilirliğini arttırır.
React.js Örnekleri
1. Button bileşeni oluşturma
React.js kullanarak bir düğme bileşeni oluşturabiliriz. Aşağıdaki örnek, bir \"tıkla\" düğmesi oluşturur ve düğmeye tıklandığında bir bildirim gösterir.
```
import React from 'react';
function Button() {
function handleClick() {
alert('Tıklandı');
}
return (

Tıkla

);
}
export default Button;
```
2. Form bileşeni oluşturma
React.js ile bir form bileşeni oluşturmak da kolaydır. Aşağıdaki örnek, bir ad, soyad ve e-posta alanından oluşan bir formu gösterir ve form gönderildiğinde bir bildirim gösterir.
```
import React, { useState } from 'react';
function Form() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
function handleSubmit(e) {
e.preventDefault();
alert(`Gönderildi: ${firstName} ${lastName} ${email}`);
}
return (

Ad:
type=\"text\"
value={firstName}
onChange={e => setFirstName(e.target.value)}
/>

Soyad:
type=\"text\"
value={lastName}
onChange={e => setLastName(e.target.value)}
/>

E-posta:
type=\"email\"
value={email}
onChange={e => setEmail(e.target.value)}
/>

Gönder

);
}
export default Form;
```
3. Tablo bileşeni oluşturma
React.js kullanarak bir tablo bileşeni de oluşturabiliriz. Aşağıdaki örnek, ad, soyad ve e-posta adresleri içeren bir tabloyu oluşturur.
```
import React from 'react';
function Table(props) {
return (









{props.users.map((user, index) => (





))}

Ad	Soyad	E-posta
{user.firstName}	{user.lastName}	{user.email}

);
}
export default Table;
```
Sık Sorulan Sorular
1. React.js ne amaçla kullanılır?
React.js, kullanıcı arayüzlerini oluşturmak için kullanılır. Web sayfaları, mobil uygulamalar ve masaüstü uygulamaları gibi farklı platformlar için kullanılabilir.
2. JSX nedir?
JSX, JavaScript'te HTML'ye benzer bir söz dizimidir. Bu sayede, React bileşenleri içinde HTML kullanılabilir. Bu şekilde, geliştirme sürecini kolaylaştırır ve kod okunabilirliğini arttırır.
3. React.js'te bileşenlerin avantajı nedir?
React.js'te bileşenler yeniden kullanılabilir olduğu için, kodun tekrar yazılmasını önler ve geliştirme sürecini hızlandırır.
4. Sanal DOM nedir?
Sanal DOM, bir uygulamanın hızını artırır. Bu nedenle, React.js değiştirilen bileşenleri güncelleyerek sayfanın tamamını yeniden çizmek yerine sadece değişen kısımları günceller.
5. React.js projesi nasıl başlatılır?
React.js projesi, create-react-app gibi bir araçla başlatılabilir. Bu araç, bir boş React projesi oluşturur ve gerekli dosyaları yükler.