راهنمای مبتدیان برای طراحی کامپوننت در React

Summarize this content to 400 words in Persian Lang

معرفی

واکنش نشان دهید یک کتابخانه محبوب جاوا اسکریپت است که برای ساخت رابط های کاربری به ویژه برای برنامه های تک صفحه ای استفاده می شود. یکی از مفاهیم کلیدی در React طراحی کامپوننت است. کامپوننت ها بلوک های سازنده یک برنامه React هستند. درک چگونگی ایجاد و استفاده موثر از آنها برای ساخت برنامه های کاربردی کارآمد و قابل نگهداری بسیار مهم است. این مقاله طراحی کامپوننت در React را به زبان ساده و با مثال‌های فراوان برای درک آسان آن توضیح می‌دهد.

کامپوننت چیست؟

آ جزء در React مانند یک کد کوچک و قابل استفاده مجدد است که بخشی از رابط کاربری را تعریف می کند. به اجزایی مانند بلوک های LEGO فکر کنید. همانطور که می توانید از بلوک های لگو برای ساخت ساختارهای مختلف استفاده کنید، می توانید از کامپوننت های React برای ساخت بخش های مختلف یک برنامه وب استفاده کنید.

مثال روزمره:

یک ماشین را تصور کنید. خودرو از قطعات بسیاری مانند موتور، چرخ ها و صندلی ها تشکیل شده است. هر یک از این قسمت ها را می توان یک جزء در نظر گرفت. به همین ترتیب، یک صفحه وب می تواند از اجزای مختلفی مانند هدر، پاورقی و ناحیه محتوا تشکیل شود.

در یک برنامه React، کامپوننت ها را می توان در داخل اجزای دیگر قرار داد تا رابط کاربری پیچیده ایجاد کند. هر کامپوننت مسئول ارائه بخش کوچکی از رابط کاربری است.

انواع قطعات

اجزای عملکردی

آ جزء عملکردی یک تابع ساده جاوا اسکریپت است که props را به عنوان آرگومان می گیرد و یک عنصر React را برمی گرداند. نوشتن و درک این اجزا آسان است.

مثال:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، Welcome یک مؤلفه کاربردی است که پروپوزال ها را می پذیرد و پیام تبریک را برمی گرداند.

زمان استفاده از اجزای عملکردی:

زمانی که به یک جزء ساده و بدون حالت نیاز دارید
برای عملکرد بهتر در اکثر موارد
با React Hooks، کامپوننت‌های کاربردی همچنین می‌توانند حالت و عوارض جانبی را مدیریت کنند

اجزای کلاس

آ جزء کلاس جزء پیچیده تری است که می تواند حالت خود را نگه دارد و مدیریت کند. با استفاده از نحو کلاس ES6 تعریف شده است.

مثال:

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، Welcome یک جزء کلاس است که همچنین props را می پذیرد و یک پیام تبریک را برمی گرداند.

زمان استفاده از اجزای کلاس:

زمانی که نیاز به مدیریت روش های حالت یا چرخه حیات دارید

ساختن اولین مؤلفه

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

راهنمای گام به گام:

یک فایل جدید به نام App.js ایجاد کنید:
import React from ‘react’;

function App() {
return (
<div>
<h1>My First Component</h1>
<Welcome name=”John” />
</div>
);
}

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

export default App;

مولفه App را در index.js رندر کنید:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;

ReactDOM.render(<App />, document.getElementById(‘root’));

در این مثال، ما یک مؤلفه خوش‌آمدگویی ساده ایجاد کردیم که پیام تبریک را نمایش می‌دهد و از آن در داخل مؤلفه App استفاده کردیم.

اجزاء و وضعیت

لوازم جانبی

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

نمونه ای از قطعات پاس:

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

<Welcome name=”Alice” />

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، name یک پایه است که به کامپوننت Welcome ارسال می شود

حالت

