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:37 AM

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.

React toplulu─čuna ho┼č geldiniz

Ba┼člay─▒n