React

වෙබ් සහ ස්වදේශීය පරිශීලක අතුරුමුහුණත් සඳහා පුස්තකාලය

React ඉගෙන ගන්නAPI යොමුව

Components වලින් පරිශීලක අතුරුමුහුණත් සාදන්න

React ඔබට components ලෙස හැඳින්වෙන තනි කොටස් වලින් පරිශීලක අතුරුමුහුණත් තැනීමට ඉඩ දෙයි. Thumbnail, LikeButton, හා Video වැනි ඔබේම React components සාදන්න. ඉන්පසු ඒවා සම්පූර්ණ තිර, පිටු සහ යෙදුම් වලට ඒකාබද්ධ කරන්න.

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 භාවිතා කිරීම එකලෙසම දැනේ. එය ඔබට ස්වාධීන පුද්ගලයන් කණ්ඩායම්, සහ සංවිධාන විසින් ලියන ලද components බාධාවකින් තොරව ඒකාබද්ධ කරන්නට, ඉඩ දීමට සැලසුම් කර ඇත.

කේත සහ markup සමඟ components ලියන්න

React components JavaScript functions වේ. යම් අන්තර්ගතයක් කොන්දේසි සහිතව පෙන්වීමට අවශ්‍යද? if ප්‍රකාශයක් භාවිතා කරන්න. ලැයිස්තුවක් පෙන්වනවාද? array 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

පළමු වීඩියෝව

වීඩියෝ විස්තරය

දෙවන වීඩියෝව

වීඩියෝ විස්තරය

තුන්වන වීඩියෝව

වීඩියෝ විස්තරය

මෙම markup වාක්‍ය ඛණ්ඩය JSX ලෙස හැඳින්වේ. එය React මගින් ප්‍රචලිත කරන ලද JavaScript syntax දිගුවකි. JSX සලකුණු කිරීම අදාළ විදැහුම් තර්කයට ආසන්නව තැබීමෙන් React components සෑදීම, නඩත්තු කිරීම සහ මකා දැමීම පහසු කරයි.

ඔබට අවශ්‍ය ඕනෑම තැනක අන්තර්ක්‍රියාකාරීත්වය එක් කරන්න

React components දත්ත ලබා ගන්නා අතර තිරයේ දිස්විය යුතු දේ ආපසු ලබා දෙයි. පරිශීලකයා ආදානයකට ටයිප් කරන විට වැනි අන්තර්ක්‍රියාවකට ප්‍රතිචාර වශයෙන් ඔබට ඔවුන්ට නව දත්ත ලබා දිය හැක. React පසුව නව දත්තවලට ගැළපෙන පරිදි තිරය update කරනු ඇත.

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: වාර්තා චිත්රපටය

React හි මූලාරම්භය කතාව

හොඳම භාවිතයන් ගැන නැවත සිතා බැලීම

Pete Hunt (2013)

React Native හඳුන්වා දෙමින්

Tom Occhino (2015)

React කොකු හඳුන්වා දෙමින්

Sophie Alpert and Dan Abramov (2018)

Server components හඳුන්වා දෙමින්

Dan Abramov and Lauren Tan (2020)

ඔබට ඔබේ මුළු පිටුවම React තුළ ගොඩනගා ගැනීමට අවශ්‍ය නැත. ඔබගේ පවතින HTML පිටුවට React එක් කරන්න, සහ එහි ඕනෑම තැනක අන්තර්ක්‍රියාකාරී React components ලබා දෙන්න.

ඔබේ පිටුවට React එක් කරන්න

Framework එකක් සමඟ full-stack වෙත යන්න

React යනු පුස්තකාලයකි. එය ඔබට components එකට තැබීමට ඉඩ සලසයි, නමුත් එය routing සහ දත්ත ලබා ගැනීම සිදු කරන ආකාරය නියම නොකරයි. React සමඟ සම්පූර්ණ යෙදුමක් තැනීමට, අපි නිර්දේශ කරන්නේ,Next.js හෝ Remix වැනි full-stack React framework වේ.

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 ප්රධාන දේශනය

