Yeni Başlayanlar İçin ReactJS Eğitimi

ReactJS nedir?

ReactJS açık kaynaklı bir ön uçtur JavaKullanıcı arayüzleri oluşturmak için betik kütüphanesi. ReactJS Meta (eski adıyla Facebook) ve bireysel geliştiriciler ile şirketlerden oluşan bir topluluk tarafından sürdürülmektedir. Tek sayfa uygulamaları ve mobil uygulamalar oluşturmada yaygın olarak temel olarak kullanılmaktadır. Kullanımı çok kolaydır ve kullanıcıların yeniden kullanılabilir kullanıcı arayüzü bileşenleri oluşturmasına olanak tanır.

İlk React kod satırınızı yazmadan önce, bu kütüphaneyi diğer kütüphanelerden farklı kılan özelliklerin neler olduğunu bilmek faydalı olacaktır. JavaSenaryo. Sonraki bölümde temel özelliklerine değineceğiz.

ReactJS'in Özellikleri

JSX: JSX'in bir uzantısıdır JavaJSX betiği. React'te JSX kullanmak zorunlu olmasa da, iyi özelliklerinden biridir ve kullanımı kolaydır.

Bileşenler: Bileşenler saf gibidir JavaKodlama mantığını yeniden kullanılabilir bağımsız kodlara bölerek kodu kolaylaştırmaya yardımcı olan betik fonksiyonları. Bileşenleri fonksiyonlar ve sınıflar olarak kullanabiliriz. Bileşenlerin ayrıca durum ve özellikleri de vardır, bu da hayatı kolaylaştırır. Bir sınıf bileşeninin içinde durum ve özellikler korunur.

Sanal DOM: React, sanal bir DOM, yani bellekte bir veri yapısı önbelleği oluşturur. Tarayıcının DOM'unda yalnızca son değişiklikler daha sonra güncellenir, bu da hızlı bir şekilde render işlemini sürdürmeyi sağlar.

JavaKomut Dosyası İfadeleri: JSX dosyalarında JS ifadeleri, örneğin {} gibi süslü parantezler kullanılarak kullanılabilir.

ReactJS'in Avantajları

İşte ReactJS kullanmanın önemli avantajları/faydaları:

• ReactJS, bellek içi veri yapısı önbelleğinden yararlanan sanal bir DOM kullanır ve tarayıcının DOM'unda yalnızca son değişiklikler güncellenir. Bu da uygulamayı daha hızlı hale getirir.
• React bileşen özelliğini kullanarak istediğiniz bileşenleri oluşturabilirsiniz. Bileşenler yeniden kullanılabilir ve kod bakımında da faydalıdır.
• ReactJS açık kaynaklı bir projedir. JavaKomut dosyası kütüphanesi olduğundan, kullanımı kolaydır.
• ReactJS kısa sürede çok popüler hale geldi ve Facebook gibi ürünlere güç veriyor. InstagramApple gibi birçok ünlü şirket tarafından kullanılıyor. Netflix, vb.
• Meta, ReactJS kütüphanesinin bakımını üstleniyor, bu nedenle kütüphane iyi bir şekilde korunuyor ve güncel tutuluyor.
• ReactJS, hem masaüstü hem de mobil uygulamalar için zengin kullanıcı arayüzü geliştirmek için kullanılabilir.
• Kodlamanın çoğu burada yapıldığından hata ayıklamak ve test etmek kolaydır JavaSenaryo HTML yerine.

ReactJS'nin dezavantajları

İşte ReactJS kullanmanın dezavantajları/eksiklikleri:

• Kodun büyük kısmı JSX ile yazılmıştır, yani HTML ve CSS bunun bir parçasıdır. JavaKomut dosyası. Çoğu diğer çerçeve "kee"yi tercih ettiğinden, bu oldukça kafa karıştırıcı olabilir.ping HTML'den ayrı JavaKomut dosyası kodu.
• ReactJS'in dosya boyutu nispeten büyüktür.

