functional-components-vs-classic-component

React Component چیست؟ function vs class که مبتدی‌ها قاطی می‌کنن

function component نوشتی class کار کرد؟😵 React Component دو مدل داره که مبتدی‌ها قاطی می‌کنن React Component چیست آموزش کامل تابع یا class هست که JSX برمی‌گردونه!UI قطعه‌قطعه می‌کنه،هر قطعه یه.⚛️ component Function Component مدرن:

JSX

function Welcome({ name }) {
  return <h1>سلام {name}👋</h1>;
}

// استفاده
<Welcome name="علی" />

مزیت : ساده،hook-ready،performant Class Componentقدیمی:

JSX

class Welcome extends React.Component {
  render() {
    return <h1>سلام {this.props.name}👋</h1>;
  }
}

ساخت اولین کامپوننت React function رو انتخاب کن:

JSX

// App.js
import React from 'react';

function Header() {
  return <nav>منو سایت</nav>;
}

function App() {
  return (
    <div>
      <Header />
      <main>محتوای اصلی</main>
    </div>
  );
}

export default App;

اولین Component props پاس دادن و JSX return ساده

ساخت اولین کامپوننت React با props داده می‌گیره و JSX برمی‌گردونه!parent data رو child نشون می‌ده.⚛️ مرحله ۱ component :با props بساز

JSX


function UserCard({ name, age, job }) {
  return (
    <div className="card">
      <h3>{name}👤</h3>
      <p>سن:{age}سال</p>
      <p>شغل:{job}</p>
    </div>
  );
}

مرحله ۲: از parent استفاده کن

JSX

function App() {
  return (
    <div>
      <UserCard name="علی" age="25" job="frontend dev" />
      <UserCard name="مریم" age="30" job="UI designer" />
      <UserCard name="رضا" age="28" job="backend dev" />
    </div>
  );
}

React Component props آموزش کامل جادو می‌کنه: نتیجه: ۳ user مختلف، ۱ component

JSX

// pro tip: default props
function Button({ text = "کلیک" }) {
  return <button>{text}</button>;
}
// <Button /> → "کلیک"

۳ خط کد، ۱۰۰ user card

Nesting Components :parent- child hierarchy که app رو scalable می‌کنه

App ت flat HTML شد؟😤 nesting component ها hierarchy جادویی می‌کنه! سلسله مراتب واقعی:

JSX

// سطح ۱: App (ریشه)
function App() {
  return (
    <div className="app">
      <Header title="وبلاگ من" />
      <MainContent />
      <Footer />
    </div>
  );
}

// سطح ۲: Header
function Header({ title }) {
  return (
    <header>
      <h1>{title}🚀</h1>
      <Nav />
    </header>
  );
}

// سطح ۳: Nav
function Nav() {
  return (
    <nav>
      <Link href="/">خانه</Link>
      <Link href="/about">درباره</Link>
    </nav>
  );
}

// سطح ۴: Link (atomic)
function Link({ href, children }) {
  return <a href={href}>{children}</a>;
}

props در هر: level

JSX

<Header title="آموزش React" userCount={1500} />

component تابع JSX برمی‌گردونه! function+props+nesting=app بزرگ. اولین React component ت رو بساز، props پاس بده و scalable شو!✨

Component در React چیست؟ آموزش ساخت اولین کامپوننت

React Component چیست؟ function vs class که مبتدی‌ها قاطی می‌کنن

اولین Component props پاس دادن و JSX return ساده

Nesting Components :parent- child hierarchy که app رو scalable می‌کنه

این مقاله به درد یکی از رفیقات می‌خوره؟

مقالات مرتبط با این موضوع

props در React چیست؟ آموزش ارسال داده بین کامپوننت‌ها

React چیست؟ چرا ری‌اکت محبوب‌ترین کتابخانه JavaScript برای فرانت‌اند است؟