React කණ්ඩායම

යෙදුම් සංවර්ධකයින් සඳහා React 18

Shruti Kapoor

Suspense සමඟ Streaming Server Rendering

Shaundai Person

පළමු React ක්රියාකාරී කණ්ඩායම

Aakansha Doshi

React සංවර්ධක මෙවලම්

Brian Vaughn

මතක සටහන් නොමැතිව React

Xuan Huang (黄玄)

React Docs ප්රධාන දේශනය

Rachel Nabors

නව React Docs සමඟ මා ඉගෙන ගත් දේවල්

Debbie O'Brien

බ්‍රවුසරයේ ඉගෙනීම

Sarah Rainsberger

React සමඟ සැලසුම් කිරීමේ ROI

Linton Ye

React සමඟ අන්තර්ක්‍රියාකාරී ක්‍රීඩා පිටි

Delba de Oliveira

Relay නැවත හඳුන්වා දීම

Robert Balicki

React Native Desktop

Eric Rozell and Steven Moyes

React Native සඳහා උපාංගය මත යන්ත්‍ර ඉගෙනීම

Roman Rädle

බාහිර ගබඩා පුස්තකාල සඳහා React 18

Daishi Kato

React 18 සමඟ ප්‍රවේශ විය හැකි components ගොඩනැගීම

Diego Haz

React සමඟ ප්‍රවේශ විය හැකි ජපන් ආකෘති components

Tafu Nakazaki

කලාකරුවන් සඳහා UI මෙවලම්

Lyle Troxell

Hydrogen + React 18

Helen Lin

React ද වාස්තු විද්‍යාවකි. එය ක්‍රියාත්මක කරන frameworks මඟින් server මත හෝ ගොඩනැගීමේදී ක්‍රියාත්මක වන අසමමුහුර්ත components-වල දත්ත ලබා ගැනීමට පවා ඔබට ඉඩ සලසයි. ගොනුවකින් හෝ database මඟින් දත්ත කියවා එය ඔබගේ අන්තර්ක්‍රියාකාරී components වෙත ලබා දෙන්න.

Framework එකක් සමඟ ආරම්භ කරන්න

සෑම වේදිකාවකින්ම හොඳම දේ භාවිතා කරන්න

විවිධ හේතු නිසා මිනිසුන් වෙබ් සහ ස්වදේශීය යෙදුම් වලට ප්‍රිය කරයි. React ඔබට එකම කුසලතා භාවිතා කරමින් වෙබ් යෙදුම් සහ ස්වදේශීය යෙදුම් දෙකම ගොඩනැගීමට ඉඩ දෙයි. එය ඔබගේ අතුරුමුහුණත් සෑම වේදිකාවකම හරියටම දැනෙන්නට ඉඩ සලසා දීම සඳහා එක් එක් වේදිකාවේ අද්විතීය ශක්තීන් මත රඳා පවතී.

example.com

වෙබයට සත්‍යව සිටින්න

වෙබ් යෙදුම් පිටු වේගයෙන් පූරණය වනු ඇතැයි මිනිසුන් අපේක්ෂා කරති. Server තුල, React ඔබ තවමත් දත්ත ලබා ගනිමින් සිටින අතරතුර HTML ප්‍රවාහය ආරම්භ කිරීමට ඉඩ සලසයි, ඕනෑම JavaScript කේතයක් පූරණය වීමට පෙර ඉතිරි අන්තර්ගතය ක්‍රමානුකූලව පුරවයි. Client මත, විදැහුම්කරණය මධ්‍යයේ පවා ඔබේ UI ප්‍රතිචාරාත්මකව තබා ගැනීමට React හට සම්මත වෙබ් API භාවිත කළ හැක.

