آموزش حرفه‌ای React JSX: از اصول تا الگوهای پیشرفته

JSX یک سینتکس شبیه HTML است که داخل جاوااسکریپت استفاده می‌شود و به‌صورت Declarative رابط کاربری را توصیف می‌کند. این آموزش از مبانی تا تکنیک‌های حرفه‌ای (شرطی‌سازی، لیست‌ها و کلیدها، مدیریت state، هوک‌ها، پرفورمنس و الگوهای پیشرفته) را پوشش می‌دهد.

۱) JSX چیست و چرا؟

• خوانایی بالا و نزدیکی به ساختار UI
• اسکوپ و منطق جاوااسکریپت در کنار View
• بهینه‌سازی هوشمند توسط React و ابزارهای ساخت

قواعد JSX

• کامپوننت‌ها باید یک ریشه داشته باشند (از <div> یا <React.Fragment> استفاده کنید).
• به‌جای class از className استفاده کنید.
• استایل inline به‌صورت آبجکت جاوااسکریپت است (camelCase).
• عبارت‌های JS را داخل {} قرار دهید.

// یک کامپوننت ساده
function Hello() {
const name = "Piero";
return (
<div className="box">
<h2>سلام، {name}!</h2>
</div>
);
}

۲) درج متغیرها و عبارات در JSX
هر عبارت جاوااسکریپت را می‌توانید با آکولاد در JSX بنویسید.
const price = 129_000;
const user = { firstName: "Sara", lastName: "Karimi" };

export default function Card() {
return (
<section>

مبلغ: {price.toLocaleString("fa-IR")}

نام: {${user.firstName} ${user.lastName}}
{price > 100000 ? <strong>پیشنهاد ویژه!</strong> : null}
</section>
);
}

۳) شرطی‌سازی در JSX
از عملگر سه‌تایی، AND منطقی یا جداسازی منطق قبل از return استفاده کنید.
// 1) سه‌تایی
{isLoading ? <Spinner /> : <DataList />}

// 2) AND منطقی (برای نمایش شرطی کوتاه)
{error && 
خطا: {error.message}
}

// 3) جداسازی منطق
let content;
if (isLoading) content = <Spinner />;
else if (error) content = <ErrorView />;
else content = <DataList />;
return <div>{content}</div>;

۴) رندر لیست‌ها و کلیدها (keys)
برای عملکرد و جلوگیری از باگ در Diff، به هر آیتم یک key یکتا بدهید (از id پایدار استفاده کنید).
const items = [
{ id: "a1", title: "React" },
{ id: "b2", title: "JSX" },
{ id: "c3", title: "Hooks" },
];

function List() {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}

۵) پراپس‌ها، State و رویدادها
پراپس‌ها
function Button({ children, onClick, type = "button" }) { return <button type={type} onClick={onClick}>{children}</button>; }

// استفاده
<Button onClick={() => alert("clicked!")}>کلیک</Button>
State و رویدادها با Hooks
import { useState } from "react";

function Counter() {
const [count, setCount] = useState(0);
return (
<div>

شمارنده: {count}
<button onClick={() => setCount((c) => c + 1)}>افزایش</button>
</div>
);
}
کنترل فرم (Controlled Components)
import { useState } from "react";

function LoginForm() {
const [email, setEmail] = useState("");

const submit = (e) => {
e.preventDefault();
console.log({ email });
};

return (
<form onSubmit={submit}>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="ایمیل"
/>
<button>ارسال</button>
</form>
);
}

۶) Fragment، Portal و Context
Fragment
return ( <> <Header /> <Main /> </> );
Portal (رندر خارج از سلسله‌مراتب معمول)
import { createPortal } from "react-dom";

function Modal({ children }) {
return createPortal(
<div className="backdrop">{children}</div>,
document.getElementById("modal-root")
);
}
Context (مدیریت وضعیت سراسری سبک)
import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
const theme = useContext(ThemeContext);
return <div data-theme={theme}>Toolbar</div>;
}

۷) الگوهای حرفه‌ای با Hooks
بهینه‌سازی پرفورمنس: memo, useMemo, useCallback
import React, { useMemo, useCallback } from "react";

const Expensive = React.memo(function Expensive({ value }) {
console.log("render");
return <div>محاسبه: {value}</div>;
});

function Dashboard({ items }) {
const total = useMemo(() => items.reduce((s, x) => s + x, 0), [items]);
const handleClick = useCallback(() => console.log("clicked"), []);
return (
<div>

جمع: {total}
<button onClick={handleClick}>لاگ</button>
<Expensive value={total} />
</div>
);
}
کداسپلیتینگ با lazy و Suspense
import React from "react";

const Chart = React.lazy(() => import("./Chart"));

function Reports() {
return (
<React.Suspense fallback={<div>در حال بارگذاری...</div>}>
<Chart />
</React.Suspense>
);
}
Error Boundary
import React from "react";

class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(err, info) { console.error(err, info); }
render() {
return this.state.hasError ? <h3>خطایی رخ داد</h3> : this.props.children;
}
}

