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>
);
}3 Videos
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 framework ile tam özellikli geliştirmeler yapın
React bir kütüphanedir. Bileşenleri bir araya getirmenizi sağlar, ancak yönlendirme (routing) ve veri çekme (data fetching) işlemlerini nasıl yapmanız gerektiğini belirlemez. React ile tam bir uygulama oluşturmak için, tam yığın (full-stack) React framework’ü olarakNext.js veya React Router kullanmanızı öneririz.
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} />;
}
19 Videos
React aynı zamanda bir mimaridir. Onu kullanan framework'leri, 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.
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.
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.
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.
