JSX Syntax - Using JSX and How It Differs from HTML

JSX Syntax - Isticmaalka JSX iyo Sida uu Uga Duwan Yahay HTML

Hordhac

React.js waa framework caan ah oo loogu talagalay horumarinta front-end ee bogagga internetka. Mid ka mid ah astaamaha ugu muhiimsan ee React.js waa JSX, syntax la mid ah HTML oo loo isticmaalo in lagu qoro elements-ka React. JSX wuxuu fududeeyaa fahamka iyo qorista code-ka React iyadoo isku darsanaysa awoodaha JavaScript iyo muuqaalka HTML. Maqaalkan, waxaan ku falanqeyn doonaa JSX syntax, isticmaalka, iyo sida uu uga duwan yahay HTML.

JSX Syntax - Using JSX and How It Differs from HTML
JSX Syntax - Using JSX and How It Differs from HTML


Maxay Tahay JSX?

JSX (JavaScript XML) waa syntax extension loogu talagalay JavaScript oo kuu ogolaanaya inaad ku qorto XML ama HTML-like syntax code-kaaga React. JSX wuxuu kuu ogolaanayaa inaad si fudud ugu qorto components-ka React qaab muuqaal ahaan u dhow HTML, taasoo ka dhigaysa code-ka mid nadiif ah oo si fudud loo fahmi karo. JSX maaha luuqad gaar ah, laakiin waa foomka hore ee syntax-ka React, taasoo ka dhigaysa in code-kaagu uu noqdo mid la fahmi karo oo muuqaal fiican leh.

Isticmaalka JSX

Si aad u isticmaasho JSX, waxaad u baahan tahay inaad ku darto React iyo ReactDOM libraries. JSX syntax wuxuu kuu ogolaanayaa inaad ku qorto elements-ka React gudaha function-kaaga ama component-kaaga. Tusaale ahaan, waxaan abuuri karnaa component React ah oo isticmaalaya JSX sida soo socota:

javascript

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Faa'iidooyinka JSX

  1. Waa Muuqaal Qoraal Sifaysan: JSX wuxuu kuu ogolaanayaa inaad ku qorto components-kaaga React qaab muuqaal ahaan u dhow HTML, taasoo ka dhigaysa mid sahlan in la fahmo loona qoro.
  2. Isku-darka JavaScript iyo HTML: JSX wuxuu kuu ogolaanayaa inaad isticmaasho awoodaha JavaScript gudaha HTML-like syntax, taasoo kuu fududeynaysa inaad si sahlan ugu darto logic iyo xisaabinta components-kaaga.
  3. Error Checking: JSX wuxuu bixiyaa error checking marka aad qorayso code-kaaga, taasoo kaa caawinaysa inaad si degdeg ah u ogaato khaladaadka.

Farqiga u Dhexeeya JSX iyo HTML

Inkastoo JSX uu u egyahay HTML, waxaa jira farqi muhiim ah oo u dhexeeya labada:

  1. Syntax: JSX wuxuu isticmaalaa camelCase sida className halkii uu ka isticmaali lahaa class oo ah keyword ku jira HTML. Tusaale ahaan:

    jsx

    <div className="container"></div>

  2. Expressions: JSX wuxuu kuu ogolaanayaa inaad isticmaasho JavaScript expressions gudaha curly braces {}. Tusaale ahaan:

    jsx

    const name = 'Mowlid';
const element = <h1>Hello, {name}!</h1>;

  3. Fragmentation: JSX wuxuu kuu ogolaanayaa inaad isticmaasho fragments si aad u wada xirxirto multiple elements iyadoon loo baahnayn inaad isticmaasho element div ah. Tusaale ahaan:

    jsx

    return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

  4. Self-closing Tags: JSX, sida XML, wuxuu taageeraa self-closing tags marka element-kuusan lahayn children. Tusaale ahaan:

    jsx

    <img src="image.jpg" alt="Image" />

Tusaale Dhab ah

Waxaan qori karnaa tusaale component React ah oo isticmaalaya JSX si aan u muujino isticmaalka iyo awoodda JSX. Tusaalahan, waxaan abuuri doonaa component-ka UserProfile oo soo bandhigaya macluumaadka isticmaalaha:

javascript

import React from 'react';

function UserProfile({ user }) {
  return (
    <div className="user-profile">
      <img src={user.avatar} alt={`${user.name}'s avatar`} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}

const user = {
  name: 'Mowlid Cali Siidow',
  avatar: 'https://example.com/avatar.jpg',
  bio: 'JavaScript developer and React enthusiast.'
};

function App() {
  return <UserProfile user={user} />;
}

export default App;

Gunaanad

JSX waa syntax extension awood badan oo loogu talagalay JavaScript, kaasoo kuu ogolaanaya inaad ku qorto components-kaaga React qaab muuqaal ahaan u dhow HTML. JSX wuxuu isku daraa awoodaha JavaScript iyo muuqaalka HTML, taasoo kuu fududeynaysa inaad si sahlan u qorto una fahanto code-kaaga. Inkastoo JSX uu u egyahay HTML, waxaa jira farqi muhiim ah oo u dhexeeya labada, sida syntax, isticmaalka expressions, fragmentation, iyo self-closing tags. Isticmaalka JSX wuxuu kuu ogolaanayaa inaad si sahlan u qorto una fahanto components-kaaga React, taasoo ka dhigaysa horumarinta front-end mid sahlan oo waxtar leh.

Tags
Previous Post Next Post