نگاهی به پروژه Hello World – بخش اول

hello world directory

نگاهی به پروژه Hello World – بخش اول

332 363 سینا

در این مقاله می خواهیم نگاهی به پروژه Hello World ساخته شده در آموزش قبلی انداخته و توضیحاتی پیرامون آن ارائه کنیم.

به این نکته توجه کنید که امکان دارد زمانی که شما این مقاله را می خوانید ساختار فایل ها توسط فریمورک React تغییر یافته باشد. اما کلیت کار یکی خواهد بود.

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

شاخه اصلی:

فایل مهم در این شاخه package.json است که توسط nodejs ساخته می شود و شامل مشخصات پکیج های نصب شده است. شما به صورت عادی نیازی به دستکاری این فایل ندارید.

 

شاخه npm-modules :

این فولدر مربوط است به منابع نصب شده توسط npm. در واقع شما زمانی که می خواهید از منبع خاصی استفاده کنید و آن را با دستور npm install نصب می کنید فایل های دانلود شده در این فولدر قرار می گیرد. توصیه می شود در صورتی که با nodejs و npm آشنایی زیادی ندارید تعدادی از مقالات وب سایت nodejs.ir را مطالعه کنید.

 

شاخه public :

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

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

manifest.json نیز فایلی است که توضیحاتی پیرامون پروژه در بر می گیرد. اگر این فایل را در هدر HTML قرار دهید، زمانی که در اندروید بخواید یک میانبر از وب سایت در صفحه اصلی قرار دهید کمک زیادی خواهد کرد. این فایل برای ما اهمیت زیادی در حال حاضر ندارد و شما می توانید با مطالعه این فایل کاملا متوجه اتفاقات رخ داده در آن شوید.

index.html

فایلی است که توسط مرورگر اجرا می شود. این فایل به این شکل است.

این فایل یک فایل ساده HTML است که با آن آشنا هستید. اما نکاتی نیز دارد که به آن ها اشاره می کنیم.

اگر دقت کنید در بخش هدر این فایل عبارت %PUBLIC_URL% را مشاهده می کنید. این عبارت مشخص کننده شاخه public پروژه است. در واقع اگر شما می خواهید فایلی را در HTML خود استفاده کنید آن را می بایست در فولدر public قرار داده و با استفاده از این عبارت به آن آدرس دهی کنید. اینجا می بینیم که فایل های favicon.ico و manifest.json از این طریق آدرس دهی شده اند.

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

بخش اصلی پروژه React شما در این <div> قرار خواهد گرفت. در ادامه خواهید دید که چگونه از این <div> استفاده خواهیم کرد.