0. آشنایی با JSX در React

سلام. صدامو داری؟

شاید در روز صفرم انتظار می رفت که بیام بگم اصلا React چی هست! چرا باید ازش استفاده کنیم! چه مزیت هایی داره؟ و... به دو دلیل از این مباحث پرهیز میکنم. اول اینکه به اندازه کافی توی نت درباره ی این مسائل صحبت شده. دوم اینکه اگر اینجا هستی احتمالا این موارد رو میدونی خودت.

پس ما به شیوه "شیرجه زدن وسط کد" کارمون رو از اولین برنامه یعنی Hello My Friend شروع میکنیم( من دنبال جهانی شدن نیستم ، فقط میخوام با کدها دوست بشم).

احتمالا اولین برنامه رو با Create-react-app ساختید. بعد از پاک کردن قسمت های اضافی در فایل App.js با همچین کدی مواجه خواهید بود.

function App() {
return ( <h1> Hello My Friend </h1> );}
export default App; //1

میخوایم به خط دوم توجه کنیم. خیلی شبیه به یه کد HTML هست. اما در واقع یه مدل پیشرفته تر از اون هست که یه جورایی اومده JavaScript رو با HTML قاطی کرده. چرا مهمل میبافی امیر!! این که هیچ علائمی از جاوااسکریپ نداره! خب الان می بینیم این چیزی که من میگم HTML نیست(خط دوم) چطوری با جاوااسکریپت غنی شده!

function App() {
const user = &quotAmir&quot
return ( <h1> Hello  {user} </h1> );}
export default App; //2

توی خط دوم یک متغییر تعریف کردیم به اسم user. و توی خط چهارم اومدیم اون متغییر رو با استفاده از { } فراخوانی کردیم. خب این چیزیه که توی HTML نداشتیم. به این حالت ترکیب شده ی HTML با JS میگن:

JSX

که خیلی کار کردن رو برای ما راحت میکنه و میتونیم مستقیما داخل کدهای HTML بیایم و کد JS هم بزنیم. اونم خیلی ساده ، فقط کافیه کدهای JS رو داخل براکت قرار بدیم. به مثال زیر دقت کنید:

function App() {
const num1 =3; 
const num2 =2;
return (<h1>The result is:  {num1+num2}</h1>);}
export default App; //3

در ابتدا دوتا متغییر عددی تعریف کردیم و توی خط چهارم داخل براکت اون دو عدد رو با هم جمع کردیم( جمع کردن دو متغییر یک عمل JS ای هست برای همین داخل براکت گذاشتیم).

حالا همین کد آخر رو یکم بهینه میکنیم و برای عملیات جمع یک تابع تعریف میکنیم.

function App() {
const num1 =3;
const num2 =2;
            return (<h1>The result is:  { Plus(num1,num2) }</h1>);
}
function Plus(Int1,Int2){ 
           return Int1+Int2;  }
export default App; //4

به این ترتیب ما تابع Plus رو ایجاد کردیم که دو پارامتر ورودی داره (Int 1 , Int 2) و مقدار برگشتی این تابع هم حاصل جمع دو پارامتر می باشد. به این ترتیب در خط چهارم ما تابع رو فراخوانی کردیم و دو مقدار عددی رو به عنوان آرگومان به تابع ارسال کردیم( در JS به این متغییر ها Props گفته میشود ، اصطلاح پارامتر و آرگومان بیشتر در زبان های بر پایه ی C استفاده می شود). خروجی این کد با قبلی فرقی نخواهد داشت. پس به این ترتیب فراخوانی کردن یک تابع رو در JSX و ارسال Props به اون رو یاد گرفتیم).

همین کار ( یعنی استفاده از یک تابع به جای استفاده مستقیم از متغییرها رو برای مثال 2 هم میشه استفاده کرد، به این صورت که:

function App() {
const user ={
           fname : &quotAmir&quot,
           lname : &quotAbadani&quot
           };
return ( <h1> Hello  {   UserInfo( user.fname , user.lname ) } </h1> ) ; }
function UserInfo(  firstName ,  lastName ) {
                    return firstName + &quot &quot +lastName; }
export default App; //5

تابع UserInfo رو تعریف کردیم که دو پارامتر ورودی داره (firstname , lastName) و مقدار برگشتی تابع هم ترکیب همین دو پارامتر هست به اضافه ی یه فاصله بینشون. فراخوانی تابع هم که مثل همون حالت قبل انجام شده.

پ.ن : در کدهایی که میذارم ، بخش جدید یا مهمش رو بولد و مورب میکنم که بدونید در هر مثال شاه بیتش چیه! ( کد نوشتن مثل شعر نوشتنه برام :) ) - - هر کد هم یه شماره میزنم (به صورت کامنت در خط آخر) که توی قسمت های بعدی اگر خواستم رفرنس بدم به مثال ها راحت باشیم.

مطالعه ی بیشتر:

1. در مثال شماره 5 ، USER رو به صورت یک شی (Objetc) تعریف کردم. میتونید درباره ی برنامه نویسی شی گرایی (object oriented programming) مطالعه کنید . اگر بحثش سنیگین بود براتون فعلا واردش نشید. فقط در همین حد نحوه تعریف کردن شی و استفاده کردن ازش رو یاد بگیرید در مثال آخر. منبع پیشنهادی:
   https://www.w3schools.com/js/js_objects.asp
2. یک سری اصطلاحات استفاده شد مثل پارامتر(Parameter) ، آرگومان (arguments) ، فراخوانی (Call) ، مقدار برگشتی(Return Value) . لازم هست مفهوم دقیق و تفاوت هاشون رو بلد باشید.

پیگیرم باش!