https://virgool.io/feed/@yasi_a علاقه مند به برنامه نویسی،کتاب،سینما fa 2026-04-15 04:44:34 https://files.virgool.io/upload/users/1541787/avatar/f33QfG.jpg?height=120&width=120 https://virgool.io/@yasi_a https://virgool.io/@yasi_a/%DA%86%D8%B1%D8%A7-%D8%A7%D8%B2-%D9%86%D9%88%D8%B9-const-%D8%AF%D8%B1-state-%D9%87%D8%A7-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%85%DB%8C%DA%A9%D9%86%DB%8C%D9%85-%D9%88-%DA%86%D8%B7%D9%88%D8%B1%DB%8C-%D9%85%D9%82%D8%AF%D8%A7%D8%B1%D8%B4%D9%88-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1-%D9%85%DB%8C%D8%AF%D9%87%DB%8C%D9%85-b0ce2eu1yait سلام به همه،به نظرم خیلی خوبه که هرچند وقت یکبار یکی از سوالات مصاحبه ای ریکت رو که از خودم یا بقیه دوستان پرسیدن بررسی کنیم و جواب بدیم.یکی از سوالاتی که ممکنه ازمون پرسیده شهچرا در useState از const استفاده میکنیم چرا let نه؟؟و چرا با اینکه ما useState رو const تعریف میکنیم میتونیم مقدارشو تغییر بدهیم؟خب یک یاداوری از js داشته باشیم که اصلا let وconst چه فرقی میکرد باهم درصورتی که یک متغیر از نوع let باشه فقط تو scope مربوط به خودش قابل دسترسیه و اگر ازنوع const باشه اونم مثل let فقط تو scope خودش قابل دسترسیه با تفاوت اینکه const مقدار ثابت داره و نمیشه مقدارشو عوض کرد.یعنی مقدار اون متغیری که let تعریف شده هست رو میتونیم تغییر بدیم و علاوه بر اون refrence اون هم عوض میشه اصطلاحا میشه متغیر رو reassign کرد .اما متغیر از نوع const اینطوری نیست یعنی نمیتونیم مقدارشو تغییر بدیم خب پس در state ها در ریکت چطوری مقدار state که const تعریف شده تغییر میکنه؟؟فرض کنید یک state جدید در ریکت تعریف کردیم وقتی مقدار اون رو تغییر میدیم ( با تابع مورد نظرش مثل setCount برای count  )کامپوننت موردنظر re-render میشه و یک متغیر جدید با scope جدید ساخته میشه پس وقتی از const استفاده میکنیم یعنی نمیخوایم متغیر توی scope خودش دوباره reassign بشه نیازیم هم بهش نیست و درواقع ریکت دیگه کاری به مقدار قبلی state نداره. به خاطر همینه که اگر شما بخواین یک المنت به یک آرایه یا آبجکت که State تعریفش کردید اضافه کنید باید حتما یک کپی از المنت های قبلیش بگیرید و مقدار جدید رو بهش اضافه کنید چون scope جدید و متغیر جدید ساخته شده . Yasi Yasi Mon, 08 Jul 2024 18:07:50 +0330 https://virgool.io/@yasi_a/%D9%BE%D8%A7%D8%AF%D8%B2%D9%8E%D9%87%D8%B1%D9%90-%D8%B3%D9%85%DB%8C-%D8%A8%D9%87-%D9%86%D8%A7%D9%85-%DA%A9%D9%85%D8%A7%D9%84%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-dedoqqtrstna Shutterstockتا حالا شده اغلب کارهایی که انتظار داشتین به بهترین نتیجه منتهی بشه ولی نشده رو نصفه رها کنید؟خب اینجا معمولا پای سمی به نام کمالگرایی میاد وسط، مشکلی که به نظر میرسه تو رفتار اغلب ما ادمها دیده میشه چون میل به کمال از ازل در وجود انسان ها وجود داشته و از بین هم نرفته..اما ما در جهانی زندگی میکنیم که خیلی چیزها 100 درصد نیست از جمله خودمون در اغلب موارد، پس انتظار بهترین بودن میتونه مارو دچار افسردگی و دلزدگی کنه حتی تو انجام کارهای روزمره.مسئله بعدی اینه که حتی اگه نابغه هم باشیم نهایتا تو دو، سه یا چهار تا رشته میتونیم بهترین باشیم و در بقیه موارد این توانایی رو نداریم پس توقع همیشه بهترین بودن از خودمون اصلا منطقی نیس اما خلاص شدن از این جریان هم به این سادگیا نیست.خب راه حل چیه؟؟ به نظر میرسه پادزهر اصلی این سَم، معمول گرایی باشه و به جای کمالگرایی از مفهومی به نام تلاش برای به کمال رسیدن استفاده بشه .تو این مقاله که خیلی سعی میکنم خلاصه باشه از مطالب نوشته شده در کتاب مشهور "چگونه کمالگرا نباشیم" نوشته "استفان گایز" استفاده شده که واقعا به خود من در تلاش برای رسیدن به معمول گرایی کمک زیادی کردهبا یک نقل قول از دانشمند معاصر فیزیک شروع میکنیم:وقتی انتظارات کسی به صفر میرسد به معنای واقعی شکرگزار انچه که دارد میشود (استفان هاوکینگ).به چه چیزایی نباید اهمیت بدیم تا یک معمول گرا باشیم:کمتر به نتایج اهمیت بدین،فقط شروع کنین.کمتر به مشکلات اهمیت بدین بیشتر به اینده فکر کنید که باوجود این مشکلات چه پیشرفتی میتونید داشته باشید یعنی خیلی دنبال حل مشکلاتی که توانایی حلشو و ندارین نباشین.کمتر به این که مردم چه فکری میکنن اهمیت بدید گاهی فقط خوشحالی خودتون رو در نظر بگیرید.بیشتر از اینکه به درست بودن کار اهمیت بدین به این فکر کنید که اون کار باید انجام بشه فعلا درست و غلط بودنش مشخص نیست.کمتر به شکست فکر کنید و بیشتر به پیروزی فکر کنید.کمتر به زمان بندی انجام کار اهمیت بدین ، انجام دادن کار اهمیت بیشتری از زمان انجامش داره و نتیجه مهمه.مسئله مهم اینه که گاهی هرچی بیشتر به افکار منفی اهمیت بدید تا تلاش کنید که پاکش کنید اون مشکلات و افکار منفی برجسته تر میشه و کل زندگیتونو در بر میگیره پس گاهی فقط باید رها کرد.برای تمرین، یک کار کوچیک که خیلی وقته به خاطر صد در صد نبودنِ نتیجه انجامش نمیدین و بدون فکر کردن به نتیجه فقط شروعش کنید.یکم واقع گرایی چاشنی کارتون کنید به جای رویاپردازی، بیاین با یک مثال ادامه بدیم مثلا بد نیست یک نگاهی به روند پیدایش و توسعه برنامه اینستاگرام داشته باشیم:ورژن های متفاوت اینستاگرامحالا عکس بالا توسعه ورژن های متفاوت اینستاگرام تا 2015 هست الان که ورژن 2023 خیلی قابلیت های جدیدی هم مثل استوری و لایو و... بهش اضافه شده ^_^فک کنم مثال عینی بالا بهتر این مفهوم رو جا بندازه که هیچ چیزی از اولش کامل نیست یا هر موجودی حتی ما ادما، اگر سازنده اینستاگرام معمول گرا نبود و اصطلاحا دُز کمالگراییش خیلی بالا بود هیچوقت دنبال ساخت اینستاگرام نمیفتاد و منصرف میشد الان این موفقیت رو نداشت اصلا.مسئله ی کمالگرایی تاثیری زیادی هم رو ارتباطات اجتماعی داره ، مثلا افرادی که کمالگرا هستن انتظار دارن روابطشون بدون مشکل پیش بره و انتظار اشتباه از طرف مقابل ندارن در حالی که در جهان واقعی اینطوری نیست و انسان موجودی هستش که ورودش به این زمین با یک اشتباه (هبوط) بوده. مشکل دیگه ای که پیش میاد اینه که ما کمالگراها همش میخوایم همه چی رو کامل کنیم حتی ادمارو، درحالی که ما خودمون هم کامل نیستیم و این نگاه هم برای ما هم برای طرف مقابل اذیت کننده است.سم کمالگرایی کشنده تر از این حرفاست...سال 1994 کرت کوبین ستاره راک گروه موسیقی نیروانا به خاطر کمالگرایی خودکشی کرده و یادداشت زیر رو قبل خودکشی نوشته:گاهی احساس میکردم که قبل از ورود به صحنه باید از دستگاه ثبت زمان رفت و برگشت استفاده میکردم، نهایت تلاش را کرده ام که ارزشش رابدانم خدایا باور کن ارزشش را میدانم اما انچه انجام میدهم کافی نیست.البته ناگفته نمونه که این خواننده مشکلات افسردگی و اعتیاد در گذشته داشته ولی حتما اگر کمالگرا نبود میتونست خیلی راحتتر با نقص هاش کنار بیاد وشاید هیچوقت خودکشی نمیکرد.کلا ما کمالگراها همش درگیر ناکافی بودن همه چیز هستیم، زمان خواب کافی نیست، وقت کافی ندارم برم باشگاه، پول کافی ندارم و...ما درگیر ای کاش ها هستیم و زمان حال رو رها میکنیم و همش برمیگردیم به گذشته، این دقیقا قدرت تلاش برای آینده رو ازمون میگیره اما راه حلش اینه که جمله فعلا کافی نیست رو جایگزین جمله هرگز کافی نیست کنیم.طرح انجام برنامه های زندگیتون درحد کمال رو فراموش کنید و سطح توقعاتتون رو بیارید پایین تا بتونید شروع کنید، اگر سطح انتظاراتتون خیلی بالا باشه شاید اصلا شرایط شروع رو نداشته باشید و اینطوری که خیلی از کارهای ما کمالگراها ناتمام میمونه و هی از این شاخه به اون شاخه میپریم...این قسمت میتونه ادامه داشته باشه... Yasi Yasi Sat, 14 Oct 2023 17:12:11 +0330 https://virgool.io/@yasi_a/%D9%85%D9%86%D8%B8%D9%88%D8%B1-%D8%A7%D8%B2-jsx-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%DB%8C%D8%B9%D9%86%DB%8C-%DA%86%DB%8C-%D9%88-%DA%A9%D8%AF%D8%B4-%DA%86%D8%B7%D9%88%D8%B1%DB%8C-%D8%A7%D8%AC%D8%B1%D8%A7-%D9%85%DB%8C%D8%B4%D9%87-n3qpaje8mhl8 با این شروع میکنیم که JSX یا JavaScript XML یک سینتکس هست که بهمون این امکان رو میده که کد html و javascript رو باهم بنویسیم یا به عبارت دیگه ساختار XML رو شبیه HTML میکنه.اما مرورگر این کد jsx رو نمیخونه و یطورایی باید براش ترجمه بشه و کد رو به ( )React.createElement تبدیل کنه که این تبدیل میتونه استفاده از TypeScript باشه یا با استفاده از مفسر Babel.ساده ترین راهش استفاده و نصب ابزار create-react-app هست که خودش این تبدیل کد رو انجام میده و بانصب اون Babel هم نصب میشه که بتونه کد React رو بخونه و تبدیل به ES5 کنه و در نهایت تو مرورگر اجرا بشه.حالا اگه بخواهیم المنت اضافه کنیم ولی نه از طریق jsx باید چیکار کنیم ؟یک راه قدیمی که توصیه نمیشه اینه که هردفعه که میخواهیم المنت ایجاد کنیم از React.createElement استفاده کنیم که سینتکسش به صورت زیره:React.createElement(type,{props},children);که اینجا type میشه نوع تگ html که میخواهیم اضافه کنیم یا component هایی که میخوان اضافه شن. همچنین prop ها همون id,class, ها هستن که پراپرتی های تگ هستن در واقع.در ادامه children ها همون متن یا خط در واقع محتوایی هستن که میخواهیم نمایش داده بشه. اما یک مثال آشنا بزنیم واسش:import React from 'react'; const Example = () => { return React.createElement('h1', { style: { color:'black' } }, 'Hello World'); }; ReactDOM.render(React.createElement(Example), document.getElementById('root'));اما خب اینجا همه چی خوب بود پس دیگه چرا jsx اومد جایگزین این روش شد؟اولا که هردفعه که بخواهیم یک المنت جدید اضافه کنیم باید از یک React.createElement جدید استفاده کنیم که کارمون رو سخت میکنه هم چنین کدش اصلا خوانا نیست و خوندش سختتره.برای درک بهتر تفاوت های بالا به نوشتن همون کد بالا با jsx دقت کنید:import React from 'react' function Example() { return ( <div> <h1>Hello World</h1> </div> ) } export default Exampleخب کد بالا خیلی خواناتره همونطور که مشخصه..حالا کد jsx چطوری توسط مرورگر ترجمه میشه؟بالا گفتیم به یک مفسر نیاز هست که کد jsx رو به جاوا اسکریپت اصلی که مرورگر میتونه بخونه ترجمه کنه اصطلاحا، که این مفسر اسمش Babel هست.عکس زیر شاید بتونه بهتر مفهوم رو منتقل کنه ^ _ ^چرخه ترجمه jsx اصلا Babel چی هست؟مفسر یا ابزار Babel به شما اجازه میده که با جدیدترین سینتکس جاوا اسکریپت کد بزنید یا از فریم ورک ها و کتابخونه هایی مثل React استفاده کنید چون در صورت نبود Babel، خیلی از مرورگر ها نمیتونن این کد هارو بخونن و مرورگر فقط نسخه ES5 جاوا اسکریپت رو میتونه بخونه و کدشو اجرا کنه.خلاصش اینه که Babel خودش میاد از createElement استفاده میکنه و این تبدیل رو انجام میده و دیگه نیازی نیست که مثل روش قدیمی بالا خودمون هردفعه که میخواهیم المنت ایجاد کنیم از createElement استفاده کنیم.نمونه ی کد jsx زیر رو در نظر بگیرید میخواهیم ببینیم babel اینو چطوری ترجمه میکنه.import React from 'react' function App (){ return ( <div> <p>This is a list</p> <ul> <li>List item 1</li> <li>List item 2</li> </ul> </div> ); };اینجا Babel میاد jsx رو به شکل زیر کامپایل میکنه و اول از تابع createElement استفاده میکنه.import React from 'react' function App() { return React.createElement( 'div', null, React.createElement('p', null, 'This is a list'), React.createElement( 'ul', null, React.createElement('li', null, 'List item 1'), React.createElement('li', null, 'List item 2'))); }الان این تابع ابجکت زیر رو بر میگردونه که کدش plain javascript هست یعنی سینتکس جاوا اسکریپت بدون کتابخونه و فریم ورک، جاوا اسکریپت خام هست کدش اصطلاحا.{ 'type': 'div', 'key': null, 'ref': null, 'props': { 'children': [ { 'type': 'p', 'key': null, 'ref': null, 'props': { 'children': 'This is a list' }, '_owner': null }, { 'type': 'ul', 'key': null, 'ref': null, 'props': { 'children': [ { 'type': 'li', 'props': { 'children': 'List item 1' }, }, { 'type': 'li', 'props': { 'children': 'List item 2' }, } ] }, '_owner': null } ] }, '_owner': null }ریکت میاد از این ابجکت استفاده میکنه و المنت هارو از روش میخونه و به virtual Dom اضافه میکنه و بعدش به Dom اصلی اضافه میشه.برای توضیح بیشتر المنت هاشو یکی یکی معرفی میکنیم:المنت type: به ما این امکان رو میده که نوع المنتی که میخواهیم render بشه رو مشخص کنیم میتونه کامپوننت ریکت باشه یا تگ های h1 و div و...المنت prop: پراپرتی تگ ها در اون نوشته میشه و میتونه null هم باشه.المنت children: محتوای تگ ها که میتونه ارایه یا متن یا هرکدوم باشه.المنت key : یونیک هست و مثلا وقتی تو ریکت روی یک ارایه map میزنید باید برای هر المنت یک key مشخص کنید.المنت ref: میتونه refrence از Dom باشه و دسترسی مستقیم به همون المنت تو Dom.المنت typeof$$ :این بخش آبجکت رو به عنوان ریکت شناسایی میکنه و برای محافظت در برابر حملات xxsاستفاده میشه. (حملات xxsمیتونه دزدیدن رمز عبور ، ارسال درخواست‌های جعلی و در دست گرفتن مدیریت محتوای htmlباشه)حالا اگر بخوهیم کد jsx رو بدون استفاده و یا import کردن ریکت بنویسم باید چکار کنیم؟تو ورژن React v17. 0 این امکان به ما داده شده که بدون 'import React from 'react ما میتونیم کد jsx بنویسیم یعنی دیگه اون فرایند تبدیل به createElement و اینا رو نداره . مثال زیر یک نمونه از نوشتن متن Hello world به این روش هست:import {jsx as _jsx} from 'react/jsx-runtime'; function App() { return _jsx('h1', { children: 'Hello world' }); }در ادامه چند تا ازقوانین و سینتکسی که باید رعایت بشه تو jsx رو معرفی میکنیم: چطوری میتونیم چند تا jsx اضافه کنیم؟؟import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <p>This is first JSX Element!</p> <p>This is another JSX Element</p> ); }; const rootElement = document.getElementById('root'); ReactDOM.render(<App />, rootElement);البته شما اگه الان بیاد این کد رو اجرا کنید ارور میده ، چرا؟چون باید تگ های شما یک والد داشته باشن حتما توریکت یعنی به شکل زیر :import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <p>This is first JSX Element!</p> <p>This is another JSX Element</p> </div> ); }; const rootElement = document.getElementById('root'); ReactDOM.render(<App />, rootElement);البته یک راه دیگه هم که هست اینه که از fragment ها تو ریکت استفاده کنید یعنی به شکل زیر:import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <> <p>This is first JSX Element!</p> <p>This is another JSX Element</p> </> ); }; const rootElement = document.getElementById('root'); ReactDOM.render(<App />, rootElement);این راه جدیدتره و استفاده ازش توصیه میشه کارتون و استایل دهی به تگ ها رو راحتتر میکنه.چطوری از کد javascript در jsx استفاده کنیم؟کد مربوط به javasccript باید تو اکولاد قرار بگیره تا خونده شه :const App = () => { const number = 10; return ( <div> <p>Number: {number}</p> </div> ); }; حالا تو این اکولاد چیا میتونه قرار بگیره :یک رشته یا string مثل 'hello' مثلاعدد ارایهابجکتفراخوانی تابع که مقداری رو برمیگردونهاستفاده از mapچیا نمیتونن قرار بگیرن تو jsx؟ **موارد پایین عموما میرن بالای برنامه قبل از return قرار میگیرن نه jsx**حلقه ها مثلا حلقه for while تعریف یا declare کردن متغیر ها گزاره های شرطی مثل ifابجکت هامفهوم jsx و استفاده از اون از موارد حیاتی برای یادگیری ریکت هست و هم چنین ازش در مصاحبه های فرانت زیاد سوال میشه که خوندن مطالب بالا میتونه کمک کننده باشه. Yasi Yasi Mon, 09 Oct 2023 10:56:26 +0330 https://virgool.io/@yasi_a/%D9%85%D9%81%D9%87%D9%88%D9%85-virtual-dom-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-%DA%86%DB%8C%D9%87-%D9%88-%D9%81%D8%B1%D9%82%D8%B4-%D8%A8%D8%A7-dom-%DA%86%DB%8C%D9%87-wyxhr8qneatu اول با این شروع میکنیم که اصلا Dom چیه و چیکار میکنه و بعدش بهتر میتونیم مفهوم Virtual Dom رو متوجه بشیم.وقتی یک صفحه html توی مرورگر بارگذاری میشه مرورگر میاد یک مدل شی گرا یا همون Dom ازش درست میکنه که ساختارش شبیه درخته و اشیاء موجود توصفحه میشن گره های این درخت .یک نمونه درخت Dom در واقع Dom میاد کل UI صفحه رو شبیه یک درخت واسه خودش در نظر میگیره، حالا فایده اش چیه؟اگر با زبان جاوا اسکریپت اشنایی داشته باشید میدونید که مثلا واسه تغییر استایل یک تگ یا المنت ما میام همین Dom یا Document Object Model رو تغییر میدیم و در واقع اپدیتش میکنیم، مثال زیر رو در نظر بگیرید که ما رنگ المنت h1 رو با گرفتنش از Dom تغییر میدیم:<html> <body> <h1 id='demo'>The Document Object</h1> const myElement = document.getElementById('demo'); myElement.style.color = 'red' </body> </html>هردفعه که تغییری در در المنت های Dom اتفاق میفته، Dom از اول رندر و اجرا میشه و در کتابخونه ای مثل ریکت که تغییرات در UI زیاد انجام میشه باید با هر تغییر درخت Dom دوباره رندر یا اجرا شه که این باعث پایین اومدن سرعت اجرا میشه حالا راه حل چیه؟؟راه حل استفاده از Virtual Dom هست که الان در مورد اون هم توضیح خواهیم داد.خلاصش اینه که هردفعه که تغییری تو المنت ها ایجاد میشه به جای Dom اون تغییرات روی Virtual Dom اجرا میشه خب الان سوال پیش میاد که دیگه چه کاریه از همون Dom استفاده میکردیم دیگه :))اما نکته اینجاست تو عملکرد Virtual Dom اینطوریه که هردفعه که المنت جدید به UI اضافه میشه یک Virtual Dom به شکل درخت واسش ایجاد میشه( یادتون باشه که هر المنت یک گره ی درخت بود).با هر تغییری در المنت ها یک Virtual Dom جدید براساس اون تغییرات ایجاد میشه و با Virtual Dom قبلی مقایسه میشه و Virtual Dom میاد این تغییرات بهینه رو روی Dom اعمال میکنه در واقع فقط اون المنت های خاص در Dom اصلی بروز میشه نه همش، اینطوری دفعات تغییر و در نهایت re-render یا دوباره اجرا شدن Dom کاهش پیدا میکنه و سرعت اجرا هم میره بالا. Yasi Yasi Sat, 23 Sep 2023 15:47:48 +0330 https://virgool.io/@yasi_a/%D9%86%D9%88%D8%B4%D8%AA%D9%86-%D8%AA%DA%AF-%D9%87%D8%A7%DB%8C-html-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-semantic-%D8%AF%D9%82%DB%8C%D9%82%D8%A7-%DB%8C%D8%B9%D9%86%DB%8C-%DA%86%DB%8C-wrysqgrdgd2g semantic html codeنوشتن تگ های html به صورت semantic دقیقا یعنی چی و به چه دردی میخوره؟کد های html میتونن به دوشکل نوشته بشن.یک نوعش اینه که ما برای استایل دادن به تگ ها از کلاسها یا id استفاده میکنیم و خب نام کلاس ها باید طوری انتخاب بشن که با کاربردشون منطبق باشن البته این اجباری نیست ولی روی خوانایی کد تاثیر زیادی داره و اصولا در سطوح حرفه ای به این شکل هست.نوع اول در مثال زیر:<div class='header'> <div class='section'> <div class='article'> <div class='figure'> <img> <div class='figcaption'></div> </div> </div> </div> <div class='footer'></div>در صورتی که ما در html5 تگ های داریم مثلا مخصوص نوشتن کدهای header و یا footer و...در واقع تگ هایی که فهمیدن کاربردشون از روی اسمشون خیلی راحتتره مثلا مثال بالا تو کد زیر به صورت semantic نوشته شده:<header></header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer></footer>همونطور که در کدبالا میبینید هر بخش صفحه، المنت مخصوص خودشو داره و یجورایی بخش های مختلف صفحه دسته بندی شده است در حالی که مثال بالا که ما از المنت div برای نوشتنش استفاده کردیم رو خودمون با کلاسها دسته بندیش کردیم و یطورایی با نام کلاس ها المنت ها از هم متمایز شدن.البته استفاده از المنت های بالا منجر به استایل دهی نمیشه، یعنی مثلا استفاده ازتگ header به معنای این نیست که استایل اون هم خودبه خود به محتوا اعمال میشه وهم چنان باید در css به اونا استایل داد.از مزیت های دیگه ای که نوشتن کد به صورت semantic داره اینه که موتورهای جست‌و‌جوی وب راحت‌تر میتونن محتوا رو ایندکس کنن و هم چنین تگ ها بار معنایی دارن و خوندن کد توسط توسعه دهنده های وب دیگه هم اسون تر میشه.برای اشنایی بیشتر المنت های sematic رو کاملش میکنیم که میتونید ازشون استفاده کنید:<article> <aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>که کاربرد هر تگ از روی همون نام تگ مشخصه.در نهایت شما میتونید از هردو روش استفاده کنید ولی روش semantic جدیدتر و مزایایی که بهتون گفتم رو هم داره... Yasi Yasi Tue, 19 Sep 2023 15:19:22 +0330 https://virgool.io/@yasi_a/%D8%B2%D8%A8%D8%A7%D9%86-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%DB%8C%D8%A7-%DA%A9%D8%AF-declarative-%DB%8C%D8%A7-imperative-alfpiuvxsvvk همون طور که میدونین ما زبانهای برنامه نویسی زیادی داریم که هرکدومشون سینتکس های مربوط به خود شون و دارن، اما بحث ما بیشتر در مورد زبان های برنامه نویسی هست که در طراحی و برنامه نویسی سایت از اونها استفاده می شه.اما موضوع امروز اینه که ایا زبان برنامه نویسی مورد نظر نتیجه گرا هست اصطلاحا، یعنی کسی که کد رو میخونه یا میبینه تا نتیجه کد رو نیبینه متوجه این نمیشه که کد چطوری کار میکنه یعنی Declarative بودن زبان.یا با خوندن و یا دیدن اون کد میشه فهمید که کد چطوری کاری میکنه و اصطلاحا چگونگی انجام رو تو خودش توضیح داده یعنی imperative بودن زبان.بعضی زبانها هم مثل جاوا اسکریپت به هردو شکل قابل پیاده سازی هستن که انتخاب با خود برنامه نویس هست، البته ناگفته نمونه که معمولا کد declarative کوتاهتتره و خب این برای برنامه نویسا مهمه.در مورد کتابخانه ها هم در ادامه راجع به react js و این که جزو کدوم دسته هست توضیح خواهم داد.شاید مثال زیر بتونه بهتر این تفاوت رو نمایش بده که با زبان javascript نوشته شده.اگر با حلقه for اشنایی داشته باشید متوجه میشین که کد زیر داره هر المنت ارایه ای(i) که به عنوان ورودی میدین رو در 2 ضرب میکنه و بعدش ما ازش میخوایم نتیجه رو در console نمایش بده.//imperative code const doubleMapImperative=numbers=>{ const doubled=[ ]; for(let i =0 ; i< numbers .length ; i++){ doubled.push(numbers[i]*2) } return doubled; }; console.log( doubleMapImperative(numbers:[2 , 3 , 4])) //[ 4 , 6 , 8 ]اما کد زیر رو اگر با map اشنایی نداشته باشید یا مثلا قبلا با زبان های imperative مثل ++c یا هر زبان دیگه ای کار نکرده باشید متوجه چگونگی انجام کد نمیشین ، این چگونگی شمارش در ارایه رو در خود کد مشاهده نمی کنید که این کارو map انجام میده در واقع در اونها از کلمات رزروشده استفاده میشه.//declarative const doubleMapDeclarative=numbers.map(n=>n*2); console.log(doubleMapDeclarative(numbers:[2 , 3 , 4])) //[ 4 , 6 , 8 ]اما کتابخونه react js از کدوم نوعه؟بیشتر بخش ها نوع دوم یعنی کد ها به شکل declarative هستن و در بیشتر بخش ها ما از کلمات رزرو شده برای کد زنی استفاده میکنیم.امیدوارم مطلب مفید بوده باشه:)) Yasi Yasi Wed, 13 Sep 2023 11:05:58 +0330 https://virgool.io/@yasi_a/%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-react-js-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-k1esp5yzxnja سلام این اولین پست من در ویرگول هست .احتمالا کسایی که راجع به برنامه نویسی خصوصا بخش فرانت تحقیق می کنن اسم کتاب خونه ی React js به گوششون خورده...اما واقعا React js چیه و چرا باید ازش استفاده کرد؟؟قبل از هرچیز باید با زبان Javascript اشنایی داشت تا کاربرد این کتاب خونه رو بهتر فهمید. زبان Javascript یک زبان قدرتمند و کم حجم هست که عمدتا برای ایجاد وب سایت های تعاملی و پویا استفاده میشه که React js یکی از کتابخونه های این زبان هست.اما اگر کسی به زبان Javascript اشنایی داشته باشه از میزان قدرتمند بودن این زبان کم و بیش خبر داره، حالا مهمترین سوال اینه که وقتی کسی Javascript بلده، چرا باید از این کتابخونه استفاده کنه؟یکی از مهم ترین کاربرد های این کتابخونه اینه که می تونین از کامپوننت های (component) ساخته شده در اون چند بار استفاده کنید.اما کامپوننت چیه دقیقا؟تصور کنید که در حال کدنویسی یک وب سایت هستید، در اکثر موارد وقتی به صفحات مختلف در سایت منتقل میشیم بخش بالای سایت یا همون navbar که تقریبا همون منوی سایت میشه در تمام صفحات سایت هست حالا اگر React js بلد نباشید باید در هر صفحه که کدنویسی اون رو انجام میدین کد مربوط به navbar رو بنویسید اما اگر بلد باشید میتونید کد مربوط به navbar رو در یک فایل با پسوند js ذخیره کنید (که ما بهش میگیم کامپوننت) و هر وقت بهش نیاز داشتید ازش استفاده کنید.مورد بالا میتونه حجم کد رو به میزان زیادی خصوصا در پروژه های بزرگ کاهش بده که یکی از دغدغه های برنامه نویس ها از گذشته تا الان هست.سعی کردم خیلی ساده توضیحش بدم، امیدوارم مفید باشه... Yasi Yasi Mon, 21 Aug 2023 21:38:48 +0330