12:39 PM

සැබවින්ම ස්වදේශික වන්න

ස්වදේශීය යෙදුම් ඔවුන්ගේ වේදිකාව මෙන් පෙනෙනු ඇතැයි මිනිසුන් අපේක්ෂා කරයි. React Native සහ Expo ඔබට Android, iOS සහ තවත් දේ සඳහා React හි යෙදුම් තැනීමට ඉඩ දෙයි. ඔවුන්ගේ UI සැබවින්ම ස්වදේශික බැවින් ඔවුන් ස්වදේශික ලෙස පෙනේ. එය web view නොවේ—ඔබේ React components වේදිකාව මඟින් සපයන ලද සැබෑ Android සහ iOS දසුන් ලබා දෙයි.

React සමඟින්, ඔබට වෙබ් සහ ස්වදේශීය සංවර්ධකයෙකු විය හැක. පරිශීලක අත්දැකීම කැප නොකර ඔබේ කණ්ඩායමට බොහෝ වේදිකාවලට නැව්ගත කළ හැක. ඔබේ සංවිධානයට වේදිකා silos පාලම් කළ හැකි අතර, අවසානයේ සිට අවසානය දක්වා සම්පූර්ණ විශේෂාංග හිමි කණ්ඩායම් සාදන්න.

දේශීය වේදිකා සඳහා ගොඩනඟන්න

අනාගතය සූදානම් වන විට upgrade කරන්න

React ප්‍රවේශයන් ප්‍රවේශමෙන් වෙනස් වේ. සෑම React කැපවීමක්ම බිලියනයකට අධික පරිශීලකයින් සිටින ව්‍යාපාරික-විවේචනාත්මක පෘෂ්ඨයන් මත පරීක්ෂා කරනු ලැබේ. Meta හි 100,000 කට අධික React components සෑම සංක්‍රමණ උපායමාර්ගයක්ම වලංගු කිරීමට උදවු කරයි.

React කණ්ඩායම සැමවිටම 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 docs වෙත පැමිණේ. React යනු පුද්ගලයන්ට සහ කණ්ඩායම්වලට එකඟ විය හැකි දෙයකි.

React Conf හි කැරෝකී ගායනා කරන මිනිසුන්
සුනිල් පායි React India හිදී අදහස් දක්වමින්
React Conf හි පුද්ගලයන් දෙදෙනෙකු අතර ශාලාවේ සංවාදයක්
React India හි ශාලාවේ සංවාදයක්
Elizabet Oliveira React Conf හි කතා කරයි
React India හි සමූහ සෙල්ෆියක් ගන්නා පුද්ගලයින්
Nat Alison React conf හි කතා කරයි
React India හි සහභාගිවන්නන්ට ආචාර කරන සංවිධායකයින්

React යනු පුස්තකාලයකට, ගෘහ නිර්මාණ ශිල්පයකට හෝ පරිසර පද්ධතියකට වඩා වැඩි යමක් වන්නේ මේ නිසාය. React යනු ප්‍රජාවකි. එය ඔබට උපකාර ඉල්ලා සිටීමට, අවස්ථා සොයා ගැනීමට සහ නව මිතුරන් හමුවීමට හැකි ස්ථානයකි. ඔබ සංවර්ධකයින් සහ නිර්මාණකරුවන්, ආරම්භකයින් සහ විශේෂඥයින්, පර්යේෂකයන් සහ කලාකරුවන්, ගුරුවරුන් සහ සිසුන් යන දෙදෙනාම හමුවනු ඇත. අපගේ පසුබිම් බොහෝ වෙනස් විය හැක, නමුත් React අප සියල්ලන්ටම එක්ව පරිශීලක අතුරුමුහුණත් නිර්මාණය කිරීමට ඉඩ සලසයි.

React ප්‍රජාව වෙත
සාදරයෙන් පිළිගනිමු

ආරම්භ කරන්න