logo by @sawaratsuki1004

React

Web ve yerel (native) kullanıcı arayüzü için kütüphane

Bileşenlerden kullanıcı arayüzleri oluşturun

React, bileşen adı verilen birbirinden ayrı parçalardan kullanıcı arayüzü oluşturmanızı sağlar. Thumbnail, LikeButton ve Video gibi kendi React bileşenlerinizi oluşturabilirsiniz. Ardından bunları birleştirerek tam ekranlara, sayfalara ve uygulamalara çevirebilirsiniz.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

İster tek başınıza ister diğer binlerce geliştirici ile çalışın, React kullanmak aynı hissettirir. React diğer insanlar, gruplar veya organizasyonlar tarafından yazılmış bileşenleri sorunsuz bir şekilde birleştirebilmeniz için tasarlanmıştır.

Kod ve işaretleme kullanarak bileşenler yazın

React bileşenleri aslında JavaScript fonksiyonlarıdır. Bazı içerikleri koşullu olarak göstermek mi istiyorsunuz? Bir if ifadesi kullanın. Bir liste mi göstermek istiyorsunuz? Dizi map() fonksiyonunu deneyin. React öğrenmek programlamayı öğrenmektir.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

Bu işaretleme sözdizimine JSX denir. React tarafından popüler hale getirilen bir JavaScript sözdizimi uzantısıdır. JSX işaretlemesini ilgili render etme mantığına yakın yerleştirmek, React bileşenlerini oluşturmayı, bakımını ve silmeyi kolaylaştırır.

İhtiyacınız olan her yere interaktivite ekleyin

React bileşenleri veri alır ve ekranda görüntülenecek olanı döndürür. Kullanıcı girişi gibi bir etkileşime yanıt olarak bileşenlere yeni veri yollayabilirsiniz. React daha sonra ekranı yeni veriyle eşleşecek şekilde günceller.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

Tüm sayfanızı React ile oluşturmak zorunda değilsiniz. Mevcut HTML sayfanıza React ekleyin ve interaktif React bileşenlerini herhangi bir yerde render edin.

Bir çatı ile tam özellikli geliştirmeler yapın

React bir kütüphanedir. Bileşenleri bir araya getirmenize olanak sağlar, ancak yönlendirme ve veri çekme gibi konularda nasıl yapılacağına dair talimat vermez. React ile tüm bir uygulama oluşturmak için Next.js veya Remix gibi tam özellikli React çatılarını öneriyoruz.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

React aynı zamanda bir mimaridir. Onu kullanan çatılar, sunucuda çalışan asenkron bileşenlerde veya hatta derleme sırasında veri çekmenize olanak tanır. Bir dosyadan veya veritabanından veri okuyun ve bunu interaktif bileşenlerinize aktarın.

Her platformdan en iyisini kullanın

İnsanlar web ve yerel (native) uygulamaları farklı nedenlerden dolayı seviyor. React, aynı becerileri kullanarak hem web uygulamaları hem de yerel (native) uygulamalar oluşturmanıza olanak tanır. Her platformun benzersiz güçlerine dayanarak, arayüzlerinizin her platformda doğru hissettirmesine izin verir.

example.com

Web'e sadık kalın

İnsanlar web sayfalarının hızlı yüklenmesini bekliyorlar. Sunucuda, React, veri çekmeye devam ederken HTML akışını başlatmanıza olanak tanır ve JavaScript kodu yüklenmeden önce kalan içeriği aşamalı olarak doldurur. İstemcide, React, arayüzünüzü renderlama sırasında bile standart web API'lerini kullanarak bileşenlerin etkileşimli olmasını sağlar.

7:58 PM

Gerçekten yerel (native) olun.

İnsanlar yerel (native) uygulamaların kendi platformları gibi görünüp hisettirmelerini bekliyorlar. React Native ve Expo, React ile Android, iOS ve daha fazlası için uygulama oluşturmanıza olanak tanır. Arayüzleri yerel (native) gibi gözükür ve hissettirir, çünkü gerçekten öyleler. Bu bir web görünümü (webview) değil. React bileşenleriniz, platform tarafından sağlanan gerçek Android ve iOS viewlarını render eder.

React ile web ve yerel (native) geliştirici olabilirsiniz. Takımınız, kullanıcı deneyimini feda etmeden birçok platforma uygulama yapabilir. Organizasyonunuz, platform farklılıklarını bağdaştırabilir ve baştan sona tüm özelliklere sahip olan takımlar oluşturabilir.

Gelecek hazır olduğunda yükseltin

React değişikliklere dikkatle yaklaşır. Her React güncellemesi, milyarlarca kullanıcısı olan iş kritik yüzeylerde test edilir. Meta'daki 100.000'den fazla React bileşeni, her geçiş stratejisini doğrulamaya yardımcı olur.

React ekibi her zaman React'i geliştirmek için araştırmalar yapıyor. Bazı araştırmaların sonucu yıllar sonra fayda sağlar. React'in araştırma fikirlerinin üretim ortamına taşınma olasılığı düşüktür. Sadece kanıtlanmış yaklaşımlar React'in bir parçası olur.

Milyonlarca kişilik bir topluluğa katılın

Yalnız değilsiniz. Dünya genelinden her ay iki milyondan fazla geliştirici React dokümantasyonunu ziyaret ediyor. React, insanların ve takımların hemfikir olabileceği bir şeydir.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

Bu yüzden React bir kütüphane, bir mimari veya hatta bir ekosistemden daha fazlasıdır. React, bir topluluktur. Yardım isteyebileceğiniz, fırsatlar bulabileceğiniz ve yeni arkadaşlar edinebileceğiniz bir yerdir. Burada hem geliştiricilerle hem de tasarımcılarla, acemilerle ve uzmanlarla, araştırmacılarla ve sanatçılarla, öğretmenlerle ve öğrencilerle tanışacaksınız. Arka planlarımız çok farklı olabilir, ancak React, hepimizin birlikte kullanıcı arayüzleri oluşturmasına olanak tanır.

logo by @sawaratsuki1004

React topluluğuna hoş geldiniz

Başlayın