export default ErrorBoundary;

۸) الگوی «بالابردن State» و ترکیب‌پذیری
import { useState } from "react";

function Parent() {
const [value, setValue] = useState("");
return (
<>
<Input value={value} onChange={setValue} />
<Preview value={value} />
</>
);
}

function Input({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

function Preview({ value }) {
return 
پیش‌نمایش: {value}
;
}

۹) استایل‌دهی در JSX
گزینه‌ها: CSS Module، Styled Components، Tailwind، یا استایل inline.
// استایل inline

<div style={{ padding: 12, borderRadius: 8 }} />

// CSS Module
import styles from "./box.module.css";

<div className={styles.box}>Box</div>

۱۰) دسترسی‌پذیری (a11y) و SEO فرانت‌اند

استفاده از تگ‌های معنایی (<main>, <nav>, <header>)
مشخص‌کردن alt برای تصاویر
مدیریت فوکوس و نسبت کنتراست مناسب


۱۱) تست کامپوننت‌ها
// React Testing Library import { render, screen } from "@testing-library/react"; import Button from "./Button";

test("renders label", () =&amp;gt; {
render(&amp;lt;Button&amp;gt;سلام&amp;lt;/Button&amp;gt;);
expect(screen.getByText("سلام")).toBeInTheDocument();
});

۱۲) نمونهٔ اپ کوچک: فهرست کارها (Todo)
import { useState } from "react";

export default function TodoApp() {
const [items, setItems] = useState([]);
const [text, setText] = useState("");

const add = () =&amp;gt; {
if (!text.trim()) return;
setItems((prev) =&amp;gt; [...prev, { id: crypto.randomUUID(), text }]);
setText("");
};

const remove = (id) =&amp;gt; setItems((prev) =&amp;gt; prev.filter(i =&amp;gt; i.id !== id));

return (
&amp;lt;div className="todo"&amp;gt;
&amp;lt;h2&amp;gt;کارها&amp;lt;/h2&amp;gt;
&amp;lt;input value={text} onChange={(e) =&amp;gt; setText(e.target.value)} /&amp;gt;
&amp;lt;button onClick={add}&amp;gt;افزودن&amp;lt;/button&amp;gt;
&amp;lt;ul&amp;gt;
{items.map(i =&amp;gt; (
&amp;lt;li key={i.id}&amp;gt;
{i.text}
&amp;lt;button onClick={() =&amp;gt; remove(i.id)}&amp;gt;حذف&amp;lt;/button&amp;gt;
&amp;lt;/li&amp;gt;
))}
&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
);
}

۱۳) نکات حرفه‌ای برای پروژه‌های واقعی

ساختار پوشه‌ها بر اساس دامنه (Feature-Sliced) به‌جای تفکیک فایل‌محور.
TypeScript برای خودمستندسازی و ایمنی تایپی.
ESLint + Prettier برای یکپارچگی کد.
استفاده از React Query / SWR برای مدیریت سرور استیت.
Next.js برای SSR/SSG، بهبود SEO و رندر سمت سرور.


پرسش‌های متداول (FAQ)
تفاوت JSX و HTML؟ JSX یک سینتکس داخل جاوااسکریپت است؛ برخی ویژگی‌ها متفاوت‌اند (مثل className، onClick).

آیا بدون Babel می‌توان JSX نوشت؟ نه، JSX باید به جاوااسکریپت کامپایل شود (Vite/Next.js/CRA قدیمی).

راه بهینه‌سازی سرعت رندر چیست؟ کلیدهای پایدار، memo/useMemo/useCallback، تقسیم کد با lazy/Suspense و جلوگیری از رندرهای غیرضروری.




    


		
        

			        
    
 
]]>
					
		
		
			
		
		
		https://piero.ir/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b1%db%8c-%d8%a7%da%a9%d8%aa-react/
		
		
		Sun, 24 Sep 2017 11:33:05 +0000
				
		
		
		
		
		
		
		http://www.piero.ir/?p=781

					
										به آموزش  reactJS  (ری اکت) قسمت اول خوش آمدید
reactJS یک فریم ورک جاوا اسکریپت می باشد که توسط فیس بوک ساخته شده است . این فریم ورک از برترین فریم ورکهای جهان می باشد که دارای مزایای زیر می باشد.

بسیار سریع : برنامه هایی که با این فریم ورک ساخته می شوند بسیار سریع هستند زیرا reactJS بسیار بهینه ساخته شده است.
بسیار ماژولار : در صورتی که شما بسیار برنامه ای بزرگ دارید شما می توانید با reactJS به قطعات کوچکتر تبدیل کنید .
هماهنگ با داده های بزرگ : reactJS بسیار مناسب برای برناه هایی با داده های بالا است .
انعطاف بالا : با reactJS هرکاری که شما فکر کنید می توان انجام داد .
شهرت : وقتی شما تسلط بر این فریم ورک داشته باشید طبیعتا شرایط شما برای یافتن کار مناسب بسیار عالی می باشد .

