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

react-hello-world

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

1366 729 سینا

در ادامه آموزش قبلی ما سایر شاخه های پروژه ساخته شده را بررسی می کنیم.

شاخه src

فایل های داینامیک و اصلی پروژه React در این شاخه قرار می گیرند. همانطور که مشاهده می کنید فایل های css و js (یا jsx) در این شاخه هستند. در این بخش از توضیح فایل های css خود داری می کنیم و به ترتیب به توضیح فایل های js خواهیم پرداخت.

index.js

اینجا اولین جایی است که ری اکت به آن مراجعه می کند. ساختار index.js به این شکل است.

برای اضافه کردن کامپوننت های آماده در jsx از import استفاده می کنیم. در 5 خط ابتدایی این فایل مشاهده می کنید که کامپوننت های مختلفی import شده اند. در ایمپورت کردن کامپوننت ها به این نکات باید دقت کنیم.

  • اگر کامپوننت توسط npm نصب شده باشد کافی است نام کامپوننت را در ادامه دستور import بنویسید. (مانند 2 خط ابتدایی این کد). شما اگر پوشه node_modules را باز کنید دو فولد react و react-dom را که در اینجا ایمپورت شده اند مشاهده خواهید کرد. (نگران نباشید به زودی به این سیستم عادت خواهید کرد.)
  • در صورتی که کامپوننت توسط خود شما نوشته شده باشد و در شاخه src قرار گرفته باشد شما می بایست به شکل محلی به آن آدرس دهی کنید. همانطور که در خطوط 3 تا 5 این فایل مشاهده می کنید فایل هایی از شاخه src ایمپورت شده اند.

حال به توضیح تک تک این کامپوننت ها می پردازیم.

کامپوننت React کامپوننت اصلی است که jsx به آن نیاز دارد و می بایست ایمپورت شود.

کامپوننت ReactDom همانطور که از نام آن مشخص است برای دستکاری DOM صفحه استفاده می شود. در خطوط انتهایی این فایل نحوه استفاده از آن دیده خواهد شد.

در این دو خط فایل های index.css و App.js ایمپورت شده اند. همانطور که می بینید در ایمپورت فایل های js نیازی به نوشتن پسوند آن ها نیست. فایل App.js را در ادامه خواهیم دید.

در این قسمت فایل registerServiceWorker که در این فولدر قرار دارد ایمپورت شده است. این فایل مربوط به کش کردن داده ها و افزایش سرعت لود وب سایت شما است. در صورتی که شخصی قبلا وب سایت شما را باز کرده باشد دفعات بعدی با سرعت خیلی بالاتری وب سایت شما را خواهد دید. حتی در صورتی که اینترنت کاربر قطع باشد نیز سایت شما برا او لود خواهد شد. استفاده از این فایل اجباری نیست و ما نیز از توضیحات بیشتر آن خودداری می کنیم. برای اطلاعات بیشتر می توانید به https://goo.gl/KwvDNy مراجعه کنید.

در این خط از ( )ReactDom.render استفاده کرده ایم. آرگومان اول این متد کامپوننتی است که می خواهیم استفاده کنیم و آرگومان دوم المنتی از صفحه HTML است.

<App /> آرگومان اول استفاده شده در این متد است. استفاده از کامپوننت ها در jsx به همین ترتیب است. یعنی کامپوننت ها به شکل تگ های HTML قابل استفاده استفاده هستند. در ادامه فایل App.js و کامپوننت App را توضیح خواهیم داد.

سپس با استفاده از getElementById المنت با آی دی root را که در فایل index.html مشاهده کردید گرفته و به عنوان آرگومان دوم به متد می دهیم.

در واقع اگر بخواهیم به صورت خلاصه این خط کد را توضیح دهیم این خط به ری اکت می گوید که محتوای تولید شده در کامپوننت App را درون المنت root قرار بده.

در این قسمت هم با فراخوانی متد registerServiceWorker که ایمپورت شده بود از آن استفاده می کنیم.

 

App.js

خروجی کامپوننت App قرار است در <div id=”root”></div> قرار بگیرد.
ایمپورت Component برای ساخت کامپوننت ضروری است.
فایل لوگو و فایل app.css در این دو خط ایمپورت شده است. نحوه ایمپورت عکس ها در این خط دیده می شود.
در این خط کلاس (کامپوننت) App ساخته می شود که از کامپوننت Component ری اکت ارث بری می کند.
تابع render هر کامپوننت تابعی است که پس از فراخوانی کامپوننت اجرا می شود. این تابع باید محتوای خروجی را return کند.
خروجی کامپوننت App در این قسمت آمده است. همانطور که مشاهده می کنید HTML ای به عنوان خروجی برگردانده می شود. این html شامل تگ های img, h2, p, div است که با آنها آشنا هستید.

نکاتی در این بخش وجود دارد که مربوط به jsx است. در آموزش های بعدی با jsx کاملا آشنا خواهید شد. یکی از نکاتی که در اینجا دیده می شود استفاده از className به جای class است. در jsx شما باید از این مشخصه استفاده کنید. همچنین نحوه استفاده از عکس ایمپورت شده نیز به این شکل است که نام عکس را به مشخصه src تگ img درون {} باید بدهیم.

در jsx باید در نهایت یک المنت را return کنید. در واقع تمامی محتوایی که می خواهید return کنید می بایست در نهایت درون یک المنت (معمولا div) قرار دهید.

در انتها با استفاده از این دستور می توانید کامپوننت خود را export کنید. برای قابلیت ایمپورت شدن کامپوننت در سایر کامپوننت می بایست آن را اکسپورت کنید. واژه default بیانگر این است که این کامپوننت اصلی ترین کامپوننت این فایل است. در صورت استفاده از واژه default، زمانی که میخواهید این کامپوننت را ایمپورت کنید کافی است فقط اسم کاپوننت را بنویسید. مانند خط زیر :

اما در صورتی که یک فایل js شامل چند کامپوننت باشد فقط یکی از آنها می تواند کلید واژه default را داشته باشد و سایر کامپوننت ها فقط export می شوند. برای ایمپورت کامپوننت های غیر default باید از { } استفاده کنید. (مانند خط اول فایل App.js)

خروجی این صفحه را با استفاده از دستور npm start که در آموزش نصب و راه اندازی React به آن اشاره شد می بینید. شما با ویرایش کد های این صفحه و ذخیره آن می توانید بدون نیاز به بارگذاری مجدد صفحه تغییرات را در مرورگر خود ببینید.

 

۱ دیدگاه

دیدگاهی بگذارید