Avantaj ve dezavantajlarını bildiğinize göre, React'i kurmaya hazırsınız. Bunu denemenin en hızlı yolu, önce ele alacağımız bir CDN üzerinden doğrudan kurulum yapmaktır; gerçek projeler için npm tabanlı kurulumlar daha sonra gelir.

ReactJS'yi CDN'den kullanma

React ile çalışmaya başlamak için öncelikle sayfamıza ReactJS eklememiz gerekiyor. CDN kullanarak ReactJS'i kolayca kullanmaya başlayabilirsiniz. JavaAşağıda gösterildiği gibi komut dosyası dosyaları.

CDN bağlantılarını almak için eski React dokümantasyon sitesine gidin, yani: https://legacy.reactjs.org/docs/cdn-links.htmlAşağıdaki görselde açıklanan gerekli dosyaları alacaksınız.

Geliştirici için

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Ürün için

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

değiştirmek versiyon Hem `react.development.js` hem de `react-dom.development.js` için istediğiniz React sürümünü kullanın. Bu sayfada 16. sürümü kullanıyoruz, bu nedenle aşağıdaki örneklerde herhangi bir değişiklik yapılmayacaktır.

CDN dosyalarını kullanmayı planlıyorsanız, alanlar arası sorunlardan kaçınmak için crossorigin özelliğini koruduğunuzdan emin olun. ReactJS kodu doğrudan tarayıcıda çalıştırılamaz ve düz metin formatına dönüştürmek için Babel kullanılarak derlenmesi gerekir. JavaKomut dosyası tarayıcıda çalıştırılmadan önce.

İşte kullanılabilecek BabelJS betiği:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

İşte CDN dosyaları ve BabelJS betiği kullanılarak yazılmış çalışan bir ReactJS örneği.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Çıktı:

Kodun detaylarına bir sonraki bölümde gireceğiz; burada CDN dosyalarıyla çalışma şekline bakalım. Babel betiğini doğrudan kullanmak iyi bir uygulama değildir ve yeni başlayanlar şimdilik sadece ReactJS öğrenmek için kullanmalıdır. Üretim ortamında, React'i npm paketi kullanarak yüklemeniz gerekecektir.

NPM Paketlerini Kullanma

Node.js'nin kurulu olduğundan emin olun. Kurulu değilse, Node.js için bu eğitime göz atın (https://www.guru99.com/node-js-tutorial.html) kurulum.

Node.js'i kurduktan sonra bir klasör oluşturun. tepkiproj/.

Proje kurulumuna başlamak için komutu çalıştırın npm başlangıcı.

Klasör yapısı şu şekilde olacaktır:

reactproj\
package.json

Şimdi ihtiyacımız olan paketleri kuracağız.

İşte ReactJS için paketlerin listesi. React'i 16. sürüme sabitledik, böylece ReactDOM.render Bu sayfadaki örnekler aynen gösterildiği gibi çalışır:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Komut istemini açın ve reactproj/ klasörünün içinde yukarıdaki komutları çalıştırın.

Bir klasör oluştur src / Tüm JS kodunun yer alacağı yer burası. ReactJS projesinin tüm kodu src/ klasöründe bulunacak. Aşağıda gösterildiği gibi index.js adında bir dosya oluşturun ve react ile react-dom'u içe aktarın.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactJS için temel kodu yazdık. Ayrıntılarını bir sonraki bölümde açıklayacağız. Görüntülemek istediğimiz şey şudur: Merhaba, Guru99 ÖğreticiAynı işlem, "root" kimliğine sahip DOM öğesine de uygulanır. Bu, aşağıda gösterildiği gibi başlangıç ​​dosyası olan index.html dosyasından alınır.

Aşağıda gösterildiği gibi public/ adında bir klasör oluşturun ve içine index.html dosyasını ekleyin.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

