من 2 سنت در واکنش و بعدی

Summarize this content to 400 words in Persian Lang

چرا من در React و Next.js غوطه ور هستم: یک شروع تازه

من اخیراً سفر یادگیری جدیدی را با React و Next.js آغاز کرده‌ام، و دلیل هیجان‌زده بودن من در مورد این ابزارها به این صورت است:

واکنش نشان دهید: چرا

سحر و جادو مبتنی بر مؤلفه

معماری مبتنی بر کامپوننت React یک تغییر دهنده بازی برای من بوده است. به جای مدیریت کدهای درهم، اکنون در حال ایجاد اجزای قابل استفاده مجدد و مستقل هستم. برای مثال، یک کامپوننت ساده Button به شکل زیر است:

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

const Button = ({ onClick, children }) => (
{children}
);

export default Button;

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

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

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

اعلامی و واضح

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

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

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

return (

Count: {count}
setCount(count + 1)}>Increment

);
};

export default Counter;

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

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

اکوسیستم عالی

اکوسیستم React سرشار از ابزار و کتابخانه است. برای مسیریابی، React Router ناوبری را ساده می کند:

// App.js
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
import Home from ‘./Home’;
import About from ‘./About’;

const App = () => (

);

export default App;

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

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

افزایش عملکرد

DOM مجازی React به طور موثر رابط کاربری را به روز می کند. در اینجا یک مؤلفه ساده است که بهینه سازی عملکرد React را نشان می دهد:

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

const UserProfile = ({ user }) => (

);

export default UserProfile;

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

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

Next.js: جایزه

ویژگی های داخلی

Next.js React را با ویژگی‌های داخلی مانند رندر سمت سرور و تولید سایت استاتیک گسترش می‌دهد. در اینجا یک تنظیم اولیه صفحه آورده شده است:

// pages/index.js
import React from ‘react’;

const HomePage = () => (

);

export default HomePage;

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

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

مسیریابی مبتنی بر فایل

Next.js از یک سیستم مسیریابی مبتنی بر فایل استفاده می کند، جایی که ساختار فهرست صفحات مسیرها را تعیین می کند. مثلا:

نقشه های pages/index.js به /pages/about.js به /about نقشه می‌دهدبرای مسیرهای پویا، فایل هایی با براکت مربع ایجاد کنید. به عنوان مثال، صفحات/کاربران/[id]js آدرس‌های اینترنتی مانند /users/123 را مدیریت می‌کند:

// pages/users/[id].js
import { useRouter } from ‘next/router’;

const UserProfile = () => {
const router = useRouter();
const { id } = router.query;

return (

);
};

export default UserProfile;

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

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

عملکرد بهینه شده

Next.js شامل بهینه‌سازی‌های عملکردی مانند تقسیم خودکار کد و بارگذاری بهینه تصویر است. در اینجا نحوه استفاده از مؤلفه next/image آورده شده است:

// pages/index.js
import Image from ‘next/image’;

const HomePage = () => (

);

export default HomePage;

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

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

به طور خلاصه

رویکرد مبتنی بر کامپوننت و نحو اظهاری React، همراه با ویژگی‌های قدرتمند Next.js و مسیریابی مبتنی بر فایل بصری، یک تجربه توسعه هیجان‌انگیز را ایجاد می‌کند. من هیجان زده هستم که بیشتر کاوش کنم و ببینم این سفر با React و Next.js مرا به کجا می برد!

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

const Button = ({ onClick, children }) => (
  {children}
);

export default Button;

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

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

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

export default Counter;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  
    
      
      
    
  
);

export default App;

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

const UserProfile = ({ user }) => (
  
);

export default UserProfile;

// pages/index.js
import React from 'react';

const HomePage = () => (
  
);

export default HomePage;

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserProfile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    
  );
};

export default UserProfile;

// pages/index.js
import Image from 'next/image';

const HomePage = () => (
  
);

export default HomePage;