1. آشنایی با Component در React

سلام ، صدامو داری؟

اگر وب سایت React رو یک دیوار در نظر بگیریم ، کامپوننت ها نقش آجر های اون رو دارن. واقعا هم چیز خاصی نیست ، به همین تابع هایی که در React درست میکنیم یک کامپوننت گفته میشه. شما فکر کن اسم دیگه ی تابع هست. ( البته کامپوننت ها می تونن تابع (Function) باشن یا از نوع (Class). که فعلا فقط نوع تابعش رو دیدید. پ.ن : در پست قبلی ، App یک کامپوننت از نوع تابعی بود).

دوباره برمیگردیم به کد شماره یک:

function App() { 
return ( <h1> Hello My Friend </h1> );}
 export default App; //1

حالا قصد داریم یک کامپوننت دیگه به برنامه اضافه کنیم به اسم Wellcome که فقط یک پیام خوش آمد گویی رو چاپ میکنه. به این صورت:

function App() {
       return ( <h1> Hello My Friend </h1> );
        }
function Wellcome() {
       <p>Wellcome to my WebSite</p>
        }
export default App; //6

در حال حاضر اگر برنامه رو اجرا کنید در خروجی نسبت به کد شماره یک تفاوتی وجود ندارد. حالا میخوایم از کامپوننتی که نوشتیم توی کامپوننت اصلی که App باشه استفاده کنیم. شما از کامپوننت ها شبیه به تگ های HTML می تونید استفاده کنید ، به این صورت:

function App() { 
return ( <div>
              <h1> Hello My Friend </h1>
             <Wellcome/>
             </div> 
             );} 
function Wellcome() {
return(
            <p> Wellcome to my WebSite </p>
            ); }
export default App; //7

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

function App() {  
return ( <div>        
              <h1> Hello My Friend </h1>        
             <Wellcome/>    
            <Wellcome/>    
            <Wellcome/>    
              </div>   
              );} 
 function Wellcome() {
 return(           
             <p> Wellcome to my WebSite </p>
             ); } 
export default App; //7

بعدا یاد خواهیم گرفت که چطوری کامپوننت های پویاتری بنویسیم ( با استفاده از Props) . اما اینجا بحث رو فقط با این مورد تمام میکنم که بعد از اینکه تعداد کامپوننت هاتون رفت بالا بهتره هر چندتا کامپوننتی که به هم مربوط هستند رو داخل یک فایل JS جداگانه نوشت. اول یک پوشه به اسم Components می سازیم و داخل فایل Wellcome.JS رو ایجاد میکنیم.

حالا قسمت های مربوط به کامپوننت Wellcome رو توی فایل خودش کپی می کنیم :

function Wellcome() {
return( <p>  Wellcome to my WebSite </p> );}
export default Wellcome; //8

کد مربوط به App بعد از جدا کردن کامپوننت بالا رو هم ببینیم و بریم برای توضیحات این دوتا کد:

import Wellcome from &quot./Components/Wellcome&quot

function App() {
return (
 <div>
             <h1> Hello My Friend </h1>
             <Wellcome/>
</div> ) ; }
export default App; // 9

از کد شماره هشت شروع میکنیم ، چیز جدیدی نداره جز خط آخرش. ببینید در یک فایل JS ممکنه چندین کامپوننت داشته باشیم. بقیه ی فایل ها فقط به توابعی از یک کامپوننت دسترسی دارن که خود فایل این دسترسی رو داده باشه بهش. (به این حالت میگن encapsulation ،یعنی کل کامپوننت ها توی یک کپسول محافظت شدن و کسی از درونشون خبر نداره ، فقط هرچی رو ما خودمون دلمون بخواد به بیرون از کامپوننت نشر میدیم) به زبان ساده تر ، برای اینکه بتونید توی فایل App به کامپوننت Wellcome دسترسی داشته باشید نیاز هست یک عملیات Export - Import انجام بشه ، به این صورت که :

در فایل مبدا اون کامپوننت رو Export کردیم و در فایل مقصد اون رو Import میکنیم (خط اول کد شماره 9).

حالا اگر توی فایل مبدا بیشتر از یک کامپوننت بود چطوری به همشون دسترسی بیرونی بدیم ؟(چون با استفاده از Export default فقط یک کامپوننت رو میشه فرستاد) در اون حالت باید در هنگام تعریف کردن کامپوننت تعیین کنیم که قراره Export بشه یا نه.

export function Wellcome() {
return(
            <p>Wellcome to my WebSite</p>
          );}

function Greeting() {
return(
           <p>Have a nice day</p>
          );}

export function Contact() {
return(
          <p>Send Email</p>
          );} //10

به این صورت در هنگام تعریف کردن هر کامپوننت مشخص میکنیم که قراره Export بشه یا نه. در کد شماره 10 به دوتا کامپوننت Wellcome و Contact دسترسی بیرون از این فایل رو هم دادیم اما برای کامپوننت Greeting نه. وقتی به این صورت کامپونتت ها رو اکسپورت می کنید لازمه در هنگام Import کردنشون اون ها رو توی { } قرار بدیم. به این صورت:

import {Wellcome,Contact} from &quot./Components/Wellcome&quot

مطالعه بیشتر :

1. گفته شد که کامپوننت ها یک نوع دیگر هم دارن (Class Component) ، من دربارشون حرف نمیزنم چون با معرفی شدن Hook ها به نظرم استفاده از Function ها و Arrow Function ها بهتر هست.
2. درباره Arrow Function می تونید بخونید ، یه نکته هم توجه کنید که هنوز ما درباره Props صحبتی نکردیم.

خوش باشید :)