React

Вэб болон натив апп-д зориулсан сан

React сурахAPI лавлах

Компонентуудаар хэрэглэгчийн интерфэйс бүтээ

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>
  );
}

My video

Video description

Өөрийнхөө компонент эсвэл хүний бичсэн компонент дээр ажиллах нь огт ялгаагүй санагдах ба, 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

First video

Video description

Second video

Video description

Third video

Video description

Энэ маркап синтакс 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}”`} />
    </>
  );
}
example.com/videos.html

React Videos

A brief history of React

5 Videos

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and Lauren Tan (2020)

Та бүхэлд нь React дээр бүтээх албагүй. Аль хэдийн үүсгэсэн HTML хуудас дээр React оруулаад интерактив React компонентоо хүссэн газраа ашиглаж болно

Вэб хуудсандаа React нэмэх

Full-stack фреймворк ашиглаарай

React бол сан. Компонентуудыг хооронд нь хольж найруулах боломж олгох боловч, өгөгдөл татах, замчлал хэрхэн хийх зэрэг бүхэлдээ React апп бүтээх бол бид таньд дараах full-stack 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} />;
}
example.com/confs/react-conf-2021

19 Videos

React 18 Keynote

The React Team

React 18 for App Developers

Shruti Kapoor

Streaming Server Rendering with Suspense

Shaundai Person

The First React Working Group

Aakansha Doshi

React Developer Tooling

Brian Vaughn

React without memo

Xuan Huang (黄玄)

React Docs Keynote

Rachel Nabors

Things I Learnt from the New React Docs

Debbie O'Brien

Learning in the Browser

Sarah Rainsberger

The ROI of Designing with React

Linton Ye

Interactive Playgrounds with React

Delba de Oliveira

Re-introducing Relay

Robert Balicki

React Native Desktop

Eric Rozell and Steven Moyes

On-device Machine Learning for React Native

Roman Rädle

React 18 for External Store Libraries

Daishi Kato

Building Accessible Components with React 18

Diego Haz

Accessible Japanese Form Components with React

Tafu Nakazaki

UI Tools for Artists

Lyle Troxell

Hydrogen + React 18

Helen Lin

React нь мөн архитектур юм. Фреймворкууд нь өгөгдлийг сервер дээр байхдаа эсвэл бүр build хийх үед асинхрон татах чадвартай компонент үүсгэх боломжтойгоор бүтээгдсэн байдаг. Дата-г файлаас эсвэл өгөгдлийн сангаас уншаад интерактив компонентрууга дамжуулдаг.

Фреймворкын талаар

Платформ бүрийг хамгийн сайнаар ашиглах

Хүмүүст вэб болон натив апп янз бүрийн шалтгаанаар таалагддаг. React нь нэг мэдлэгээр вэб апп болон натив апп бүтээх боломжийг олгодог. Платформ бүрийн онцлогт тааруулан таны бүтээсэн интерфэйсийг яг зөв харагдуулдаг.

example.com

Вэбдээ үнэнч

Вэб апп нь хурдан уншдаг байх шаардлагатай. Сервер талдаа, дата татах үедээ HTML дээр татагдсан дата-г ямар нэг JavaScript код ажиллаж эхлэхээс өмнө зурах чадвартай. Харин хэрэглэгч талдаа, React нь стандарт вэб API-уудыг ашиглаж рендер хийж байхад хүртэл UI -ыг зөв ажииллуулна.

6:21 AM

Бүтэн натив

Хүмүүс натив апп нь яг л платформын өөрийнх нь апп шиг мэдрэгдэхийг хүсдэг. React Native болон Expo нь Android, iOS болон бусад платформд зориулан яг л платформын өөрийнх нь апп шиг апп бүтээх боломж олгодог. Android болон iOS дээр вэб дуудаж рендер хийж байгаа зүйл биш юм.

React ашиглаж вэб болон натив хөгжүүлэгч болдог. Танай баг платформ тус бүрт гэхгүйгээр бүхэлд нь хариуцаад хэрэглэгчид мэдрэгдэх мэдрэмжийг өөрчлөлгүйгээр олон платформд бүтээгдэхүүнээ гаргах боломжтой.

Натив платформуудад зориулж бүтээх нь

Бэлэн болсон үед л шинэчил

React өөрчлөлтүүдэд болгоомжтой ханддаг. React-ын commit бүр нь тэрбум гаран хэрэглэгчтэй бизнесс дээр туршигдаж, Meta -д 100,000 гаруй React компонентууд шилжилт бүрийг баталгаажуулдаг.

React баг үргэлж React-ыг хэрхэн сайжруулах талаар судалж байдаг. Зарим судалгаа нь үр дүнгээ өгөх хүртэл хэдэн жил ч болдог. Судалгааны санааг бүтээгдэхүүн болгоход өндөр босго тавьдаг. Зөвхөн батлагдсан арга л React-ын нэг хэсэг болдог.

Сүүлийн үеийн мэдээ

React Canaries: Incremental Feature Rollout

May 3, 2023

React Labs: March 2023

March 22, 2023

Introducing react.dev

March 16, 2023
React -ын талаар мэдээ

Сая сая хүмүүсд нэгдэх

Сар бүр React-ын гарын авлагад дэлхийн өнцөг булан бүрээс 2 сая гаруй хөгжүүлэгчид зочилдог. React бол хүмүүс болон багуудын санал нэгтэй шийдэл.

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

Ийм учраас React нь зүгээр нэг сан, архитектур эсвэл экосистeмээс ч илүүтэй, React бол тусламж авах, боломж олох, шинэ найзуудтай болох газар юм. Энд та хөгжүүлэгч, дизайнер, анхлан суралцагч, туршлагатай мэргэжилтэн, судлаач, урлагийн хүн, багш, оюутан зэрэг хүмүүстэй учрах болно. Гарал нь өөр боловч React бид бүгдэд хамтдаа хэрэглэгчийн интерфэйс бүтээх боломж олгож байна.

React-ын нэгдэлд
тавтай морилно уу

Эхлэх