`react-scripts` paketi, HTML dosyasını (yani `index.html`) görüntülemek için kodu derlemeyi ve sunucuyu başlatmayı üstlenir. Kodun derlenmesi ve sunucunun başlatılması için `react-scripts`'i kullanacak komutu `package.json` dosyasına aşağıdaki gibi eklemeniz gerekir:

 "scripts": {
    "start": "react-scripts start"
  }

Tüm paketleri kurup yukarıdaki komutu ekledikten sonra son package.json aşağıdaki gibidir:

Paket.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

ReactJS'i test etmeye başlamak için şu komutu çalıştırın:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Tarayıcıyı şu şekilde açacaktır: URL http://localhost:3000/ Aşağıda gösterildiği gibi:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

İşlemi gerçekleştirmek için aynı işlemi kullanacağız. JavaSonraki bölümlerde de betik dosyaları yer alacak. Tüm .js ve .jsx dosyalarınızı src/ klasörüne ekleyin. Dosya yapısı şu şekilde olacaktır:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

İlk React Proje Kurulumunuzu Nasıl Oluşturabilirsiniz?

İşte bu ReactJS eğitiminde ilk React uygulamanıza başlamak için adım adım bir kılavuz.

) 1 Adım Tepki paketlerini içe aktarın.
1. ReactJS ile başlamak için öncelikle reaksiyon paketlerini aşağıdaki gibi içe aktarmamız gerekiyor.

import React from 'react';
import ReactDOM from 'react-dom';

2. Dosyayı src/ klasörüne index.js olarak kaydedin.

) 2 Adım Basit Yazın Code.
Bu eğitimde React JS'de basit bir kod yazacağız ve burada mesajı görüntüleyeceğiz. “Merhaba, Guru99 Eğitim Videosu!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render ekleyecek id'si root olan öğeye <script> etiketini ekleyin. İşte elimizdeki HTML dosyası:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

) 3 Adım Derleyin Code.

Bu React.js Eğitiminin bir sonraki bölümünde, çıktıyı tarayıcıda almak için kodu derlememiz gerekiyor.

İşte klasör yapısı:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

package.json dosyasında son dosyayı derlemek için gerekli komutları aşağıdaki gibi ekledik:

"scripts": {
    "start": "react-scripts start"
  },

Son dosyayı derlemek için aşağıdaki komutu çalıştırın:

npm run start

Yukarıdaki komutu çalıştırdığınızda, dosyalar derlenecek ve herhangi bir hata varsa size bildirilecektir. Her şey yolunda görünüyorsa, tarayıcı açılacak ve sayfa çalıştırılacaktır. http://localhost:3000/

Komut: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

) 4 Adım Çıkışı Kontrol Edin.
MKS URL http://localhost:3000 Kod derlendikten sonra, aşağıda gösterildiği gibi tarayıcıda açılacaktır:

React'i Vite ile Nasıl Kurarsınız (Modern Yaklaşım)

Yukarıdaki react-scripts kurulumu, yıllarca standart başlangıç ​​şablonu olan Create React App'ten (CRA) alınmıştır. React ekibi, Create React App'i Şubat 2025'te resmi olarak kullanımdan kaldırdı, bu nedenle yeni projeler bunun yerine modern bir derleme aracı kullanmalıdır. Günümüzde en popüler seçenek şudur: HayatlarıBu yöntem daha hızlı başlar ve daha küçük derlemeler üretir.

İşte Vite ile sıfırdan bir React projesi oluşturmanın yolu:

) 1 Adım Terminalinizde iskele oluşturma komutunu çalıştırın:

npm create vite@latest my-react-app -- --template react

) 2 Adım Klasöre girin ve bağımlılıkları yükleyin:

cd my-react-app
npm install

) 3 Adım Geliştirme sunucusunu başlatın:

npm run dev

Vite uygulamayı şu adreste sunmaktadır: http://localhost:5173/ Varsayılan olarak bu şekilde çalışır ve bir dosyayı kaydettiğinizde anında yeniden yüklenir.

