Introducing JSX

මෙම variable declaration එක සලකා බලන්න:

const element = <h1>Hello, world!</h1>;

මෙම අමුතු tag syntax එක string හෝ HTML නොවේ.

එය JSX ලෙස හැඳින්වෙන අතර එම syntax එක JavaScript හි සංයෝජනයකි. ඔබගේ UI කෙබඳු විය යුතුද යන්න විස්තර කිරීමට මෙය භාවිතා කිරීම අපි නිර්දේශ කරමු.JSX ඔබට වෙනත් හුරුපුරුදු භාෂාවක් මතක් කර දෙනු ඇත, නමුත් එය JavaScript හි පූර්ණ බලය සමඟ ඔබට ලබාදී ඇත.

JSX React “elements” සෑදීම යොදාගැනේ. අපි ඊළඟ කොටසේදී ඒවා DOM වෙත යොමු කිරීම ගවේෂණය කරන්නෙමු. ඔබට JSX භාවිතය කිරීමට අවශ්‍ය මූලික කරුණු පහතින් සොයාගත හැක.

ඇයි JSX?

React භාවිත වෙනවිට ඔබගේ Rendering Logic හා UI Logic එකට සම්බන්ධ වේ : Component හි Events හසුරුවන ආකාරය ද, එහි State වෙනස් වන ආකාරය හා Data දිස්වෙන ආකාරයද යන සියල්ල එකට සම්බන්ධවී ඇත.

ඔබගේ markup හා logic වෙනම file වල තැන්පත් කිරීම වෙනුවට, React “components” යන නමින් එකක වලට කඩා markup හා logic යන දෙකම එකට සම්බන්ධකරයි . අපි තවත් කොටසකදී “components” වෙත නැවත සාකච්චාවට පැමිණෙමු, ඔබට තවමත් markup හා logic එකට අන්තර්ගත කිරීමට පසුබට වේනම්, මෙම කථාව මගින් ඔබට එය කිරීමට ඒත්තු ගැන්විය හැකිය.

React භාවිතා කිරීමට JSX අවශ්‍ය නොවේ, නමුත් බොහෝ අය එයට JavaScript code තුළ UI සමඟ වැඩ කරන විට එය දෘශ්‍ය ආධාරකයක් ලෙස උපකාරී වේ. එය වඩාත් ප්‍රයෝජනවත් වන්නේ Error සහ Warning පණිවිඩ පෙන්වීමටයි.

එ සමඟ, අපි ආරම්භ කරමු!

JSX හි ප්‍රකාශන කාවැද්දීම

පහත උදාහරණයේ දී, අපි name ලෙස හැඳින්වෙන variable එකක් declare කර එය JSX තුළ curly braces වලින් wrap කර භාවිතා කරමු:

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

ඔබට ඕනෑම වලංගු JavaScript expression යක් JSX හි curly braces තුළ තැබිය හැකිය. උදාහරණයක් ලෙස, 2 + 2, user.firstName, හෝ formatName(user) සියල්ලම වලංගු JavaScript ප්‍රකාශන වේ.

පහත උදාහරණයේ දී, අපි JavaScript function එකක් වන formatName(user), <h1> element හි, එමගින් එන result එක කාවැද්දුවෙමු.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePen හි එය උත්සාහ කරන්න

කියවීමේ පහසුතාවය සඳහා අපි JSX විවිධ රේඛා ඔස්සේ බෙදුවෙමු. එය අවශ්‍ය නොවනද , මෙය සිදු කරන විට, automatic semicolon ඇතුළු කිරීමේ අන්තරායන් වළක්වා ගැනීම සඳහා parentheses තුළ wrap කරම අපි නිර්දේශ කරමු.

JSX යනු ප්‍රකාශණයකි

compile කිරීමෙන් පසුව, JSX ප්‍රකාශන සාමාන්‍ය JavaScript function calls බවට පත් වන අතර JavaScript objects ලෙස ඇගයීමට ලක් කරයි.

මෙයින් අදහස් කරන්නේ ඔබට if සහ for loops ප්‍රකාශන සඳහා JSX භාවිතා කළ හැකි බවයි, එය variables හි assign කර , එහි arguments ඇතුල් කර function එකේ ප්‍රතිපලය ගැනීමයි :

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

JSX සමඟ Attributes නියම කිරීම

ඔබට string භාවිතා කිරීමට quotes භාවිතා කළ හැකිය:

const element = <div tabIndex="0"></div>;

JavaScript ප්‍රකාශනයක් කාවැද්දීමට ඔබට curly braces භාවිතා කළ හැකිය:

const element = <img src={user.avatarUrl}></img>;

JavaScript ප්‍රකාශනයක් කාවැද්දීමේදී curly braces වටා quotes දැමීම නොකරන්න. ඔබ එක්කෝ quotes (string අගයන් සඳහා) හෝ curly braces (ප්‍රකාශන සඳහා)භාවිතා කළ යුතුය, නමුත් දෙකම එකවර බාවිතා නොකරන්න.

අවවාදයයි:

HTML වලට වඩා JSX JavaScript වලට සමීප බැවින්, React DOM විසින් HTML attribute names camelCase නම් කිරීමේ සම්මුතිය භාවිතා කරයි.

උදාහරණයක් ලෙස, class JSX හි className බවට පත්වන අතර tabindex, tabIndex බවට පත්වේ.

JSX හි Children නියම කිරීම

යම්කිසි tag එකක් හිස් නම්, ඔබට එය XML /> අර්කාරයෙන් වහාම වසා දැමිය හැකිය:

const element = <img src={user.avatarUrl} />;

JSX tags තුල children අඩංගු විය හැකිය:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX Injection Attacks වළක්වයි

User input JSX තුළට කාවැද්දීම ආරක්ෂිතයි:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

පෙරනිමියෙන්, React DOM render කිරීමට පෙර JSX හි ඇතුළත් කර ඇති ඕනෑම අගයන්ගෙන් ගැලවී යයි. මේ අනුව, ඔබගේ code හි ලියා නැති කිසිවක් ඔබට කිසි විටෙකත් inject කළ නොහැකි බව සහතික කරයි. Render කිරීමට පෙර සෑම දෙයක්ම string බවට පරිවර්තනය වේ. මෙය XSS (cross-site-scripting) ප්‍රහාර වැළැක්වීමට උපකාරී වේ.

JSX Objects නියෝජනය කරයි

Babel මගින් JSX React.createElement() calls වලට හරවයි compiles.

මෙම උදාහරණ දෙක සමාන වේ:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement () දෝෂ රහිත code ලිවීමට ඔබට උදව් කිරීම සඳහා checks කිහිපයක් සිදු කරයි, නමුත් ඇත්තවශයෙන්ම එය මෙවැනි object එකක් නිර්මාණය කරයි:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

මෙම objects “React elements” ලෙස හැඳින්වේ. ඔබට ඒවා තිරය මත දැකීමට අවශ්‍ය දේ පිළිබඳ විස්තරයක් ලෙස සිතිය හැකිය. React මඟින් මෙම objects කියවා ඒවා DOM එක සෑදීමට හා up to date තබා ගැනීමට භාවිතා කරයි.

අපි ඊළඟ කොටසේදී React විසින් DOM හි render කිරීම සිදුවන ආකාරය ගවේෂණය කරන්නෙමු.

ඉඟිය:

ඔබේ editor හි තුල “Babel” language definition භාවිතා කිරීම අපි නිර්දේශ කරමු,එවිට ES6 සහ JSX code දෙකම නිසි ලෙස ඉස්මතු වේ. මෙම වෙබ් අඩවිය Oceanic Next color scheme භාවිතා කරයි.