اموزش های دوره یی و پروژه محور ری اکت جی اس

اموزش پایه یی – بخش اول

ساختار پوشه بندی و فایل های ریکت جی اس

در ابتدا نیاز است تا پروژه یی بر مبنای ریکت جی اس ایجاد کنیم برای دیدن نحوه نصب و راه اندازی ریکت جی اس به پست اموزش نصب و راه اندازی ریکت جی اس می توانید بروید و یک پروژه نمونه که در این اموزش نام پروژه ما awsome  می باشد بسازید

آموزش قبلی کاملا روش پایه یی و براساس نودجی اس و npm می باشد

برای اشنایی بیشتر با نود جی اس می توانید به پست نود جی اس چیست بروید و برای آشنایی بیشتر با npm می توانید به پست npm چیست بروید

بعد از نصب و راه اندازی ریکت جی اس و ساخت اولین پروژه که در اینجا نام پروژه awsome می باشد با رفتن به پوشه یی که همان نام اپلیکیشن می باشد با تصویر زیر که روت یا همان شاخه اصلی پروژه می باشد رو به رو می شوید

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

که حاوی سه پوشه و سه فایل می باشد

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

فایل package.json

این فایل از نوع جیسون می باشد و حاوی تمامی اطلاعات پروژه می باشد اعم از نام پروژه ، توضیحات پروژه، پکیج های نصب شده و… می باشد

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

به دلیل اینکه پروژه ما ، تازه ساخته شده است به غیر از پکیج های مورد نیاز برای اجرای ریکت جی اس ، پکیج دیگری را مشاهده نمی کنید که در بخش dependencies ( وابستگی ها ) می توانید ببینید که نسخه های 16 و 2 ریکت و ریکت دام و ریکت اسکریپت را شامل می شود که به دین منظوراست که این نسخه ها از این سه پکیج در این پروژه استفاده شده است و این نشان دهنده این می باشد که این پروژه برای اجرا به این پکیج ها وابستگی دارد

فایل های readme و gitignore که برای اطلاعات بیشتر می باشند و نیازی  به آنها نداریم

پوشه node_modules

این پوشه شامل تمامی ماژول ها ( پکیج ها ) مورد نیاز می باشد که ساخته شده است تا این پروژه به اجرا در آید

هر پکیجی را که شما توسط npm یا yarn یا …. سایر مدیریت پکیج ها نصب کنید در این پوشه ذخیره می شوند تا برای اجرای پروژه استفاده گردند البته می توانید بدون نیاز به این کار و از طریق اضافه کردن اسکریپت ها به پروژه نیز از پکیج ها و … استفاده نمایید

البته هنگامی که شما این پروژه را در جایی دیگر نیز بخواهید ادامه دهید یا به شخصی دیگری بدهید با وجود فایل package.json  و دستور npm install به راحتی تمامی پکیج های مورد نظر دانلود و در این پوشه ذخیره می شود این می توانید به تمیز بودن پروژه و سریع به اجرا در آوردن پروژه کمک شایانی کند

پوشه public

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

این پوشه خود حاوی سه فایل می باشد

manifest.json که شامل خلاصه یی درباره پروژه می باشد که شامل نام یا ایکون و… است که در فایل index.html استفاده می شود البته می توانید این فایل را حذف و از تگ های html مستقیم استفاده نمایید

favicon.ico که ایکون یا تصویری می باشد که در تب های مرورگر ها استفاده می شود و به عبارتی ایکون برای وب سایت می تواند استفاده شود

index.html که تنها فایل html پروژه می باشد و به عبارتی view یی می باشد که به صورت داینامیک در مرورگر تغییر می کند برای شروع و یاد گیری فعلا نیازی  به تغییر دادن این فایل ندارید و شاید تغییر دادن عنوان صفحه برای این بخش کافی باشد. این فایل کاملا یک فایل استاندارد html وب است که شامل تگ های head و body و کد های جاوا برای اجرا می باشد.

در این فایل شما کدیی هایی مبنی بر استفاده از ui نمی بینید به دلیل اینکه قرار است ری اکت کنترل این بخش را بر عهده بگیرد و فقط یک تگ div را میبینیدکه ای دی root دارد و قرار است توسط ری اکت به صورت داینامیک محتوایش تغییر کند

این تگ و ای دی را به خاطر داشته باشید به دلیل اینکه در ادامه آموزش ها با این تگ کار خواهیم داشت

پوشه src

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

پوشه src همان پوشه سورس می باشد و پوشه یی می باشد که در ادامه ساخت پروژه بسیار با این پوشه کار خواهیم داشت

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

برای ابتدا ، فایل index.js است که به اجرا در می اید و این پروژه که با نام پروژه دمو می توان در نظر گرفت به اجرا در می آید و تصویر زیر را به هنگام اجرای این پروژه در خروجی می توانید ببینید

اموزش دوره ای ری اکت جی اس - ساحتار پوشه ها و فایل ها

پروژه ری اکت به صورت پیش فرض به فایل index.js در پوشه src یا همان سورس برای اجرا اشاره می کند

در فایل index.js می توانید در خط زیر ای دی root را ببینید اکه که توسط ریکت دام ، به المنت div که ای دی root را شامل می شود ، به ماژول App که در فایل App.js نوشته شده است پیوند خورده است

ReactDOM.render(<App />, document.getElementById('root')); 

react-dom در ابتدا در پکیج react موجود بود اما در نسخه های بعدی react-dom جدا و خود به صورت یک پکیج درآمد و می توان ریکت دام را اینگونه توضیح داد که برای رندر کردن کمپوننت ها یا همان ماژول ها در دام ها ( المنت ها ) استفاده می شود  و این دو به هم وابسته می باشند

فایل های App.css و App.js و logo.svg  فایل هایی هستند که برای طراحی این پروژه استفاده شده اند

فایل App.test.js ( Unit Test ) که برای تست استفاده شده است

serviceWorker.js

این اسکریپت در بک گرند مرورگر اجرا می شود و می تواند ترافیک صفحه را مانیتور کند و یا نوتیفیکیشن ها را مدیریت کند و….

بدون این فایل نیز پروژه شما می تواند اجرا شود و این فایل برای اجرا شدن سریع تر می باشد