React

Veb və nativ istifadəçi interfeysləri üçün kitabxana

Komponentlərdən istifadəçi interfeysləri yarat

React, komponent adlanan ayrı hissələrdən istifadə edərək istifadəçi interfeyslərini qurmağa imkan verir. Thumbnail, LikeButton Video kimi öz React komponentlərinizi yaradın. Sonra onları bütün ekranlar, səhifələr və tətbiqlərə birləşdirin. .

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-i istifadə etmək , baxmayaraq ki, siz tək işləyirsiniz ya da ki, minlərlə başqa developerlərlə hər bir halda eyni hissiyatı verir. Bu, müstəqil insanlar, komandalar və təşkilatlar tərəfindən yazılmış komponentləri problemlər olmadan birləşdirməyə imkan verən bir dizayndır.

Komponentləri code və markup ilə yazın

React komponentləri JavaScript funksiyalarıdır. Bəzi kontentləri şərti göstərmək istəyirsiniz ? Onda if blokundan istifadə edin. List göstərmək istəyirsiniz ? Onda map() yoxlayın. React öyrənmək proqramlaşdırma öyrənmək kimidir.

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 markup JSX adlanır. React tərəfindən populyarlaşdırılan JavaScript sintaksis əlavəsidir. Render etmək məntiqinə yaxın JSX markup qoymaq, React komponentlərini yaratmaq, saxlamaq və silməyi asanlaşdırır.

İstədiyiniz yerə interaktivlik əlavə edin

React komponentləri məlumat qəbul edir və ekranda görünməli olanı geri qaytarır. İstifadəçi bir input-a yazı yazdıqda onlara interaktiv cavab olaraq yeni məlumatı ötürə bilərsiniz. Məsələn istifadəçi bir input-a yazı yazdıqda onlara interaktiv cavab olaraq yeni məlumatı ötürə bilərsiniz. Yeni məlumata uyğun olaraq React ekranı yeniləyəcək.

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}”`} />
</>
);
}

Bütün səhifəni React ilə qurmağa ehtiyac yoxdur. Mövcud HTML səhifənizə React əlavə edin və onunla interaktiv React komponentlərini hər hansı istənilən bir yerə render edin.

Freymvork ilə full-stack olun

React kitabxanadır. O sizə komponentləri birgə qoymağa icazə verir, ancaq o məlumat əldə edilməsini və səhifələrin necə idarə edilməsini göstərmir. Bütün bir applikasiyanı React ilə yığmaq üçün, biz Next.js yaxud da Remix kimi full-stack React freymvork-larını tövsiyyə edirik.

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 həmçinin bir arxitekturadır. Freymvorklar sizə serverdə yaxud da build zamanı işləyən asinxron komponentlərdə məlumat əldə edilməsinə şərait yaradır. Fayldan və ya verilənlər bazasından məlumatı oxuyun və bunu interaktiv komponentlərinizə ötürün.

Bütün platformalar üçün ən yaxşısını istifadə edin

İnsanlar veb və nativ applikasiyaları müxtəlif səbəblərə görə sevir. React sizə eyni biliklər ilə veb and nativ applikasiyaları qurmağa şərait yaradır. Sizin interfeyslərin hər platformada eyni hissiyatı verməsi, artıq hər platformanın öz unikal güclərindən asılı olacaq.

example.com

Vebə sadiq qalın

İnsanlar veb applikasiyaların sürətli yüklənməsini istəyir. Serverdə React sizə HTML-i yükləməyə başlayarkən hələ də məlumatı yükləməyə, Javascript kodunun yüklənməsindən əvvəl tam məzmunu doldurmağa imkan verir. İstifadəçi tərəfdə, render zamanı UI-ın düzgün görünməsi üçün React standart veb API-larını istifadə edir.

7:13 PM

Həqiqi nativ qalın

İnsanlar nativ tətbiqlərin öz platformalarına uyğun görünüşə və hissə malik olmasını gözləyir. React Native Expo sizə React applikasiyalarını Android, iOS, və başqaları üçün yığmağa şərait yaradır. Onlar nativ görünür və hissiyatı verir çünki onların UI-ı həqiqətən nativ-dir. Bu, bir veb görünüşü deyil — sizin React komponentləriniz platforma tərəfindən təmin edilən real Android və iOS görünüşlərini render edir.

React ilə siz eyni zamanda veb nativ developer ola bilərsiniz. Sizin komandanız istifadəçi təcrübəsindən asılı olmadan çoxlu platformalara dəstək ola bilər. Sizin təşkilatınız platformalar arasındakı boşluqları aradan qaldıra bilər və bütün xüsusiyyətlərin sahibi olan komandalar yarada bilər.

Yenilik hazır olduğunda yeniləmə edin

React yeniliklərə diqqətlə yanaşır. Hər React commitin-də bir milyard istifadəçisi olan kritik səthlərdə test olunur. Meta-da 100.000-dən çox React komponenti hər köçürmə strategiyasını təsdiqləməyə kömək edir.

React komandası həmişə React-i inkişaf etdirmək üçün araşdırmalar aparır. Bəzən araşdırmaların nəticələri almaq üçün illər keçə bilər. React-də bir araşdırma ideyasını reallaşdırmaq üçün yüksək standartlar tətbiq edilir. Ancaq təsdiqlənmiş yanaşmalar React-in bir hissəsi olur.

Milyonların icmasına qoşul

Sən tək deyilsən. Dünyanın hər yerindən iki milyondan çox proqramçı ayda bir dəfə React sənədlərinə baxır. React insanların və komandaların razılaşa biləcəyi bir texnologiyadır.

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 səbəbdən React bir kitabxana, arxitektura və hətta bir ekosistəmdən çox daha çoxudur. React bir icmadır. Burada kömək istəyə, imkanlar axtarmağa və yeni dostlarla tanış olmağa imkanınız var. Burada siz developerlər və dizaynerlər, yeni başlayan və təcrübəli ekspertlərlə, araşdırıcılar və sənətkarlar, müəllimlər və tələbələr ilə qarşılaşacaqsınız. Bizim keçmiş təcrübələrimiz fərqli ola bilər, ancaq React bizim hamımıza birgə istifadəçi interfeysləri yaratmağa imkan tanıyır.

React icmasına
Xoş gəlmisiniz

Gəlin başlayaq