Bu sayfadaki eski kurulumdan temel farklılıklar:

• Giriş dosyası şudur: src/main.jsx src/index.js yerine.
• En son React sürümünü yükler ve bu sürüm şu yöntemleri kullanır: oluşturmakKök ReactDOM.render yerine.
• index.html dosyası proje kök dizininde yer alır, public/ dizininde değil.
• Yapılar şu şekilde üretilir: npm run build dist/ klasörüne.

Yönlendirme ve sunucu tarafı oluşturma gibi tam yığın ihtiyaçları için React ekibi ayrıca şu çerçeveleri de önermektedir: Next.jsAşağıdaki bölümlerde öğrendiğiniz her şey (JSX, bileşenler, durum ve özellikler) Vite veya Next.js projelerinde olduğu gibi aynı şekilde uygulanır.

JSX nedir?

JSX'in bir uzantısıdır JavaKomut dosyası. HTML ve diğer özellikleri kullanma gücüne sahip olacağınız bir şablon komut dosyasıdır. JavaSenaryoyu birlikte yazalım.

İşte basit bir JSX kodu örneği.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

React'ta neden JSX'e ihtiyacımız var?

Kullanıcı arayüzü için HTML'e ihtiyacımız var ve DOM'daki her öğenin ele alınması gereken olayları, durum değişiklikleri vb. olacaktır.

React söz konusu olduğunda, HTML'den yararlanmamıza olanak tanır ve JavaAynı dosyada yer alan betik, DOM'daki durum değişikliklerini verimli bir şekilde ele alır.

JSX'teki ifadeler

İşte JSX'te ifadelerin nasıl kullanılacağına dair basit bir örnek.

Önceki ReactJS örneklerinde, şöyle bir şey yazmıştık:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Şimdi yukarıdaki koda ifadeler ekleyeceğiz. İfadeler süslü parantezler {} içinde kullanılır ve çalışma zamanında genişletilir. React'teki ifadeler aşağıdaki gibidir: JavaKomut dosyası ifadeleri.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Şimdi aynı işlemi tarayıcıda test edelim.

Yukarıdaki ekran görüntüsünde {display} ifadesinin değiştirilmediğini görebilirsiniz. React, bir ifade .js dosyası içinde kullanıldığında ne yapacağını bilemiyor.

Şimdi değişiklikleri ekleyelim ve aşağıda gösterildiği gibi bir .jsx dosyası oluşturalım:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Gerekli kodu ekledik ve index.js dosyasında test.jsx dosyasını kullanacağız. İstediğimiz şey şu: h1tag index.js içinde kullanılacak değişken, yukarıda gösterildiği gibi test.jsx dosyasına da aktarılıyor.

İşte index.js dosyasındaki değiştirilmiş kod:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

test.jsx dosyasını index.js'de kullanabilmek için öncelikle aşağıdaki gibi içe aktarmamız gerekiyor:

import h1tag from './test.jsx';

Artık h1tag'ı aşağıda gösterildiği gibi ReactDOM.render'da kullanabiliriz:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Tarayıcıda aynısını kontrol ettiğimizde çıktı şu şekildedir:

ReactJS'deki Bileşenler Nelerdir?

Bileşenler saf gibidir JavaKod mantığını yeniden kullanılabilir bağımsız kodlara bölerek kod yazmayı kolaylaştıran komut dosyası işlevleri.

Fonksiyon olarak bileşenler

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

adında bir fonksiyon yarattık. Merhaba Yukarıda gösterildiği gibi bir h1 etiketi döndüren fonksiyon. Fonksiyonun adı, aşağıda gösterildiği gibi bir öğe görevi görür:

const Hello_comp = <Hello />;
export default Hello_comp;

Bileşen Merhaba HTML etiketi olarak kullanılır, yani; kendisine atanan Merhaba_comp Değişken ve aynısı export komutu kullanılarak dışa aktarılıyor.

Şimdi bu bileşeni aşağıdaki gibi index.js dosyasında kullanalım:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

