Компоненттерден пайдаланушы интерфейстерін жасаңыз
React компоненттері деп атаулы, жеке бөліктерден тұратын, пайдаланушы интерфейстерін жасауға мүмкіндік береді. Thumbnail, LikeButton, және Video сияқты өз компоненттеріңізді жасаңыз. Содан кейін оларды барлық экрандарға, беттерге және қосымшаларға біріктіріңіз.
Сіз өзіңіз немесе мыңдаған басқа инженерлермен жұмыс жасасаңыз да, React-ті қолдану бірдей болады. Ол тәуелсіз адамдар, командалар мен ұйымдар жазған компоненттерді оңай біріктіруге арналған.
Компоненттерді код пен таңба арқылы жазыңыз
React компоненттері — JavaScript функциялары болып табылады. Кейбір мазмұнды шартты түрде көрсеткіңіз келе ме? If шартын пайдаланыңыз. Тізімді көрсету керек пе? Массив map() қолданып көріңіз. React-ті үйрену — бағдарламалауды үйрену.
Бұл таңба синтаксисі JSX деп аталады. Бұл React танымал JavaScript синтаксисінің кеңейтімі. JSX таңбасын қолдану рендеринг логикасына жақын, React компоненттерін құрастыруды, бақылауды және жою жеңілдетеді.
Қажет болған жерде интерактивтілікті қосыңыз
React компоненттері деректерді қабылдайды және экранда пайда болатын нәрсені қайтарады. Сіз өзара интерактивке жауап ретінде жаңа деректерді жібере аласыз, мысалы, пайдаланушы деректерді енгізген кезде. Содан кейін React экранды жаңа деректерге сәйкес жаңартады.
Сізге бүкіл парақшаны React-те құрудың қажеті жоқ. Бар HTML парақшасына React-ті қосыңыз да және оның кез келген жерінде интерактивті React компоненттерін рендерленініз.
Фреймворк арқылы
фулл-стекке өтіңіз
React - бұл бағдарламалық қосымша. Ол компоненттерді біріктіруге мүмкіндік береді, бірақ маршруттау мен деректерді алу жолын көрсетпейді. React көмегімен толық бағдарлама құру үшін Next.js немесе Remix сияқты фулл-стекті ұсынамыз
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 сонымен қатар архитектура болып табылады. Оны жүзеге асыратын фреймворк серверде немесе тіпті билд кезінде жұмыс істейтін асинхронды компонент деректерді алуға мүмкіндік береді. Файлдан немесе дерекқордан деректерді оқып, оны интерактивті компоненттерге жіберіңіз.
Әр платформаның ең жақсысын пайдаланыңыз
Адамдар әртүрлі себептермен веб және нативті бағдарламаларды жақсы көреді. React бірдей дағдыларды пайдалана отырып, веб бағдарламаларды да, нативті бағдарламаларды да жасауға мүмкіндік береді. Ол мүмкіндік беру үшін әрбір платформаның бірегей күшті жақтарына сүйене отырып, сіздің интерфейстеріңіз әр платформаға жаратады.
Интернетке адал болыңыз
Қолданушылар веб-бағдарлама беттерінің жылдам жүктелуін күтеді. Серверде React кез келген JavaScript коды жүктелмес бұрын қалған мазмұнды біртіндеп толтырып, деректерді алу кезінде HTML ағынын бастауға мүмкіндік береді. Клиентте React UI интерфейсін рендерлеу кезінде де жауап беру үшін стандартты веб API-лерді пайдалана алады.
Нативке бет бұрыныз
Адамдар нативті бағдарламаларды өздерінің платформасына ұқсайтынын күтеді. React арқылы React Native және Expo қолданып Android, IOS және т.б. бағдарламаларын жасауға мүмкіндік береді. Олар нативті болып көрінеді және сезінеді, өйткені олардың пайдаланушы интерфейстері шынымен нативті. Бұл веб көрініс емес — сіздің React компоненттеріңіз платформамен қамтамасыз етілген нақты Android және iOS көрініс.
React көмегімен сіз веб және нативті бағдарлаушы инженер бола аласыз. Сіздің командаңыз пайдаланушы тәжірибесін жоғалтпай көптеген платформаларға жеткізе алады.
Болашақ дайын болғанда жаңартыңыз
React болашақ өзгерістерге мұқият қарайды. Әрбір React-қа жасаған коммит миллиардтан астам пайдаланушысы бар бизнес үшін маңызды беттерде сыналады. Meta-дағы 100 000-нан астам React компоненттері әрбір миграция стратегиясын тексеруге көмектеседі.
React командасы әрқашан React-ті қалай жақсартуға болатынын зерттейді. Кейбір зерттеулердің нәтижесін беру үшін жылдар қажет. React өндіріске ғылыми-зерттеу идеясын енгізу үшін жоғары жолға ие. Тек дәлелденген тәсілдер React бөлігі бола алады.
Миллиондар қауымдастығына
қосылыңыз
Сіз жалғыз емессіз. Ай сайын React құжаттарына әлемнің түкпір-түкпірінен екі миллион бағдарлаушылар кіреді. React - бұл адамдар мен командалар қосыла алатын аумақ.
Сондықтан React бағдарламық қосымшадан, архитектурадан немесе тіпті экожүйеден де артық. React - бұл қауымдастық. Бұл көмек сұрауға, мүмкіндіктер табуға және жаңа достармен кездесуге болатын орын. Сіз бағдарламаушылармен де, дизайнерлермен де, жаңадан бастаушылармен және сарапшылармен, зерттеушілермен және суретшілермен, оқытушылармен және студенттермен кездесесіз. Біздің тәжірибиеміз әртүрлі болуы мүмкін, бірақ React барлығымызға бірге пайдаланушы интерфейстерін жасауға мүмкіндік береді.