20 تکنیک React.js برای مبتدیان در سال 2025

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

1 اصول JSX را درک کنید

JSX یک پسوند نحوی برای JavaScript است که شبیه XML یا HTML است. این یک بخش اساسی از React است و به شما امکان می دهد کد HTML مانند را در JavaScript بنویسید. JSX را در آغوش بگیرید زیرا باعث می شود کد شما قابل خواندن و نوشتن آسان تر باشد.

مثال:

const element = <h1>Hello, world!h1>;

2 معماری مبتنی بر قطعات

React همه چیز در مورد مؤلفه ها است. UI خود را به قطعات قابل استفاده مجدد تقسیم کنید تا کارآمدتر برنامه خود را مدیریت و بسازید. از مؤلفه ها به عنوان بلوک های ساختمانی که می توانند به روش های مختلف مونتاژ شوند ، فکر کنید.

مثال:

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

3 مؤلفه های عملکردی در مقابل کلاس

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

مثال:

// Functional Component
function Greeting({ name }) {
  return <h1>Hello, {name}!h1>;
}

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

4 مدیریت دولت

درک وضعیت بسیار مهم است. از useState قلاب در اجزای کاربردی برای مدیریت وضعیت محلی. به یاد داشته باشید ، دولت باید تا حد امکان ساده نگه داشته شود تا از پیچیدگی جلوگیری شود.

مثال:

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

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

5 حفاری غرفه

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

مثال:

function Parent() {
  return <Child message="Hello from Parent!" />;
}

function Child({ message }) {
  return <p>{message}p>;
}

6 حالت بلند کردن

هنگامی که چندین مؤلفه نیاز به به اشتراک گذاشتن دولت دارند ، آن را به نزدیکترین جد مشترک خود بلند کنید. این تکنیک به حفظ یک منبع حقیقت برای داده های شما کمک می کند.

مثال:

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

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
}

function Child({ count }) {
  return <p>Count: {count}p>;
}

7 قلاب: بهترین دوستان جدید شما

قلاب مانند useEffectبا useContext، و قلاب های سفارشی تغییر دهنده بازی هستند. آنها به شما امکان می دهند از حالت و سایر ویژگی های React در مؤلفه های کاربردی استفاده کنید و کد شما را مختصر تر و قابل استفاده مجدد می کند.

مثال:

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

8 API زمینه برای دولت جهانی

برای مدیریت دولت جهانی ، API زمینه یک نجات دهنده است. این امکان را به شما می دهد تا داده ها را از طریق درخت مؤلفه عبور دهید بدون اینکه در هر سطح به صورت دستی به صورت دستی عبور کنید.

مثال:

const MyContext = React.createContext();

function Parent() {
  const value = "Hello from Context!";
  return (
    <MyContext.Provider value={value}>
      <Child />
    MyContext.Provider>
  );
}

function Child() {
  return <GrandChild />;
}

function GrandChild() {
  const value = useContext(MyContext);
  return <p>{value}p>;
}

9 ارائه مشروط

اجزای ارائه شده به طور مشروط بر اساس حالت یا غرفه ها. از اپراتورهای منطقی JavaScript برای کنترل آنچه نمایش داده می شود ، استفاده کنید و UI خود را پویا و پاسخگو می کند.

مثال:

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!h1> : <h1>Please sign up.h1>;
}

10 لیست ها و کلیدها

هنگام ارائه لیست ها ، همیشه یک منحصر به فرد ارائه دهید key به هر عنصر اختصاص دهید. این به واکنش نشان می دهد که کدام موارد را تغییر داده ، اضافه شده یا حذف شده اند ، بهینه سازی روند ارائه.

مثال:

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}li>
      ))}
    ul>
  );
}

11 رسیدگی به رویداد

رسیدگی به وقایع در React ساده است. گیرنده های رویداد خود را به عنوان توابع تعریف کنید و آنها را به عنوان غرفه به اجزای خود منتقل کنید. به یاد داشته باشید که از رویدادهای مصنوعی ارائه شده توسط React استفاده کنید.

مثال:

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click mebutton>;
}

12 اجزای کنترل شده

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

مثال:

function Form() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

13 مرزهای خطا

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

مثال:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.h1>;
    }

    return this.props.children;
  }
}

14 تقسیم کد و بارگیری تنبل

عملکرد برنامه خود را با تقسیم کد و بارگیری تنبل بهبود بخشید. از React استفاده کنید React.lazy وت Suspense برای بارگیری قطعات فقط در صورت نیاز ، کاهش زمان بار اولیه.

مثال:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...div>}>
      <LazyComponent />
    React.Suspense>
  );
}

15 اجزای مرتبه بالاتر (HOC)

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

مثال:

function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const EnhancedComponent = withLogger(MyComponent);

16 قلاب های سفارشی

قلاب های سفارشی را برای محاصره و استفاده مجدد از منطق حالت ایجاد کنید. آنها به شما امکان می دهند منطق مؤلفه را در توابع قابل استفاده مجدد استخراج کنید و اجزای خود را تمیز تر و متمرکز تر کنید.

مثال:

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

17 روتر برای ناوبری واکنش نشان می دهد

برای برنامه های تک صفحه ای ، روتر React ضروری است. این امکان را به شما می دهد تا مسیرها را تعریف کرده و بین دیدگاههای مختلف حرکت کنید و یک تجربه کاربر بدون درز را ارائه دهید.

مثال:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="https://dev.to/about" component={About} />
        <Route path="/home" component={Home} />
      Switch>
    Router>
  );
}

18 اجزای یک ظاهر طراحی شده

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

مثال:

// Using styled-components
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

19. آزمایش با کتابخانه تست Jest و React

تست ها را بنویسید تا اطمینان حاصل شود که اجزای شما مطابق آنچه انتظار می رود کار کنند. کتابخانه تست Jest و React گزینه های محبوب است که به خوبی با React ادغام می شود و به شما در گرفتن زودرس اشکالات کمک می کند.

مثال:

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

20 بهینه سازی عملکرد

عملکرد برنامه خود را با استفاده از تکنیک هایی مانند Memoization با بهینه سازی کنید React.memo وت useMemo، و جلوگیری از بازپرداخت مجدد غیر ضروری. برنامه خود را با استفاده از ابزارهای داخلی React برای شناسایی تنگناها مشخص کنید.

مثال:

const MyComponent = React.memo(({ data }) => {
  return <div>{data}div>;
});

function Parent({ data }) {
  const memoizedData = useMemo(() => expensiveComputation(data), [data]);
  return <MyComponent data={memoizedData} />;
}

عالی! شما می توانید خوانندگان را ترغیب کنید تا با استفاده از تماس به اقدام در پست وبلاگ خود ، حساب GitHub خود را دنبال کنند. در اینجا چگونه می توانید آن را در نتیجه وبلاگ خود ادغام کنید:

پایان

تبریک می گویم که اولین قدم ها را به دنیای React.js برداشته اید! با تسلط بر این 20 تکنیک ، در راه ساختن برنامه های وب قوی و کارآمد به خوبی خواهید بود. سفر یادگیری را در آغوش بگیرید ، با ایده های جدید آزمایش کنید و از همه مهمتر ، برنامه نویسی سرگرم کننده داشته باشید!

اگر این راهنما را مفید دانستید ، دوست دارم شما را در GitHub در Sovannaro برای نکات مربوط به برنامه نویسی ، پروژه ها و به روزرسانی های بیشتر دنبال کنید. بیایید در جامعه React با هم ارتباط برقرار کنیم و رشد کنیم!

برنامه نویسی مبارک! 🎉💻