İşte tarayıcıdaki çıktı:

Bileşen Olarak Sınıf

Burada bir sınıfı bileşen olarak kullanan bir ReactJS örneği verilmiştir.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Hello bileşenini index.js dosyasında şu şekilde kullanabiliriz:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

"Hello" bileşeni bir HTML etiketi olarak kullanılır, yani; .

İşte aynı çıktı.

Sınıf Bileşenleri, Fonksiyon Bileşenleri ve Kancalar Arasındaki Fark

Artık bir bileşen yazmanın her iki yolunu da gördünüz, peki hangisini kullanmalısınız? Bu sayfa, durum ve yaşam döngüsü kavramlarını açık hale getirdikleri için sınıf bileşenlerini öğretiyor; bu da yeni başlayanlar için değerlidir ve eski kod tabanlarında hala karşımıza çıkmaktadır. Ancak, React 16.8'in Hooks'u tanıtmasından bu yana, fonksiyon bileşenleri de durum tutabilir ve tüm yeni kodlar için önerilen stildir.

Görünüş	Sınıf Bileşeni	Kancalı Fonksiyonel Bileşen
Eyalet	bu.durum ve bu.durum()	useState() Kancası
Ömrü	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() kancası bu üçünü de kapsar.
Sözdizimi	Daha fazla standart kod parçası (yapıcı fonksiyon, bağlama, this)	Daha kısa, hayır bu anahtar kelime
Durum	Desteklenen, eski tarz	Yeni kod için önerilir.

İşte bu sayfadaki durum örneği, useState Hook'u kullanılarak yeniden yazılmış hali:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Her iki sürüm de aynı çıktıyı üretir. Aşağıdaki bölümlerde kullanılan sınıf sözdizimini öğrenin, ardından her örneği Hook'lara dönüştürmeyi uygulayın.

ReactJS'de Durum nedir?

Bir devlet bir JavaReactJS render işleminde kullanılacak verileri tutan, props'lara benzer bir script nesnesidir. State verileri özel bir nesnedir ve bir sınıf içindeki bileşenlerde kullanılır.

Devlet Örneği

İşte bir sınıf içinde durum (state) kullanımının nasıl gerçekleştirileceğine dair çalışan bir örnek.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Tarayıcıda test ettiğimizde şunu elde ederiz:

ReactJS'deki Props'lar nelerdir?

Prop'lar, bir bileşen içinde kullanılacak özelliklerdir. Bileşen içinde kullanılabilen global nesneler veya değişkenler gibi davranırlar.

İşlev Bileşenine Yönelik Destekler

Burada bir fonksiyon bileşenine prop aktarmanın bir örneği verilmiştir.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Yukarıda gösterildiği gibi, şunları ekledik: msg niteliği bileşen. Aynısına şu şekilde erişilebilir: destekler Hello fonksiyonunun içinde, şu içeriğe sahip olacak bir nesne bulunur: msg öznitelik ayrıntıları ve aynı şey bir ifade olarak kullanılır.

Bileşen index.js'de şu şekilde kullanılır:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

İşte tarayıcıdaki çıktı:

Sınıf Bileşenine Yönelik Destekler

Bir sınıftaki özelliklere (props) erişmek için şu şekilde yapabiliriz:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

MKS msg nitelik index.js'deki bileşene şu şekilde aktarılır:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Bu tarayıcıdaki çıktıdır:

Ayrıca Kontrol Edin: - Yeni Başlayanlar İçin AngularJS Eğitimi: AngularJS'yi Adım Adım Öğrenin

Bir Bileşenin Yaşam Döngüsü

Bileşenler, durum ve özellikler ele alındıktan sonra, bir sonraki adım React'in bileşeninizin yöntemlerini ne zaman çağırdığını anlamaktır. Bir bileşenin yaşam döngüsü Başlatma, Bağlama, Güncelleme ve Bağlamayı Kaldırma aşamalarına ayrılır.

