react notes 1 untill 35

• نکات جلسه 9: ریکت : در جاوا اسکریپت یه مشکلی این بود که برای هر مرورگر باید کدهای متفاوتی می نوشتیم .

تنها کاری که جاوا اسکریپت در واقع انجام میدهد ویرایش dom می باشد .

• نکات جلسه 10 : امری و اعلامی : در جاوا اسکریپت همه چیز به صورت امری است و مستقیم ما dom را عوض میکنیم یعنی وقتی المنتی تغییر میکنه در جاوا اسکریپت مستقیم dom تغییر میکند ، اما در react تغییر dom را خود react انجام میدهد که به این مدل اعلامی می گویند به همین خاطر این رویکرد ، سرعت بیشتر و هزینه کمتری را دارد
• نکات جلسه 11: ساختار کامپوننت : قابلیت مهم react ساختار کامپوننت می باشد که مزیت اصلی کامپونتت قابلیت استفاده در جاهای مخلف می باشد . در واقع می توان از کامپونتت های اماده مانند material ui / antd / .. نیز استفاده کرد .
• نکات جلسه 12: ساختار داده یک طرفه : یکی دیگر از قابلیت های اصلی ریکت ، جریان داده یک طرفه است ، در واقع تا الان بررسی کردیم که ریکت یک کتابخانه جاوا اسکریپتی است که اجازه استفاده بهتر از جاوا اسکریپت را میده، قابلیت دیباگ راحت ، استفاده از کامپونتت و ... که تمامی این موارد باهم virtual dom را به وجود اورده اند به معنای دام مجازی که ریکت بر اساس این دام مجازی ، دام واقعی را دستکاری میکند . درواقع ریکت میاد و ابتدا دام مجازی را تغییر میدهد و بعد دام مجازی و دام واقعی را باهم مقایسه میکند و تنها چیزی که تغییر داده شده است را عوض میکند نه کل صفحه و دام . پس در ابتدا state تغییر میکند و سپس کامپونتت و سپس دام مجازی و در نهایت دام واقعی تغییر داده میشود.
• نکات جلسه 15: آشنایی با ابزار vite : برای استفاده از ریکت از npx استفاده نکنیم بهتره چون به صورت آنلاین از ریکت استفاده میکنه و انرا نصب نمیکند. بهتر است از npm استفاده کنیم و تنها با وارد کردن کامند

npm -g create-react- app

به راحتی ریکت را نصب میکنیم .و برای حذف نیز npm unistall -g create-react-app را وارد میکنیم . ابزار vite نیز برخی از مشکلات create-react-app را برطرف کرده و سرعت را افزایش داده است.

