دوره آموزش ReactJS: مفهوم Component ها و Prop ها

Component‌ها برای تقسیم پروژه ReactJS به قسمت‌های کوچکتر و سهولت در مدیریت اون‌ها ایجاد می‌شوند.

مثال زیر را ببینید:

import React from 'react';
import ReactDOM from 'react-dom';

class Post extends React.Component{
	render(){
		return(
			<div>
				<Title />
				<FullPost />
			</div>
		)
	}
	
}
class Title extends React.Component{
	render(){
		return(
			<h1>Title of Post</h1>
		)
	}
}
class FullPost extends React.Component{
	render(){
		return(
			<p>full post full post full post full post.</p>
		)
	}
}

ReactDOM.render(<Post />, document.getElementById('main'));

در فوق کلاس‌های Post و Title و FullPost سه Component هستند که هر کدام از React.Component ارث بری کرده اند. و هر کامپوننت یک render داشته که یک خروجی با return دارد. توجه داشته باشید که Component‌ها را همیشه باید با حرف بزرگ شروع کنید.

به عنوان مثال برای استفاده از این کامپوننت Title از دستور <Title /> استفاده می‌کنیم.

همانطور که در Component اصلی که Post نام دارد می‌بینید دو Component با نام‌های Title و FullPost را قرار دادیم، و Component اصلی پروژه Post را به عنوان ورودی اول متد render در سطر آخر فراخوانی کردیم.

نتیجه کدهای فوق را در پایین می‌بینید:

Prop‌ها که در واقع ورودی‌های کامپوننت‌ها هستند به شکل زیر استفاده می‌شوند:

import React from 'react';
import ReactDOM from 'react-dom';

class Main extends React.Component{
	render(){
		return(
			<div>
				<SayHello name="hitos"/>
				<br />
				<SayHello name="hitos.ir"/>
			</div>
		)
	}
	
}
class SayHello extends React.Component{
	render(){
		return(
			<h1>Hello, {this.props.name}</h1>
		)
	}
}

ReactDOM.render(<Main />, document.getElementById('main'));

یک کامپوننت به نام Main و یک کامپوننت به نام SayHello ایجاد کردیم. همانطور که در کامپوننت Main می‌بینید دو بار متد SayHello را با مقدار prop با نام name فراخوانی کردیم.

در کامپوننت SayHello نیز با دستور {this.props.name}  در واقع prop با نام name را فراخوانی می‌کنیم.

نکته: برای استفاده از تگی مانند br باید آن را در قالب <br/> استفاده کنیم.

نتیجه خروجی مانند زیر خواهد بود:

کامپوننت‌ها به صورت تابع

کامپوننت‌ها را می‌توان به صورت تابع نیز بوجود آورد. کامپوننت‌های مثال اخیر را به شکل تابع باز نویسی می‌کنیم:

import React from 'react';
import ReactDOM from 'react-dom';

function Main(){
	return(
		<div>
			<SayHello name="hitos"/>
			<br />
			<SayHello name="hitos.ir"/>
		</div>
	)
}

function SayHello(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(<Main />, document.getElementById('main'));

پردازش مشروط JSX

در پایین مثالی عملی می‌بینید که با توجه به وضعیت کاربر که مهمان باشد یا عضو یک متن مناسب چاپ خواهد شد:

import React from 'react';
import ReactDOM from 'react-dom';

function UserStatus(props){
	if(props.isLoggedIn){
		return <h1>Hello User!</h1>;
	}else{
		return <h1>Hello Guest!</h1>;
	}
}

ReactDOM.render(<UserStatus isLoggedIn="true" />, document.getElementById('main'));

در سطر آخر به سادگی یک Prop به نام isLoggedIn با مقدار true در کامپوننت UserStatus ایجاد کردیم.

کامپوننت UserStatus نیز با دریافت Prop با توجه به ورودی isLoggedIn پیام مناسب را چاپ می‌کند. در مثال بالا Hello User! چاپ خواهد شد.

امیدوارم این آموزش مفید بوده باشد.