حالت روشی برای مدیریت داده هایی است که می تواند در طول زمان در یک جزء تغییر کند. State در داخل کامپوننت مدیریت می شود و می توان با استفاده از useState Hook در کامپوننت های کاربردی به روز رسانی کرد.

مثال استفاده از حالت:

import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، Counter یک جزء کاربردی است که از useState Hook برای مدیریت وضعیت شمارش استفاده می کند.

آهنگسازی اجزاء

کامپوننت ها را می توان برای ساخت UI های پیچیده تر ترکیب کرد. به این میگن کامپوزیت اجزا.

مثال:

function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}

function Header() {
return <h1>This is the header</h1>;
}

function Content() {
return <p>This is the content</p>;
}

function Footer() {
return <p>This is the footer</p>;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، App از اجزای Header، Content و Footer تشکیل شده است.

بهترین روش ها در طراحی کامپوننت

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

مثال: در یک برنامه رسانه اجتماعی، به جای داشتن یک جزء بزرگ برای مدیریت کل صفحه نمایه کاربر، آن را به اجزای کوچکتر تقسیم کنید. ProfileHeader، ProfilePicture، ProfileBio، و ProfilePosts. این امر مدیریت و به‌روزرسانی مستقل هر مؤلفه را آسان‌تر می‌کند

// ProfileHeader.js
import React from ‘react’;

function ProfileHeader({ name }) {
return <h1>{name}’s Profile;
}

export default ProfileHeader;

// ProfilePicture.js
import React from ‘react’;

function ProfilePicture({ imageUrl }) {
return ;
}

export default ProfilePicture;

// ProfileBio.js
import React from ‘react’;

function ProfileBio({ bio }) {
return {bio};
}

export default ProfileBio;

// ProfilePosts.js
import React from ‘react’;

function ProfilePosts({ posts }) {
return (

{posts.map(post => (
{post.content}
))}

);
}

export default ProfilePosts;

// UserProfile.js
import React from ‘react’;
import ProfileHeader from ‘./ProfileHeader’;
import ProfilePicture from ‘./ProfilePicture’;
import ProfileBio from ‘./ProfileBio’;
import ProfilePosts from ‘./ProfilePosts’;

function UserProfile({ user }) {
return (

);
}

export default UserProfile;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

مثال: در یک برنامه تجارت الکترونیکی، الف ProductCard کامپوننت فقط باید مسئول نمایش اطلاعات محصول باشد. هر گونه منطق مربوط به افزودن محصول به سبد خرید باید توسط یک جداگانه رسیدگی شود AddToCartButton جزء. این جداسازی تضمین می کند که هر جزء دارای یک مسئولیت واحد است.

// ProductCard.js
import React from ‘react’;

function ProductCard({ product }) {
return (
<div>
<h2>{product.name}</h2>
<p>{product.description}</p>
<p>${product.price}</p>
</div>
);
}

export default ProductCard;

// AddToCartButton.js
import React from ‘react’;

function AddToCartButton({ onAddToCart }) {
return <button onClick={onAddToCart}>Add to Cart</button>;
}

export default AddToCartButton;

// ProductPage.js
import React from ‘react’;
import ProductCard from ‘./ProductCard’;
import AddToCartButton from ‘./AddToCartButton’;

function ProductPage({ product, onAddToCart }) {
return (
<div>
<ProductCard product={product} />
<AddToCartButton onAddToCart={onAddToCart} />
</div>
);
}

export default ProductPage;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از Props و حالت عاقلانه استفاده کنید: از props برای انتقال داده و حالت برای مدیریت داده هایی که تغییر می کنند استفاده کنید. از استفاده از حالت در مکان های زیاد خودداری کنید. آن را در جایی که منطقی است نگه دارید

مثال: در یک برنامه آب و هوا، از props برای ارسال داده های آب و هوای فعلی به a استفاده کنید WeatherDisplay جزء. استفاده از حالت در a WeatherFetcher جزء برای مدیریت واکشی و به روز رسانی داده های آب و هوا. این جریان داده را شفاف و قابل مدیریت نگه می دارد.

// WeatherDisplay.js
import React from ‘react’;

function WeatherDisplay({ weather }) {
return (
<div>
<h2>Current Weather</h2>
<p>Temperature: {weather.temperature}°C</p>
<p>Condition: {weather.condition}</p>
</div>
);
}

export default WeatherDisplay;

// WeatherFetcher.js
import React, { useState, useEffect } from ‘react’;
import WeatherDisplay from ‘./WeatherDisplay’;

function WeatherFetcher() {
const [weather, setWeather] = useState(null);

useEffect(() => {
fetch(‘https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London’)
.then(response => response.json())
.then(data => setWeather(data.current));
}, []);

return weather ? <WeatherDisplay weather={weather} /> : Loading…p>;
}

export default WeatherFetcher;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ترکیب بیش از ارث: به جای استفاده از وراثت، اجزا را برای ایجاد رابط کاربری پیچیده ترکیب کنید. این باعث می‌شود کد شما انعطاف‌پذیرتر باشد و نگهداری آن آسان‌تر شود.

مثال: در یک برنامه داشبورد، به جای ایجاد یک پایه Widget کلاس و ارث بردن از آن، اجزای کوچک و قابل ترکیبی مانند ChartWidget، TableWidget، و SummaryWidget. این اجزا را در یک ترکیب کنید Dashboard جزء برای ایجاد UI نهایی. این رویکرد انعطاف‌پذیرتر است و نگهداری آن آسان‌تر است.

// ChartWidget.js
import React from ‘react’;

function ChartWidget() {
return <div>Chart Widget</div>;
}

export default ChartWidget;

// TableWidget.js
import React from ‘react’;

function TableWidget() {
return <div>Table Widget</div>;
}

export default TableWidget;

// SummaryWidget.js
import React from ‘react’;

function SummaryWidget() {
return <div>Summary Widget</div>;
}

export default SummaryWidget;

// Dashboard.js
import React from ‘react’;
import ChartWidget from ‘./ChartWidget’;
import TableWidget from ‘./TableWidget’;
import SummaryWidget from ‘./SummaryWidget’;

function Dashboard() {
return (
<div>
<ChartWidget />
<TableWidget />
<SummaryWidget />
</div>
);
}

export default Dashboard;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد قابل خواندن و نگهداری: کدهای تمیز و خوانا بنویسید. از نام های معنی دار برای اجزا و متغیرهای خود استفاده کنید. در صورت لزوم برای توضیح منطق پیچیده نظرات اضافه کنید.

مثال: در یک پلت فرم وبلاگ نویسی، از نام های معنی دار برای اجزایی مانند استفاده کنید Post، Comment، و AuthorBio. برای توضیح منطق پیچیده، مانند چگونگی Post کامپوننت داده ها را واکشی و نمایش می دهد. این باعث می‌شود که توسعه‌دهندگان جدید درک کنند و در آن مشارکت کنند.

// Post.js
import React from ‘react’;

// Post.js
import React, { useState, useEffect } from ‘react’;

function Post({ postId }) {
const [post, setPost] = useState(null);
const [loading, setLoading] = useState(true);

// Fetch the post data when the component mounts
useEffect(() => {
async function fetchPost() {
try {
const response = await fetch(`https://api.example.com/posts/${postId}`);
const data = await response.json();
setPost(data);
} catch (error) {
console.error(‘Error fetching post:’, error);
} finally {
setLoading(false);
}
}

fetchPost();
}, [postId]);

if (loading) {
return <p>Loading…</p>;
}

if (!post) {
return <p>Post not found</p>;
}

return (
<div>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
);
}

export default Post;

// Comment.js
import React from ‘react’;

function Comment({ author, text }) {
return (
<div>
<p><strong>{author}</strong>: {text}p>
</div>
);
}

export default Comment;

// AuthorBio.js
import React from ‘react’;

function AuthorBio({ author }) {
return (
<div>
<h3>About the Author</h3>
<p>{author.bio}</p>
</div>
);
}

export default AuthorBio;

// Blog.js
import React, { useState, useEffect } from ‘react’;
import Post from ‘./Post’;
import Comment from ‘./Comment’;
import AuthorBio from ‘./AuthorBio’;

function Blog({ postId }) {
const [comments, setComments] = useState([]);
const [author, setAuthor] = useState(null);

// Fetch comments and author data when the component mounts
useEffect(() => {
async function fetchComments() {
try {
const response = await fetch(`https://api.example.com/posts/${postId}/comments`);
const data = await response.json();
setComments(data);
} catch (error) {
console.error(‘Error fetching comments:’, error);
}
}

async function fetchAuthor() {
try {
const response = await fetch(`https://api.example.com/posts/${postId}/author`);
const data = await response.json();
setAuthor(data);
} catch (error) {
console.error(‘Error fetching author:’, error);
}
}

fetchComments();
fetchAuthor();
}, [postId]);

return (
<div>
<Post postId={postId} />
{author && <AuthorBio author={author} />}
<h3>Comments</h3>
{comments.map((comment) => (
<Comment key={comment.id} author={comment.author} text={comment.text} />
))}
</div>
);
}

export default Blog;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهینه سازی عملکرد: با استفاده از تکنیک‌های بهینه‌سازی داخلی React از رندرهای مجدد غیرضروری خودداری کنید React.memo و useCallback.

مثال: در یک برنامه چت، استفاده کنید React.memo برای جلوگیری از ارائه مجدد غیر ضروری MessageList هنگامی که پیام های جدید اضافه می شود. استفاده کنید useCallback برای به خاطر سپردن کنترل کننده های رویداد در MessageInput جزء برای جلوگیری از ایجاد توابع جدید در هر رندر.

// MessageList.js
import React from ‘react’;

const MessageList = React.memo(({ messages }) => {
return (
<ul>
{messages.map(message => (
<li key={message.id}>{message.text}</li>
))}
</ul>
);
});

export default MessageList;

// MessageInput.js
import React, { useState, useCallback } from ‘react’;

function MessageInput({ onSendMessage }) {
const [text, setText] = useState(”);

const handleChange = useCallback((e) => {
setText(e.target.value);
}, []);

const handleSubmit = useCallback((e) => {
e.preventDefault();
onSendMessage(text);
setText(”);
}, [text, onSendMessage]);

return (
<form onSubmit={handleSubmit}>
<input type=”text” value={text} onChange={handleChange} />
<button type=”submit”>Send</button>
</form>
);
}

export default MessageInput;

// ChatApp.js
import React, { useState } from ‘react’;
import MessageList from ‘./MessageList’;
import MessageInput from ‘./MessageInput’;

function ChatApp() {
const [messages, setMessages] = useState([]);

const handleSendMessage = (text) => {
setMessages([…messages, { id: messages.length, text }]);
};

return (
<div>
<MessageList messages={messages} />
<MessageInput onSendMessage={handleSendMessage} />
</div>
);
}

export default ChatApp;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک ظاهر طراحی منسجم: از یک رویکرد ثابت برای استایل دادن به اجزای خود استفاده کنید. این می تواند ماژول های CSS، مولفه های سبک یا روش دیگری باشد که برای تیم شما کار می کند.

مثال: در یک وب‌سایت شرکتی، از ماژول‌های CSS استفاده کنید تا اطمینان حاصل کنید که استایل‌ها به اجزای جداگانه محدود می‌شوند و از تضاد سبک جلوگیری می‌کنند. یا از کتابخانه ای مانند استفاده کنید styled-components برای ایجاد سبک های سازگار و قابل استفاده مجدد در سراسر برنامه.

// ProfileHeader.module.css
.header {
font-size: 2em;
color: blue;
}

// ProfileHeader.js
import React from ‘react’;
import styles from ‘./ProfileHeader.module.css’;

function ProfileHeader({ name }) {
return <h1 className={styles.header}>{name}’s Profile;
}

export default ProfileHeader;

// Profile.js
import React from ‘react’;
import ProfileHeader from ‘./ProfileHeader’;

function Profile({ user }) {
return (

);
}

export default Profile;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با پیروی از این بهترین شیوه‌ها، می‌توانید مؤلفه‌های React را ایجاد کنید که استفاده، نگهداری و مقیاس‌بندی آن‌ها آسان باشد.

نتیجه

با تسلط بر اصول طراحی کامپوننت در React، شما آماده ایجاد برنامه های کاربردی وب مقیاس پذیر، کارآمد و قابل نگهداری خواهید بود. کامپوننت ها بلوک های سازنده React هستند و درک نحوه استفاده موثر و ترکیب آنها بسیار مهم است. به یاد داشته باشید که بهترین شیوه ها را دنبال کنید، مانند کوچک نگه داشتن اجزا، استفاده عاقلانه از ابزارها و حالت ها، و بهینه سازی عملکرد. با این مهارت ها، می توانید به راحتی رابط های کاربری پیشرفته بسازید. اکنون می توانید به صورت آنلاین درباره آن تحقیق کنید. اگر مایل بودید، می توانید با من در ارتباط باشید توییتر. کد نویسی مبارک!

ممنون که خواندید 🙂

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

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

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

<Welcome name="Alice" />

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

function Header() {
  return <h1>This is the header</h1>;
}

function Content() {
  return <p>This is the content</p>;
}

function Footer() {
  return <p>This is the footer</p>;
}

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

function ProfileHeader({ name }) {
  return <h1>{name}'s Profile;
}

export default ProfileHeader;

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

function ProfilePicture({ imageUrl }) {
  return ;
}

export default ProfilePicture;

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

function ProfileBio({ bio }) {
  return 
{bio}
;
}

export default ProfileBio;

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

function ProfilePosts({ posts }) {
  return (
    

      {posts.map(post => (
        
{post.content}
      ))}
    
  );
}

export default ProfilePosts;

// UserProfile.js
import React from 'react';
import ProfileHeader from './ProfileHeader';
import ProfilePicture from './ProfilePicture';
import ProfileBio from './ProfileBio';
import ProfilePosts from './ProfilePosts';

function UserProfile({ user }) {
  return (
    
  );
}

export default UserProfile;

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

function ProductCard({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

export default ProductCard;

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

function AddToCartButton({ onAddToCart }) {
  return <button onClick={onAddToCart}>Add to Cart</button>;
}

export default AddToCartButton;

// ProductPage.js
import React from 'react';
import ProductCard from './ProductCard';
import AddToCartButton from './AddToCartButton';

function ProductPage({ product, onAddToCart }) {
  return (
    <div>
      <ProductCard product={product} />
      <AddToCartButton onAddToCart={onAddToCart} />
    </div>
  );
}

export default ProductPage;

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

function WeatherDisplay({ weather }) {
  return (
    <div>
      <h2>Current Weather</h2>
      <p>Temperature: {weather.temperature}°C</p>
      <p>Condition: {weather.condition}</p>
    </div>
  );
}

export default WeatherDisplay;

// WeatherFetcher.js
import React, { useState, useEffect } from 'react';
import WeatherDisplay from './WeatherDisplay';

function WeatherFetcher() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London')
      .then(response => response.json())
      .then(data => setWeather(data.current));
  }, []);

  return weather ? <WeatherDisplay weather={weather} /> : 
Loading...p>;
}

