Компонентуудаар хэрэглэгчийн интерфэйс бүтээ
React нь тусдаа биеэ даасан хэсгүүд болох компонентуудаар хэрэглэгчийн интерфэйс бүтээх боломж олгодог. Жишээ нь Thumbnail, LikeButton, мөн Video г.м React компонентуудаа бүтээгээд, дараа нь эдгээрийг хуудас, нүүр болон апп даа зориулж хольж угсарна.
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>
);
}Өөрийнхөө компонент эсвэл хүний бичсэн компонент дээр ажиллах нь огт ялгаагүй санагдах ба, React нь хэний ч бичсэн компонент хоорондоо ямар ч асуудалгүй ашиглах боломжтойгоор бүтээгдсэн.
Компонентоо код болон маркап хольж бичээрэй
React компонентууд нь JavaScript функууд юм. Контентоо ямар нэг нөхцөлтэйгээр харуулах шаардлагатай бол if нөхцөл ашиглана. Жагсаалт харуулах уу? Массив-ын map() ашигла. React сурах нь яг л програмчлал сурахтай адил.
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
Энэ маркап синтакс React нэмэлтээр бүтээсэн JavaScript синтакс юм. JSX маркапаа хамааралтай рендер логиктой ойр байлгаснаар React компонентийг бүтээх, сайжруулах, устгах нь илүү хялбар болно.
Хүссэн үедээ интерактив байдал нэмэх боломж
React компонентууд дата хүлээж аваад, юуг яаж дэлгэцэнд харагдах ёстойг буцаадаг. Жишээ нь хэрэглэгч бичих талбарт юм бичихээр React шинэ дата-д зориулан дэлгэцийг өөрчилнө.
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}”`} />
</>
);
}Та бүхэлд нь React дээр бүтээх албагүй. Аль хэдийн үүсгэсэн HTML хуудас дээр React оруулаад интерактив React компонентоо хүссэн газраа ашиглаж болно
Full-stack фреймворк
ашиглаарай
React бол сан. Компонентуудыг хооронд нь хольж найруулах боломж олгох боловч, өгөгдөл татах, замчлал хэрхэн хийх зэрэг бүхэлдээ React апп бүтээх бол бид таньд дараах full-stack React фреймворкуудыг санал болгож байна Next.js эсвэл React Router.
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 нь мөн архитектур юм. Фреймворкууд нь өгөгдлийг сервер дээр байхдаа эсвэл бүр build хийх үед асинхрон татах чадвартай компонент үүсгэх боломжтойгоор бүтээгдсэн байдаг. Дата-г файлаас эсвэл өгөгдлийн сангаас уншаад интерактив компонентрууга дамжуулдаг.
Платформ бүрийг хамгийн сайнаар ашиглах
Хүмүүст вэб болон натив апп янз бүрийн шалтгаанаар таалагддаг. React нь нэг мэдлэгээр вэб апп болон натив апп бүтээх боломжийг олгодог. Платформ бүрийн онцлогт тааруулан таны бүтээсэн интерфэйсийг яг зөв харагдуулдаг.
Вэбдээ үнэнч
Вэб апп нь хурдан уншдаг байх шаардлагатай. Сервер талдаа, дата татах үедээ HTML дээр татагдсан дата-г ямар нэг JavaScript код ажиллаж эхлэхээс өмнө зурах чадвартай. Харин хэрэглэгч талдаа, React нь стандарт вэб API-уудыг ашиглаж рендер хийж байхад хүртэл UI -ыг зөв ажииллуулна.
Бүтэн натив
Хүмүүс натив апп нь яг л платформын өөрийнх нь апп шиг мэдрэгдэхийг хүсдэг. React Native болон Expo нь Android, iOS болон бусад платформд зориулан яг л платформын өөрийнх нь апп шиг апп бүтээх боломж олгодог. Android болон iOS дээр вэб дуудаж рендер хийж байгаа зүйл биш юм.
React ашиглаж вэб болон натив хөгжүүлэгч болдог. Танай баг платформ тус бүрт гэхгүйгээр бүхэлд нь хариуцаад хэрэглэгчид мэдрэгдэх мэдрэмжийг өөрчлөлгүйгээр олон платформд бүтээгдэхүүнээ гаргах боломжтой.
Бэлэн болсон үед л шинэчил
React өөрчлөлтүүдэд болгоомжтой ханддаг. React-ын commit бүр нь тэрбум гаран хэрэглэгчтэй бизнесс дээр туршигдаж, Meta -д 100,000 гаруй React компонентууд шилжилт бүрийг баталгаажуулдаг.
React баг үргэлж React-ыг хэрхэн сайжруулах талаар судалж байдаг. Зарим судалгаа нь үр дүнгээ өгөх хүртэл хэдэн жил ч болдог. Судалгааны санааг бүтээгдэхүүн болгоход өндөр босго тавьдаг. Зөвхөн батлагдсан арга л React-ын нэг хэсэг болдог.
Сая сая хүмүүсд
нэгдэх
Сар бүр React-ын гарын авлагад дэлхийн өнцөг булан бүрээс 2 сая гаруй хөгжүүлэгчид зочилдог. React бол хүмүүс болон багуудын санал нэгтэй шийдэл.
Ийм учраас React нь зүгээр нэг сан, архитектур эсвэл экосистeмээс ч илүүтэй, React бол тусламж авах, боломж олох, шинэ найзуудтай болох газар юм. Энд та хөгжүүлэгч, дизайнер, анхлан суралцагч, туршлагатай мэргэжилтэн, судлаач, урлагийн хүн, багш, оюутан зэрэг хүмүүстэй учрах болно. Гарал нь өөр боловч React бид бүгдэд хамтдаа хэрэглэгчийн интерфэйс бүтээх боломж олгож байна.
