react notes untill 46

• استیت state چیست :شی state جایی است که مقادیر خاصیت متعلق به کامپوننت را در آن ذخیره می کنید. هنگامی که شیء حالت تغییر می کند، کامپوننت دوباره render می شود. برای استفاده از state کافی است ابتدا هوک useState را import کنیم ، سپس از طریق این سینتکس state را می سازیم :

const [count, setCount] = useState(inistialstate : 0);

که این دو مقدار ، اولی مقدار state می باشد و دومی قابلیت پر کردن state را می دهد و InitialState هم مقدار اولیه state می باشد.برای تغییر مقدار state نیز به این صورت عمل می کنیم :

setCount(value: 10);

• رویداد event : یک event بهتر است به صورت camelCase نام گزاری شود ، تمامی event های خود react مثل به صورت camelCase می باشد . یک event هم یک تابع معمولی است که تعریف می شود و در موقع مد نظر ما فراخوانی و اجرا می شود.
• نکات جلسه 41: اعتبار سنجی Props: این اعتبار سنجی برای developer می باشد ، در صورتی که از type script آستفاده کنیم دیگه نیاز به استفاده از کتابخانه جدا برای هندل کردن type برای props ها نمی باشد
• نکات جلسه 42: استایل دهی : برای دادن استایل در jsx کار راحتی پیش رو داریم ، در صورتی که بخواهیم به صورت Inline بهش استایل بدیم به این صورت عمل میکنیم:

<div style={{color: 'red' }} > </div>

و همچنین در صورتی که بخواهیم به صورت جدا استایل بدیم یک object تعریف میکنیم و اونوقت اون object رو داخل style قرار می دهیم <div style={myStyle} > </div>

نکته قابل توجه اینه که اگر یک استایلیو به صورت کلی داخل یک کامپوننت import و ازش استفاده کنیم ، در این صورت این استایل برای کلیه کامپوننت های فرزند هم اعمال می شود.برای استفاده از استایل به صورت داینامیک نیز از این سینتکس استفاده می کنیم:

<div style={{color: count === 0 ? 'red' : 'blue' }}></div>

نکته نهایی در ارتباط با استفاده از className به صورت داینامیک می باشد که برای این کار یک بسته در Npm با همین نام وجود دارد و میتوان انرا نصب و از آن استفاده کرد.

• نکات جلسه 44 : css.modules : در صورتی که یک کامپوننت داشته باشیم ، مثلا با نام App اگر کنارش یک فایل با نام App.module.css بسازیم ، این css به صورت لوکال مخصوس App می باشد و جهت import کافی است به این صورت استفاده شود :

import styles from'./App.module.css';

در این حالت به صورت object استایل در اختیار ما قرار میدهد که جهت فراخوانی استایل مد نظر کافی است به صورت زیر عمل کنیم :

<div className={styles.divColor}></div>