React

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

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

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

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 ප්‍රකාශයක් භාවිතා කරන්න. ලැයිස්තුවක් පෙන්වනවාද? 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>
);
}

මෙම සලකුණු වාක්‍ය ඛණ්ඩය JSX ලෙස හැඳින්වේ. එය 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 සමඟ සම්පූර්ණ යෙදුමක් තැනීමට, අපි නිර්දේශ කරන්නේ,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} />;
}

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

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

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

example.com

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

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

6:23 PM

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

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

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

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

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

React කණ්ඩායම සැමවිටම React වැඩිදියුණු කරන්නේ කෙසේදැයි පර්යේෂණ කරයි. සමහර පර්යේෂණවල විපාක ලැබීමට වසර ගණනාවක් ගත වේ. නිෂ්පාදනයට පර්යේෂණ අදහසක් ගැනීම සඳහා React ඉහළ තීරුවක් ඇත. 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 ප්‍රජාව වෙත
සාදරයෙන් පිළිගනිමු

ආරම්භ කරන්න