JSX و React: یاد بگیرید چگونه کد قابل نگهداری بنویسید – CheatSheet

1. معرفی
به کاوش ما در React خوش آمدید! در این مقاله، به ارزش React و اینکه آیا ارزش یادگیری امروز را دارد، خواهیم پرداخت. ما به بررسی عمیق این کتابخانه محبوب جلویی خواهیم پرداخت و توضیحات خود را ساده و قابل فهم نگه داریم. ما نمونههای کد مستندی را در طول مسیر برای کمک به شفافسازی مفاهیم ارائه خواهیم کرد. بنابراین، بیایید شیرجه بزنیم!
1.1. ارزش React: آیا ارزش یادگیری امروز را دارد؟
React اغلب بهعنوان یک کتابخانه توصیف میشود تا یک چارچوب، که به آن درجه بالایی از انعطافپذیری میدهد. این بدان معنی است که شما به راحتی می توانید آن را با کتابخانه ها یا ابزارهای دیگر در پشته توسعه وب خود ادغام کنید. علاوه بر این، اکوسیستم React شامل کتابخانههای مدیریت دولتی مختلف (مانند Redux و MobX) و راهحلهای مسیریابی (مانند React Router) است که به شما این قدرت را میدهد تا برنامههای خود را مطابق با نیازهای خاص خود سفارشی کنید.
React به طور مداوم تکامل یافته و با تغییرات در روند توسعه وب سازگار شده است که نشان دهنده طول عمر آن است. با معرفی ویژگی هایی مانند React Hooks و رندر همزمان، React همچنان جلوتر از منحنی است. Learning React امروزه به معنای سرمایه گذاری در فناوری است که احتمالاً برای سال های آینده مرتبط باقی خواهد ماند.
در نتیجه، React به دلیل محبوبیت، معماری مبتنی بر مؤلفه، عملکرد، انعطافپذیری و پتانسیل محافظت از آینده، یک مهارت ارزشمند برای یادگیری است. اگر به دنبال گسترش مجموعه مهارت های توسعه وب خود هستید، React قطعا ارزش بررسی دارد.
2. پیچ و مهره واکنش نشان می دهد
2.1. واکنش چگونه کار می کند؟
React بر اساس مفهوم کامپوننت ها ساخته شده است. کامپوننت ها تکه های کد قابل استفاده مجدد هستند که حالت خود را مدیریت می کنند و منطق رندر می کنند. برنامه های React معمولاً از چندین مؤلفه تشکیل شده اند که با هم کار می کنند تا یک تجربه کاربری یکپارچه ایجاد کنند. بیایید به مفاهیم کلیدی که باعث کارکرد React میشوند بپردازیم.
2.2. DOM مجازی
یکی از مهمترین جنبه های React استفاده از DOM مجازی است. DOM مجازی یک نمایش سبک در حافظه از DOM واقعی است که به React اجازه می دهد تا به روز رسانی های رابط کاربری را به طور موثر مدیریت کند. هنگامی که وضعیت یا پروپ های یک جزء تغییر می کند، React یک درخت DOM مجازی جدید ایجاد می کند و با استفاده از فرآیندی به نام “سازگاری” آن را با درخت موجود مقایسه می کند. این فرآیند حداقل مجموعه بهروزرسانیهای مورد نیاز برای همگامسازی DOM واقعی با DOM مجازی جدید را شناسایی میکند که منجر به عملکرد بهینه میشود.
2.3. اصلاح
آشتی فرآیندی است که از طریق آن React تفاوت بین DOM مجازی فعلی و DOM جدید را تعیین می کند. React از یک الگوریتم diffing برای انجام موثر این مقایسه استفاده می کند. پس از شناسایی تفاوت ها، React به روز رسانی های لازم را در DOM واقعی اعمال می کند و اطمینان حاصل می کند که فقط قسمت های تغییر یافته رابط کاربری به روز می شوند. این به بهبود عملکرد برنامههای React کمک میکند، بهویژه زمانی که با رابطهای کاربری پیچیده سروکار دارید.
2.4. اجزاء
همانطور که قبلا ذکر شد، کامپوننت ها بلوک های سازنده یک برنامه React هستند. دو نوع کامپوننت در React وجود دارد: کامپوننت های تابعی و کامپوننت های کلاس. مؤلفه های تابعی توابع ساده جاوا اسکریپت هستند که عناصری را توصیف می کنند که باید بر روی صفحه نمایش داده شود، در حالی که مؤلفه های کلاس کلاس های جاوا اسکریپت هستند که گسترش می دهند. React.Component
کلاس پایه و پیاده سازی a render()
روش.
2.5. دولت و لوازم
State و props دو روشی هستند که کامپوننت ها داده ها را در برنامه React مدیریت و ارسال می کنند. State برای ذخیره داده های محلی در داخل یک کامپوننت استفاده می شود، در حالی که props برای انتقال داده ها از اجزای والد به فرزندانشان استفاده می شود.
2.6. مدیریت رویداد
React یک روش ساده و ثابت برای مدیریت رویدادهایی مانند کلیکها، ارسالهای فرم یا ورودی صفحه کلید ارائه میکند. مدیریت رویداد در React شامل انتقال توابع کنترل کننده رویداد به عنوان پایه به کامپوننتها است که پس از وقوع رویداد اجرا میشوند.
3. رمزگشایی JSX
3.1. غواصی عمیق در JSX و نقش آن در React
JSX (JavaScript XML) یک پسوند نحوی برای جاوا اسکریپت است که به شما امکان می دهد کدهای HTML مانند را در فایل های جاوا اسکریپت خود بنویسید. JSX ایجاد و مدیریت ساختار رابط کاربری خود را مستقیماً در کد جاوا اسکریپت شما آسان می کند و در نتیجه پایگاه کد قابل خواندن و نگهداری بیشتری ایجاد می کند.
3.1.1. نحو پایه
در هسته خود، JSX به شما این امکان را می دهد که عناصر HTML مانند را در کد جاوا اسکریپت خود بنویسید. این عناصر بعداً قبل از اجرا در مرورگر توسط کامپایلری مانند Babel به اشیاء جاوا اسکریپت معمولی تبدیل می شوند.
در اینجا یک مثال از یک عنصر ساده JSX آورده شده است:
const element = <h1>Hello, world!</h1>;
3.1.2. تعبیه عبارات در JSX
یکی از قدرتمندترین ویژگی های JSX توانایی آن در جاسازی عبارات جاوا اسکریپت در نشانه گذاری است. برای انجام این کار، به سادگی عبارت را در پرانتزهای مجعد بپیچید ({}
).
مثال:
const name="John Doe";
const element = <h1>Hello, {name}!</h1>;
3.1.3. صفات و لوازم
عناصر JSX می توانند دارای ویژگی باشند، درست مانند عناصر HTML. این ویژگیها بعداً به عنوان props به اجزای React منتقل میشوند.
مثال:
const element = <img src="https://dev.to/aradwan20/my-image.jpg" alt="A beautiful scenery" />;
توجه: از آنجایی که JSX به جاوا اسکریپت نزدیکتر از HTML است، از قرارداد نامگذاری camelCase برای ویژگی های دارای چندین کلمه استفاده می کند، مانند onClick
و className
.
3.1.4. عناصر کودک و برچسب های خود بسته شونده
عناصر JSX می توانند عناصر فرزند داشته باشند، درست مانند HTML. با این حال، اگر عنصری هیچ فرزندی ندارد، باید با یک اسلش رو به جلو بسته شود (/
).
مثال با عناصر فرزند:
const element = (
<div>
<h1>Hello, world!</h1>
<p>Welcome to our website.</p>
</div>
);
مثال با برچسب خود بسته شدن:
const element = <img src="https://dev.to/aradwan20/my-image.jpg" alt="A beautiful scenery" />;
3.1.5. React Components و JSX
JSX در درجه اول برای تعریف ساختار و ظاهر اجزای React استفاده می شود. هر دو مؤلفه عملکردی و کلاسی می توانند عناصر JSX را برگردانند که سپس توسط React رندر می شوند.
مثال جزء عملکردی:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
مثال جزء کلاس:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
4. برگه تقلب “React Essentials”.
ما یک برگه تقلب مختصر “React Essentials” را در اختیار شما قرار می دهیم که مهمترین مفاهیم و ویژگی هایی را که باید هنگام کار با React بدانید را پوشش می دهد.
برای شروع استفاده از React در پروژه خود، باید React و ReactDOM را وارد کنید:
import React from 'react';
import ReactDOM from 'react-dom';
کامپوننت ها بلوک های سازنده یک برنامه React هستند. شما می توانید یک کامپوننت کاربردی مانند این ایجاد کنید:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
یا، می توانید یک جزء کلاس مانند این ایجاد کنید:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
برای ارائه یک جزء در DOM، از ReactDOM.render()
روش:
ReactDOM.render(<Welcome name="John" />, document.getElementById('root'));
Props به شما امکان می دهد داده ها را به اجزای خود منتقل کنید:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(<Welcome name="Jane" />, document.getElementById('root'));
State به شما امکان می دهد داده های محلی را در یک جزء ذخیره کنید. برای استفاده از state، باید از یک جزء کلاس استفاده کنید و حالت را در سازنده مقداردهی کنید:
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
render() {
return <div>{this.state.date.toLocaleTimeString()}</div>;
}
}
روش های چرخه عمر، مانند componentDidMount()
و componentWillUnmount()
، به شما امکان می دهد هنگام ایجاد، به روز رسانی یا حذف یک مؤلفه، اقداماتی را انجام دهید:
class Clock extends React.Component {
// ...
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({ date: new Date() });
}
// ...
}
React به شما امکان میدهد با استفاده از کنترلکنندههای رویداد، رویدادها، مانند کلیک روی دکمهها یا ارسالهای فرم را مدیریت کنید:
class ButtonClick extends React.Component {
handleClick() {
console.log('Button clicked!');
}
render() {
return <button onClick={this.handleClick}>Click me!</button>;
}
}
شما می توانید به صورت مشروط عناصر را بر اساس وضعیت یا props رندر کنید:
function Greeting(props) {
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign up.</h1>;
}
}
React Hooks به شما امکان می دهد از ویژگی های حالت و چرخه حیات در اجزای عملکردی استفاده کنید. رایج ترین قلاب ها هستند useState
و useEffect
:
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
return () => {
document.title="React App";
};
});
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
در این برگه تقلب مختصر «React Essentials»، مفاهیم و ویژگیهای کلیدی مانند وارد کردن React و ReactDOM، ایجاد کامپوننتها، رندر کردن مؤلفهها، استفاده از props، روشهای حالت و چرخه حیات، مدیریت رویدادها، رندر شرطی و React Hook را پوشش دادهایم. این مرجع سریع به شما کمک می کند تا اصول React را درک کنید و پایه ای برای ساخت برنامه های React خود ایجاد کنید. به یاد داشته باشید که در حین یادگیری و رشد به عنوان یک توسعه دهنده React به این برگه تقلب مراجعه کنید!
نتیجه
در نتیجه، JSX یک پسوند سینتکس قدرتمند برای جاوا اسکریپت است که به بخشی جدایی ناپذیر از توسعه React تبدیل شده است. توانایی منحصر به فرد آن برای ترکیب عناصر HTML مانند با عبارات جاوا اسکریپت، فرآیند ساخت و نگهداری رابط های کاربری را ساده می کند.
درک JSX و نقش آن در React بدون شک توانایی شما را در ساخت برنامه های قوی و جذاب از نظر بصری افزایش می دهد. قدرت JSX را در آغوش بگیرید و پتانسیل کامل React را در پروژه های خود باز کنید.