export default WeatherFetcher;

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

function ChartWidget() {
  return <div>Chart Widget</div>;
}

export default ChartWidget;

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

function TableWidget() {
  return <div>Table Widget</div>;
}

export default TableWidget;

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

function SummaryWidget() {
  return <div>Summary Widget</div>;
}

export default SummaryWidget;

// Dashboard.js
import React from 'react';
import ChartWidget from './ChartWidget';
import TableWidget from './TableWidget';
import SummaryWidget from './SummaryWidget';

function Dashboard() {
  return (
    <div>
      <ChartWidget />
      <TableWidget />
      <SummaryWidget />
    </div>
  );
}

export default Dashboard;

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

// Post.js
import React, { useState, useEffect } from 'react';

function Post({ postId }) {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);

  // Fetch the post data when the component mounts
  useEffect(() => {
    async function fetchPost() {
      try {
        const response = await fetch(`https://api.example.com/posts/${postId}`);
        const data = await response.json();
        setPost(data);
      } catch (error) {
        console.error('Error fetching post:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchPost();
  }, [postId]);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (!post) {
    return <p>Post not found</p>;
  }

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

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

function Comment({ author, text }) {
  return (
    <div>
      <p><strong>{author}</strong>: {text}p>
    </div>
  );
}

export default Comment;

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

function AuthorBio({ author }) {
  return (
    <div>
      <h3>About the Author</h3>
      <p>{author.bio}</p>
    </div>
  );
}

export default AuthorBio;

// Blog.js
import React, { useState, useEffect } from 'react';
import Post from './Post';
import Comment from './Comment';
import AuthorBio from './AuthorBio';

function Blog({ postId }) {
  const [comments, setComments] = useState([]);
  const [author, setAuthor] = useState(null);

  // Fetch comments and author data when the component mounts
  useEffect(() => {
    async function fetchComments() {
      try {
        const response = await fetch(`https://api.example.com/posts/${postId}/comments`);
        const data = await response.json();
        setComments(data);
      } catch (error) {
        console.error('Error fetching comments:', error);
      }
    }

    async function fetchAuthor() {
      try {
        const response = await fetch(`https://api.example.com/posts/${postId}/author`);
        const data = await response.json();
        setAuthor(data);
      } catch (error) {
        console.error('Error fetching author:', error);
      }
    }

    fetchComments();
    fetchAuthor();
  }, [postId]);

  return (
    <div>
      <Post postId={postId} />
      {author && <AuthorBio author={author} />}
      <h3>Comments</h3>
      {comments.map((comment) => (
        <Comment key={comment.id} author={comment.author} text={comment.text} />
      ))}
    </div>
  );
}

export default Blog;

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

const MessageList = React.memo(({ messages }) => {
  return (
    <ul>
      {messages.map(message => (
        <li key={message.id}>{message.text}</li>
      ))}
    </ul>
  );
});

export default MessageList;

// MessageInput.js
import React, { useState, useCallback } from 'react';

function MessageInput({ onSendMessage }) {
  const [text, setText] = useState('');

  const handleChange = useCallback((e) => {
    setText(e.target.value);
  }, []);

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    onSendMessage(text);
    setText('');
  }, [text, onSendMessage]);

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={handleChange} />
      <button type="submit">Send</button>
    </form>
  );
}

export default MessageInput;

// ChatApp.js
import React, { useState } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

function ChatApp() {
  const [messages, setMessages] = useState([]);

  const handleSendMessage = (text) => {
    setMessages([...messages, { id: messages.length, text }]);
  };

  return (
    <div>
      <MessageList messages={messages} />
      <MessageInput onSendMessage={handleSendMessage} />
    </div>
  );
}

export default ChatApp;

// ProfileHeader.module.css
.header {
  font-size: 2em;
  color: blue;
}

// ProfileHeader.js
import React from 'react';
import styles from './ProfileHeader.module.css';

function ProfileHeader({ name }) {
  return <h1 className={styles.header}>{name}'s Profile;
}

export default ProfileHeader;

// Profile.js
import React from 'react';
import ProfileHeader from './ProfileHeader';

function Profile({ user }) {
  return (
    
  );
}

export default Profile;