React یک کتابخانه جاوا اسکریپتی که در سال 2013 توسط Facebook معرفی شد و توانست در سال های گذشته رشد بسیار خوبی در میزان استفاده و علاقه برنامه نویسان به خود پیدا کند. به سال معرفی دقت کنید از سال 2013 معرفی شده ولی معروفیت آن از سال 2017 به بعد بوده و بعد از آن به عنوان محبوب ترین روش SPA ها در طراحی وب اپلیکیشن ها و وب سایت ها مطرح شد.
کتابخانه jQuery کار خودش را به خوبی انجام میداد. از سال 2006 که معرفی شد کار کردن با جاوا اسکریپت را خیلی ساده تر کرد و باعث رشد و پیشرفت خیلی سریع تر دنیای وب شد. تا سال 2020 حدود 20 میلیون وب سایت از jQuery داخل خود استفاده کرده اند. تعداد بسیار زیادی ابزار و کامپوننت به کمک jQuery نوشته و توسعه داده شده است.
خوب با این توضیحات چرا jQuery در حال خارج شدن از دنیای برنامه نویسی وب می باشد و جای خود را به روش های جدید این حوزه می دهد؟
هر تکنولوژی و محصولی دارای طول عمر کم یا زیاد می باشد که بالاخره زمان آن به سر میرسد. در صنعت خودروسازی همیشه این رو دیده ایم که یک مدل ماشین بسیار خوب و مشتری پسند پس از مثلا یک دهه تولید از خط تولید شرکت کنار گذاشته می شود و خودروی دیگری جایگزین آن می شود که در ابتدا اصلا محبوبیت مدل قبلی را ندارد و مشتری پسند نیست. ولی حرکت بازار به سمت ارائه مدل های جدید است و مشتری رفته رفته با مدل های جدید ارتباط بهتری برقرار می کند. در SPA ها هم نکته همین است و jQuery دیگر به دوران بازنشستگی خود نزدیک شده است با همه خوبی هایی که دارد و شاید بسیاری از ما پروژه های خیلی خوب و قوی با آن پیاده سازی کرده باشیم. ولی زمان آن رسیده است که علم و دانش خود را با SPA ها بروزرسانی کنیم.
از کلمه SPA ها زیاد استفاده کردیم. Single Page Application ها از آنجایی مطرح شدن که نیاز بود یک وب سایت به صورت Full Ajax داشته باشیم. یعنی اینکه کاربر با هر کلیک روی منوها یا لینک ها، وب سایت postback و مجدد بارگذاری نشود و کاربر احساس کند که تنها در یک صفحه کار می کند و آن صفحه است که مدام بروزرسانی می شود و به کاربر نمایش داده می شود.
با استقبال کاربران از این مدل وب سایت ها باعث رشد بیشتر SPA در سال های اخیر شده است. در SPA ها سه روش و کتابخانه معروف داریم که به ترتیب اسم به صورت زیر می باشند :
این سه روش جز بهترین و معروف ترین روش ها در زمینه طراحی وب سایت ها به صورت spa می باشند.
Angular یک فریم ورک جاوا اسکریپتی می باشد که توسط گوگل در سال 2011 ارائه شده است. انگولار به صورت یک فریم ورک می باشد و امکانات اولیه آن بسیار کامل می باشد و با زبان TypeScript کدهای آن نوشته می شود.
Vue یک فریم ورک جاوا اسکریپتی می باشد که درسال 2014 توسط یک تیم نرم افزاری معرفی شده است. در Vue ما ترکیبی از کدهای Angular و React را داریم به همراه برخی کدهای اختصاصی Vue که به شما کمک می کند وب سایت خود را پیاده سازی کنید.
React که خود را یک جاوا اسکریپت می باشد و در سال 2013 معرفی شده است توانسته بسیار محبوب تر از دو روش رقیب خود باشد و حدود 60 درصد از بازار این سه را در اختیار خود قرار دهد. ما می توانیم ری اکت را با زبان جاوا اسکریپت یا تایپ اسکریپت توسعه بدهیم.
تا اینجای کار یک مرور و معرفی کوتاه از SPA ها را داشتیم. در ادامه می خواهیم با React کار کنیم و درباره مزایای ری اکت صحبت کنیم.
ری اکت محبوب ترین روش در spa ها می باشد و بسیاری از تیم های نرم افزاری انتخاب اولشان ری اکت می باشد. این محبوبیت بی دلیل نیست و دلایلی مانند سرعت اجرای بالاتر، یادگیری ساده تر و عدم تغییرات زیرساختی باعث شده که شرکت ها و تیم های نرم افزاری به ری اکت اعتماد داشته باشند.
ری اکت چیست ؟
ری اکت یک JS Library می باشد که می توانیم به کمک آن بخش front را پیاده سازی کنیم.
حالا ما می خواهیم ری اکت را یاد بگیریم. برای شروع چه نیازمندی های علمی باید داشته باشیم.
نیازمندی های شروع یادگیری ری اکت ؟
برای ری اکت با دو نرم افزار زیر را روی سیستم خود نصب کنید تا بتوانید پروژه ایجاد کنید و آن را توسعه بدهید.
نرم افزار Visual Sudio Code که برای کدنویسی نیاز می باشد و یکی از محبوب ترین محیط های برنامه نویسی می باشد که سادگی می توانیم از سایت ماکروسافت آن را دانلود و نصب کنیم. حجم فایل دانلودی حدود 70 مگابایت می باشد و به صورت free و رایگان است. بعد از دانلود آن را اجرا کنید و در صفحه دوم یا سوم مرحله نصب یک سری سوالات زیر هم پرسیده شده است که کنار آنها امکان تیک زدن وجود دارد. لطفا سوالات را بخوانید و من توصیه می کنم که تیک همه آنها را بزنید که در ادامه کار را برای خودتان ساده تر می کند. مثلا روی یک فولدر راست کلیک کردید گزینه open with vs code را نمایش بدهد یا نه ؟
نرم افزار دیگری که باید نصب کنید nodejs می باشد که آن را هم از سایت nodejs.org دانلود و نصب کنید. nodejs کمک می کند که پروژه ها بر بستر آن اجرا شوند و بتوانیم به کمک آن پکیج های مورد نیاز خود را نصب و در ادامه استفاده کنیم.
در نصب nodejs نکته خاصی وجود ندارد و با نصب nodejs ویژگی node package manager هم به سیستم شما افزوده می شود و می توانید به کمک npm پکیج های خود را مدیریت کنید.
الان آماده ایم که یک پروژه ری اکت ایجاد کنیم و کار برنامه نویسی را شروع کنیم.
میدانیم که با ری اکت می خواهیم چه کاری انجام دهیم. این نکته مهمی است که دقیق بدانیم که ری اکت قرار است چه کاری انجام دهد و هدف استفاده از آن چیست.
ما در گذشته پروژه ها را به صورت monolithic (یکپارچه) ایجاد می کردیم. یعنی یک پروژه مثلا ASP.NET MVC ایجاد می کردیم که هم بخش کدهای به اصطلاح server side و هم کدهای client side در یک پروژه و کنار هم نوشته میشد.
کدهای server side می شود پیاده سازی منطق پروژه که فرایندها را داخل آن پیاده سازی می کنیم. کدهای client side ها می شود همان ظاهر پروژه که کاربر با آن ارتباط برقرار می کند و اطلاعات را به صورت فرم های طراحی شده مشاهده یا ثبت می کند.
در سال های گذشته از مدل monolithic مانند jQuery کمتر استفاده می شود و پروژه ها به دو بخش جدا از هم با نام server side و client side تبدیل شده اند. ما با ری اکت بخش client side یا همان frontend را پیاده سازی می کنیم و برای ارتباط با سمت سرور باید API فراخوانی کنیم.
امیدوارم توضیحات کامل بوده باشد و علت استفاده از ری اکت را کامل متوجه شده باشیم.
حالا باید بتوانیم در مرحله اول یک پروژه ری اکت ایجاد کنیم. برای ایجاد پروژه ابتدا یک فولدر برای پروژه های خودتون (بهتر است غیر از درایو c باشد) مثلا با نام MyProjects ایجاد کنید.
حالا در مسیر فولدر پروژه ها باید command prompt را اجرا کنید و سپس دستور زیر را اجرا کنید :
npx create-react-app sample-app
در دستور بالا npx جز syntaxt می باشد.
بخش create-react-app یک پکیج برای ایجاد پروژه های ری اکت می باشد که یک تمپلیت پروژه خالی برای ری اکت ایحاد می کند
sample-app هم نام پروژه ری اکت خواهد بود که باید با حروف کوچک باشد و پوشه ای با این نام ساخته می شود در مسیر جاری و سپس فایل ها و فولدرهای پروژه داخل آن ایجاد می شود.
ما می توانیم پروژه ری اکت را به صورت دستی خودمان ایجاد کنیم که در ابتدای کار نیازی نیست و تفاوتی چندانی ندارد که پروژه را به صورت دستی خودمان ایجاد کنیم یا با پکیج cra این کار را انجام دهیم.سس
نکته مهم این است که برای ایجاد پروژه ری اکت باید به اینترنت متصل باشید و بسته به سرعت اینترنت شما مدل زمانی بین یک تا پنج دقیقه به صورت میانگین زمان میبرد تا پروژه به صورت کامل ایجاد و فایل های مرتبط با آن از روی اینترنت دانلود شود.
حالا می توانید روی فولدر پروژه خود کلیک راست کنید و open with Code را کلیک کنید یا اینکه visual studio code را اجرا کنید و از منوها open folder را کلیک و فولدر پروژه خود را انتخاب کنید.
می توانید از منوی vs code بعد از باز کردن پروژه روی Terminal کلیک کنید و دستور npm start را تایپ کنید تا پروژه در مرورگر پیش فرض سیستم شما در پورت 3000 اجرا شود.
شما می توانید پروژه های ری اکت را با زبان جاوا اسکریپت یا تایپ اسکریپت کار کنید که روش مرسوم بیشتر استفاده از جاوا اسکریپت است. هر کدام از زبان ها مزایای خود را دارد که بیشتر زبان جاوا اسکریپت (البته نسخه جدید جاوا اسکریپت که همان ECMAScript است) استفاده می شود.
ساختار اولیه پروژه در ری اکت را مشاهده می کنید که می خواهیم بدانیم هریک از این فایل ها چه کاری در پروژه انجام می دهند :
- node_modules : یک پوشه محلی برای نگه داری پکیج هایی هست که در ابتدای ایجاد پروژه دانلود شده اند یا خودمان در ادامه با دستور پکیجی مثلا bootstrap را نصب کرده ایم. همه فایل های مربوط به پکیج ها داخل این پوشه نگهداری می شوند. ما عموما با محتویات داخل این پوشه ارتباط مستقیمی نداریم. یعنی به صورت دستی فایلی داخل آن اضافه یا کم نمی کنیم و با دستورات نصب و حذف پکیج ها این کار را انجام می دهیم. نکته مهمی این است که حجم اولیه این فولدر حدود 230 MB می باشد که شامل هزاران فایل جاوا اسکریپت می باشد. وقتی شما می خواهید پروژه ری اکت خود را برای فرد دیگری ارسال کنید نیازی نیست پوشه node_modules را نیز ارسال کنید. پروژه را بدون فولدر node_modules ارسال می کنید و فردی که پروژه را از شما می گیرد فقط کافی است پروژه را با vs code باز کند و در ترمینال دستور npm install را اجرا کند تا همه پکیج ها مورد نیاز دانلود شده و پوشه node_modules مربوطه ایجاد شود.
- public : این پوشه محلی برای نگهداری فایل html و فایل های دیگری مانند favicon یا فایل manifest.json می باشد و ما در حین انجام پروژه کار خاصی با این فولدر نخواهیم داشت. در داخل این فولدر فایل index.html مهم ترین فایل می باشد که همان spa ما می باشد و همه صفحات در داخل همین صفحه index.html ساخته و نمایش داده می شوند.
- src : مهم ترین بخش پروژه می باشد که ما فایل ها و توسعه پروژه خود را در داخل این پوشه انجام می دهیم و که در داخل خود یک فایلjs دارد که شروع کننده پروژه می باشد و می گوید کدام کامپوننت در ابتدا به کاربر نمایش داده شود.
- .gitignore : فایلی است که برای سورس کنترل گیت می باشد که مشخص می کند چه فولدر و چه فایل هایی توسط git نادیده گرفته شود.
- json : فایل اصلی پروژه می باشد که پروژه بر پایه آن ساخته می شود. در داخل این فایل موارد زیر مشخص می شود :
- نام پروژه
- ورژن جاری پروژه
- پکیج هایی که در این پروژه نصب شده اند
- دستورات نحوه اجرا و build کردن پروژه
- و سایر جزئیات و تنظیمات دیگر
این فولدر و فایل هایی که در ساختار پروژه ری اکت با هم مشاهده کردیم مهم ترین فایل های در ابتدای پروژه می باشد که به مرور تعداد آنها مخصوصا در پروژه src افزایش پیدا خواهد کرد.
تا به اینجا با ری اکت آشنا شدیم. دانستیم که پیش نیازهای علمی و نرم افزاری برای شروع ری اکت چه موارد هستتد. یک پروژه ری اکت ایجاد کردیم و ساختار پروژه React را با هم بررسی کردیم.
حالا می خواهیم با مفاهیم مهم در ری اکت آشنا شویم و ببینیم هرکدام چگونه ایجاد و استفاده می شوند.
مهم ترین مفهوم در React بحث کامپوننت ها می باشد. در ابتدا باید بدانیم کامپوننت چیست و چگونه می توانیم به کمک کامپوننت ها پروژه خود را توسعه بدهیم.
منبع آموزش: وب سایت آموزش آنلاین دوره های برنامه نویسی devtube
