کامپوننت ها به دو روش قابل پیاده سازی هستند:
برای مشاهده نمونه کامپوننت تابعی به فایل app.js بروید این فایل تابعی به نام app دارد که مقداری را بصورت دستورات jsx برگشت یا return میکند.
نمونه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } |
در انتهای فایل نیز تابع موردنظر که یک مقدار آبجکت برگشت داده شده است بصورت default export گرفته شده است.
مثال:
|
1 |
export default App; |
فایل app.js حاوی کامپوننت آبجکت jsx است که در صورتی که در فایل های دیگر به این کامپوننت یا هر کامپوننت دیگر نیاز دارید میتوانید آن را درون فایل دیگر import کنیم.در دستور زیر آبجکت app را از فایل app.js درون فایل جدید import کرده ایم. نیازی به وارد کردن پسوند js. نیست.
|
1 2 3 4 5 6 7 8 9 |
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); reportWebVitals(); |
در ری اکت هر کامپوننت دارای فایل جداگانه است و معمول نیست چندین کامپوننت را درون یک فایل قرار دهیم.
حرف نخست نام فایل ایجاد شده با حروف بزرگ است و پسوند آن js. می باشد.در زیر کامپوننتی به نام Card ایجاد کرده ایم.
نکته ای که در ایجاد کامپوننت ها به روش تابعی وجود دارد این است که لازم است درون فایل خود React را از کتابخانه نصب شده در پروژه خود import کنیم.
مثال:
|
1 |
import React from 'react'; |
نحوه استفاده کردن از کامپوننت import شده
در صورتی که کامپوننتی را درون فایل خود import کنیم به دو روش میتوانیم از آن استفاده نماییم.
روش اول این است که در قالب تگ شبیه تگ image آن را فراخوانی کنیم.
مثال:
|
1 |
<App /> |
روش دوم استفاده از کامپوننت بصورت تگ باز یا بسته که در این حالت میتوان المنت هایی را بعنوان فرزند در کامپوننت فراخوانی شده خود قرار دهیم.
مثال:
|
1 2 3 |
<App> Child elements.... </App> |
استفاده چندین باره از کامپوننت
همانطور که گفته شد یکی از مزایای استفاده از کامپوننت ها استفاده چندین باره از آن در هرجای برنامه با کمترین خط کدنویسی است.
کامپوننت Card.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import logo from './logo.svg'; function Card() { return ( <div className="Card"> <header className="Card-header"> <p> learn react by dejavan.ir </p> </header> </div> ); } export default Card; |
فراخوانی چندین باره آن در App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import logo from './logo.svg'; import './App.css'; import Card from "./Card"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> <Card /> <Card /> </header> </div> ); } export default App; |
تصویر نهایی