İşte her aşamanın ayrıntılı açıklaması.

ReactJS'de bir bileşen aşağıdaki aşamalardan oluşur:

Başlatma: Bu, bileşen yaşam döngüsünün ilk aşamasıdır.

Burada varsayılan donanıma ve başlangıç ​​seviyesindeki duruma sahip olacaktır.

MontajBu aşamada, bileşen DOM içinde oluşturulur. Montaj durumunda aşağıdaki yöntemlere erişimimiz vardır:

• render(): Oluşturulan tüm bileşenler için bu yönteme sahipsiniz. HTML düğümünü döndürür.
• componentDidMount(): Bu yöntem, bileşen DOM'a eklendikten hemen sonra çağrılır.

GüncelleBu durumda, kullanıcı DOM ile etkileşime girer ve DOM güncellenir. Örneğin, metin kutusuna bir şey girersiniz, böylece durum özellikleri güncellenir.

Güncelleme durumunda kullanılabilen yöntemler şunlardır:

• shouldComponentUpdate(): Yeniden render edilmeden önce çağrılır; bileşenin güncellenip güncellenmeyeceğine karar vermenizi sağlar. True döndürmek bileşeni yeniden render eder.
• componentDidUpdate(): Bileşen güncellendikten sonra çağrılır.

Bağlantıyı Kaldırma: Bu durum, bileşenin gerekli olmadığı veya çıkarıldığı durumlarda ortaya çıkar.

Bağlantı kesme durumunda kullanılabilen yöntem aşağıdadır:

• componentWillUnmount(): Bileşen kaldırılmadan veya yok edilmeden hemen önce çağrılır.

Yaşam Döngüsü Yöntemlerinin Çalışma Örneği

İşte her aşamada çağrılan yöntemleri gösteren çalışan bir örnek.

Örnek: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Tarayıcıda çıktıyı kontrol ettiğinizde:

Tarayıcı konsolunda şunları görürsünüz:

Kullanıcı metin kutusuna şunu girdiğinde:

Konsolda aşağıdaki mesajlar görüntülenir:

Artık bir bileşenin ne zaman oluşturulduğunu ve güncellendiğini bildiğinize göre, durum ve olayları pratik bir kullanım örneğine uygulayalım: formlar aracılığıyla kullanıcı girdisini işlemek.

Formlarla Çalışmak

ReactJS'de HTML giriş öğeleri gibi , <select> ve <select /> etiketlerinin kendi durumları vardır ve kullanıcı etkileşimde bulunduğunda setState() yöntemi kullanılarak güncellenmeleri gerekir.

Bu bölümde, ReactJS'de formlarla nasıl çalışılacağını göreceğiz.

İşte çalışan bir örnek:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Giriş alanları için durumu korumamız gerekiyor, bu nedenle React bunun için özel bir yöntem sunuyor. setStateBu, bir değişiklik olduğunda durumun korunmasına yardımcı olur. Gerçek bir uygulamada, ayrıca şunu da çağırın: event.preventDefault() FormSubmit içinde, gönderim işleminde tarayıcının sayfayı yeniden yüklemesini engellemek için bir kod parçası bulunur.

Metin kutusu ve gönder düğmesinde onChange ve onClick olaylarını kullandık. Kullanıcı metin kutusuna bir şey yazdığında, onChange olayı çağrılır ve aşağıdaki gibi durum nesnesindeki ad alanı güncellenir:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Tarayıcıdaki çıktı aşağıdaki gibidir:

) 1 Adım Lütfen adınızı metin kutusuna girin:

) 2 Adım Gönder düğmesine tıklayın:

ReactJS'de Etkinliklerle Çalışmak

Formlar, kullanıcı etkileşiminin yalnızca bir kaynağıdır. ReactJS'de olaylarla çalışmak, daha önce yaptığınız gibi aynıdır. JavaKomut dosyası. Burada kullanılan tüm olay işleyicilerini kullanabilirsiniz. JavaKomut dosyası. setState() yöntemi, kullanıcının herhangi bir HTML öğesiyle etkileşime girdiğinde durumu güncellemek için kullanılır.