لازم به ذکر است برای شروع نیاز است شما به زبان برنامه نویسی جاوا اسکریپت  مسلط باشید همچنین می بایست جاوا اسکریپت اکما اسکریپت ۶ را مسلط با شید که ما با استفاده از بابل آن را به نسخه های رایج مرور گرها تبدیل می کنیم . در لینکهای زیر شامل برترین منابع یادگیری جاوا اسکریپت است :
https://www.codecademy.com/learn/javascript
https://www.w3schools.com/js/default.asp
شروع آموزش reactJS
به کد زیر توجه نمایید :
var h1 = <h1>Hello world</h1>;
 
در حالت عادی جاوا اسکریپت به این کد خطا می گیرد :




The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.


به این ساختار JSX می گویند در ادامه به این مبحث به طور کامل می پردازیم.
JSX
JSX یک المنت است که تعریف می شود و می توان هر مقدار دلخواهی را درون آن قرار داد  مانند اعداد ، رشته ، HTML  ، شی ، آرایه و …
در واقع شما با jsx می توانید یک متغیر تعریف کنید و آن متغیر را به یک المنت html تبدیل کنید و در مواقع لزوم از آن استفاده کنید .
var navBar = <nav>I am a nav bar</nav>;
 
ذخیره شدن المنتهای HTML در JSX
var Pistons2004 = {
  center:        <li>Ben Wallace</li>,
  powerForward:  <li>Rasheed Wallace</li>,
  smallForward:  <li>Tayshaun Prince</li>,
  shootingGuard: <li>Richard Hamilton</li>,
  pointGuard:    <li>Chauncey Billups</li>
};
 
المنتهای jsx می نوانند دارای ویژگی باشند همانند html
و همانند html هم مقدار دهی می شوند .
<a href="http://www.yahoo.com">Welcome to the Yahoo</a>;
var title = <h1 id="title">Introduction to React.js: Part I</h1>;
همچنین می توانند تو در تو باشند و برای خوانایی بیشتر از فاصله ها یا رفتن به خط بعد استفاده کرد.
<a href="https://www.google.net"> <h1> Click me I am Goooogle </h1> </a>
 
ولی توجه کنید برای رفتن به خط بعد حتما باید کد ما در پرانتز قرار بگیرد:
var theGoogle = (
   <a href="https://www.google.net">
     <h1>
       Click me I am Gooooooooooogle
     </h1>
   </a>
 );
نکته مهم : شما فقط می توانید یک المنت پایه داشته باشید :
var paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);
در حالی که مثال زیر خطا می دهد :(به دلیل اینکه  تگهای p دارای ریشه نمی باشند )
var paragraphs = (
  <p>I am a paragraph.</p>
  <p>I, too, am a paragraph.</p>
);
برای رفع خطا بهتر است المتهایمان را درون یک <div> بگزاریم.(هر متغیر فقط می تواند یک تگ ریشه داشته باشد)
var blog = ( <div> <img src="pics/192940u73.jpg" />
<h1> Welcome to Dan's Blog! </h1>
<article> Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out. </article> </div> );
رندر کردن reactJS
حالا که به ساختار آن اشنا شدید بهتر است نحوه استفاده از react رایاد بگیرید .
var React = require('react');
var ReactDOM = require('react-dom');
// Copy code here:
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));
 
خروجی : Hello world
نگران نباشید الان به طور کامل براتون این مورد را شرح می دهیم:
در خط اول و دوم کتابخانه reactJS را فراخوانی کردیم.
ReactDOM چیست ؟
یک کتابخانه جاوا اسکریپت است که ویژگی های ری اکت را در خود جا داده است . البته در ادامه با این مفهوم به طور کامل آشنا می شویم ولی الان برمیگردیم به فایلمان همان گونه که می بینید تکه کد زیر خروجی مناسب می دهد :
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));
 
ReactDOM.render تابعی است که نوع jsx را خروجی می دهد به المنت دوم تابع در واقع این تابع دو آرگومان ورودی دارد :
ارگومان اول متغیر jsx را دریافت و در المنت دوم چاپ می کند .
توجه : شما می بایست در فایل html خود المنتی با ایدی app داشته باشید
  <main id=”app”></main>
بارگزاری متغیر reactJs
var React = require('react');
var ReactDOM = require('react-dom');

// Write code here:
var myList=(<ul>
    <li>info@piero.ir</li>
    <li>www.piero.ir </li>
    </ul>
    );
ReactDOM.render(myList,document.getElementById("app"));
خروچی :

info@piero.ir
www.piero.ir

همانگونه که دیدید متغیری تعریف نمودیم و در آن لیستی قرار دادیم و بعد آن را چاپ نمودیم.
نکته پایانی:
چون از المنت استفاده می کنیم درصورتی که یک کد دوبار نوشته شود دفعه دوم هیچ کاری انجام نمیدهد :
var hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

لطفا با ارایه نظرتتان مارا در بهبود مطالب وب سایت یاری نمایید با تشکر
با تشکر پیروز جنابی


    


		
        

			        
    
 
]]>