۳۰
تیر

جلسه ۰۵ : کامپوننت ها در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم کامپوننت ها در React JS را به شما عزیزان آموزش دهیم.

فهرست

مقدمه

کامپوننت ها مانند توابعی هستند که المان های html را برمی‌گردانند.

کامپوننت ها قطعه کدهایی مستقل و قابل استفاده مجدد هستند که المان های html را ایزوله می‌کنند.

کامپوننت به دو نوع کامپوننت کلاس و کامپوننت تابع تقسیم می‌شوند. (در ادامه جلسات ما فقط از نوع کلاس آن استفاده خواهیم کرد)

ساخت کامپوننت کلاس

نام کامپوننت ها باید با یک حرف بزرگ آغاز شود.

برای ساخت کامپوننت ها باید یک کلاس ایجاد کنیم که از کلاس Component در React استفاده کنیم. (ارث بری کنیم)
با این کار به متغیر ها و متد های کلاس Component اصلی دسترسی داریم.
همچنین کلاس ما باید یک تابع به نام render داشته باشد. این تابع خروجی HTML را برمی‌گرداند.

مثال:

مثال :

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

}

حال برای استفاده از این کامپوننت، با آن مانند یک تگ html برخورد میکنیم:

مثال :

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

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

ساخت کامپوننت تابع

این نوع کامپوننت ها نیز مانند کامپوننت های کلاس عمل می‌کنند با این تفاوت که توسط تابع ایجاد می‌شوند.

مثال:

مثال :

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

function Car() {

return <h2>Hi, I am also a Car!</h2>;

}

مثال :

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

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

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

تابع سازنده کامپوننت

اگر یک تابع سازنده برای کامپوننت کلاس در نظر بگیریم، این تابع هنگام رندر شدن کامپوننت، اجرا می‌شود.

در این تابع می‌توانید متغیر ها، خواص و یا مقادیر کامپوننت خود را تعریف کنید.

در React، متغیر های یک کامپوننت (Properties) را state می‌نامیم. (در مرود state ها در جلسات آینده بیشتر خواهیم خواند)

با استفاده از دستور this.state می‌توانیم به state ها دسترسی داشته باشیم.

مثال:

مثال :

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

class Car extends React.Component {

constructor() {

super();

this.state = {color: "red"};

}

render() {

return <h2>I am a {this.state.color} Car!</h2>;

}

خروجی:

مثال :

I am a red Car!

1	I am a red Car!

کامپوننت های تو در تو

میتوانیم کامپوننت ها را در داخل یکدیگر استفاده کنیم.

در مثال زیر از کامپوننت Car دورن کامپوننت Garage استفاده کرده ایم.

مثال :

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

class Car extends React.Component {

render() {

return <h2>I am a Car!</h2>;

}

class Garage extends React.Component {

render() {

return (

<div>

<h1>Who lives in my Garage?</h1>

<Car />

</div>

);

}

import کردن کامپوننت ها

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

برای اینکه یک کامپوننت قابل import شدن شود، باید آن را با استفاده از دستور export default، به نوعی export یا صادر کنیم.

مثال:

مثال :

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

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  
 
}
}

export default Car;

import React from 'react';

import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

}

export default Car;

فایل بالا App.js تام دارد.

فایل دیگری ایجاد کرده و کامپوننت Car را از فایل App.js به صورت زیر import کنید:

مثال :

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

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

import React from 'react';

import ReactDOM from 'react-dom';

import Car from './App.js';

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

خروجی:

مثال :

Hi, I am a Car!

1	Hi, I am a Car!

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

در جلسه بعد به آموزش Prop ها در React JS خواهیم پرداخت.

به اشتراک بگذارید

react js components ,آموزش react js ,آموزش کتابخانه react js ,کامپوننت های react js

دیدگاه کاربران

تعداد دیدگاه : 1

ana
فروردین ۹, ۱۴۰۲
همخوانی نبودن مباحث دوره
چرا هرچی میگید داخل دوره اصلا نمیشه تمرینشو تست کرد
مثل تو دوره گفید برا ساخت کامپوننت
App.js
import React from ‘react’;
import ‘./App.css’;
import Welcomee from ‘./components/welcome’;
const App=()=>{
return (
HELLO WORLD !
)
}
export default App;
Welcome.js
import React from ‘react’;
const Welcome=()=>{
return(
HELLO Welcome COMPONENT
)
}
const Welcomee=()=>{
return(
GOOGLE
)
}
export default Welcomee;
میسازمش ولی نمیشه این مدلی نشونش بدم و کامپونت ران نمیشه اصلا
تو cmd میگه همه چی اوکه ولی کنسول وب ارور دارم
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۵ : کامپوننت ها در React JS

مقدمه

ساخت کامپوننت کلاس

ساخت کامپوننت تابع

تابع سازنده کامپوننت

کامپوننت های تو در تو

import کردن کامپوننت ها

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