• نکات جلسه 16: ساخت اولین پروژه: بعد از نصب react-app برای به وجود اوردن پروژه مد نظر کافی است تایپ کنیم create-react-app projectName و پروژه بالا میاید. در صورتی که بخوایم از template خاصی استفاده کنیم کافی است create-react-app projName --template typescript را تایپ کنیم و سپس برای اجرای پروژه کافی است تایپ کنیم npm start
• نکات جلسه 17 : آشنایی با ساختار برنامه : در پوشه node-modules وابستگی های پروژه قرار دارد که ریکت خودش هندل میکنه و ما نیازی بهش نداریم و وقتی پروژه را برای کسی میفرستیم این پوشه را لازم نیست براش بفرستیم و خودش دانلود میکنه . در پوشه public یک فایل Index.html هست که تنها html داخل پروژه می باشد .فایل manifest.json نیز اطلاعات مربوط به pwa را در خود نگه داری میکند. فایل robot.txt نیز فایلی است که به خزنده هایی مانند گوگل مواردی را اطلاع میدهد که مثلا داخل فلان فایل نرود .داخل دایرکتوری src نیز تعدادی فایل می باشد ، فایل app.js تنها کامپوننت فعلی ما می باشد که زیرش نیز فایل تست مربوط به این فایل می باشد و فایل Index.js وظیفه رندر کردن کامپوننتها توسط react dom را دارد. فایل report.webvitals که جهت برداشت لاگ میباشد.فایل Package.json درواقع metadata پروژه میباشد که داخل ان در قسمت eslint نیز مربوط به وارنینگ در حال اجرای برنامه می باشد و همچنین در قسمت production نیز تنظیمات مربوط به اجرای پروژه بعد از publish شدن را انجام میدهیم.در فایبل package.lock.json نیز تمامی وابستگی هایی که npm نصب میکند را داخل خودش نمایش میدهد.
• درباره jsx : به ما اجازه میدهد که html را در جاوا اسکریپت قرار دهیم . در واقع در پشت صحنه توسط babel تمامی کدها تبدیل به جاوا اسکریپت می شود .در کل 4 تا قانون در استفاده از jsx وجود دارد : 1- در صورتی که بخواییم کلاس css بدیم از className استفاده میکنیم 2- در jsx حتما باید یک المنت والد وجود داشته باشد 3- نحوه کامنت گزاری فرق میکند 4- هر المنتی که باز میکنیم باید بسته شود حتی در صورتی که المنت single باشد . هر موقع بخوایم js داخل jsx بنویسیم باید از { } استفاده کنیم و تنها یک expression میتوانیم بنویسیم به این معنی است که تنها یک خط که با ; به پایان میرسد ، همچنین میتوانیم که تابع را نیز قرار دهیم داخل {} . برای استفاده از شرط در jsx میتوان به سادگی از turnay operator استفاده کرد به این صورت که در صورت درست بودن user سمت چپ پرانتز اجار شده و در صورت غلط بود سمت راست اجرا میشود.

user ? () : ()

همچنین برای حلقه زدن داخل jsx میتوان از این syntax استفاده می کنیم که غیر از map از موارد دیگه ای نظیر filter نیز میتوان استفاده کرد

{user.map(x => ( <div>{x.firstName}<div> ))}

• کامپوننت : سینتکس یک کامپوننت خام به این صورت است :

const myComp = () => {

return (

<div> <p> heloo </p> </div>

)

}

export default myComp;

که در نهایت این کامپوننت را استخراج میکنیم تا بتوانیم در جای دیگه اونو Import کنیم و ازش استفاده کنیم.

پس وقتی بخوایم از یک css داخل ان استفاده کنیم کافی است انرا ساخته و درون کامپوننت ادد کنیم.وقتی از strictMode استفاده میکنیم به ما لاگ های متتنوعی میدهد.جهت استفاده از یک کامپوننت داخل کامپوننت دیگه ای کافی است ازش export گرفته و داخل کامپوننت مد نظر import شه و در نهایت مثل یک المنت داخل jsx اضافه میکنیم </user> .

• پراپز props چیست : بسیار راحت برای دریافت props به این شکل عمل میکنیم:

const myComp = (props ) => {

return (

<div> <p> heloo {props.name} </p> </div>

)

}

export default myComp;

همچنین برای ارسال props که از سمت کامپوننت والد به فرزند ارسال میشه ، به این صورت هست که هر چند تا بخوایم میتونیم ارسال کنیم و همشونو میتونیم سمت فرزند دریافت کنیم و برای ارسالش به این شکل عمل میکنیم:

<myComp name={"ali"} />

نکته قابل توجه این است که props ها تغییر پذیر نیستند و به هیچ عنوان نباید در کامپوننت دیگر آنرا تغییر دهیم به دلیل عدم امکان پیگییری توسط ریکت می باشد . نکته دیگه اینه که تنها در حالتی که state و prop تغییر کنه render مجدد اتفاق میفته اما prop نباید در کامپوننت دیگه تغییر کنه.نکته دیگه این است که props ها میتونن انواع نوع داده ای داشته باشن و ارسال بشن .همچنین موردی داریم به اسم prps chlidren که به این صورته که موقع ارسال props اگه به این شکلی چیزیو بفرستیم ، میاد و با نام children در قسمت کامپوننت فرزند دریافت میشه :

<myComp>

"hello" </myComp>

و در نهایت در قسمت مربوط به کاممپوننت فرزند جهت خواند این props از این روش استفاده میکنیم :

props.children