İşte ReactJS'de olayların nasıl kullanılacağına dair çalışan bir örnek.

olaylar.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Giriş alanları için durumu korumamız gerekiyor, bu nedenle React bunun için şu özellikleri sağlıyor: setState Değişiklik olduğunda durumun korunmasına yardımcı olan yöntem.

Etkinliklerden faydalandık. Biz değiştiririz hem de tıklamada Metin kutusu ve düğme üzerinde. Kullanıcı metin kutusuna bir şey yazdığında, Biz değiştiririz Olay tetiklendiğinde, durum nesnesinin içindeki ad alanı aşağıdaki gibi güncellenir:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

İşte tarayıcıdaki çıktı:

Kullanıcı adını girdiğinde:

Kullanıcı Buraya Tıklayın butonuna tıkladığında:

ReactJS'de Satır İçi CSS ile Çalışmak

Bileşenleriniz veri ve olayları işledikten sonra, son adım onları biçimlendirmektir. ReactJS'de satır içi CSS'i anlamak için çalışan bir örneğe göz atacağız.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

H1 etiketine 'red' renk stilini ekledim.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Tarayıcıdaki çıktı aşağıdaki gibidir:

Yukarıdaki örnekte gösterildiği gibi, öğeye istediğiniz stili uygulayabileceğiniz bir nesne oluşturabilir ve bir ifade kullanarak stili ekleyebilirsiniz.

ReactJS'de Harici CSS ile Çalışmak

Harici bir CSS dosyası oluşturalım. Bunun için css/ klasörünü oluşturun ve içine style.css dosyasını ekleyin.

style.css

.h1tag {
color:red;
}

style.css dosyasını index.html dosyanıza ekleyin

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Şimdi .jsx dosyasındaki h1 etiketine sınıfı ekleyelim.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

`className` özniteliği sınıf detaylarını içerir. JSX'in bunu kullandığını unutmayın. sınıf adı HTML'deki `class` özniteliği yerine, `class` ayrılmış bir anahtar kelime olduğu için kullanılır. JavaKod. Şimdi bunu tarayıcıda test edelim.

Tarayıcıda h1 etiketini incelediğinizde gördüğünüz şey budur:

Gördüğünüz gibi, `class="h1tag"` özelliği `h1` etiketine başarıyla eklendi.

ReactDOM.render'ın Yerine CreateRoot'un Getirilmesinin Sebebi

Bu sayfadaki her örnek, uygulamayı ReactDOM.render ile başlatır; bu, bu kursun hedeflediği React 16 ve 17 sürümleri için doğrudur. Mart 2022'de yayınlanan React 18, bu giriş noktasını createRoot API'si ile değiştirdi ve React 19, ReactDOM.render'ı tamamen kaldırdı. Bunun nedeni eşzamanlılıktır: createRoot, React'in aynı anda birkaç kullanıcı arayüzü sürümü hazırlamasını, düşük öncelikli render işlemlerini kesmesini ve zaman yönetimini korumasını sağlar.ping ve animasyonlar akıcıdır. Otomatik gruplandırma, useTransition ve Suspense tabanlı akış gibi özelliklerin tümü buna bağlıdır.

Bu sayfada kullanılan index.js'nin modern karşılığı şöyle görünmektedir:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Burada öğrendiğiniz diğer her şey — bileşenler, JSX, durum, özellikler ve olaylar — giriş noktasındaki bu tek satırlık değişiklikten sonra da aynı şekilde çalışır. Bu tür sürüm farklılıkları sık sık karşımıza çıkar. React JS mülakat sorularıBu nedenle her iki API'yi de anlamak faydalı olacaktır.

SSS

Ayrıca Kontrol Edin: - En İyi 70 React Röportaj Soruları ve Cevapları (Güncellendi)