برگه تقلب نهایی React.js: تسلط بر React.js آسان شد⚛️

Summarize this content to 400 words in Persian Lang

مقدمه

React.js به یک عنصر اصلی در توسعه وب مدرن برای ایجاد رابط های کاربری تعاملی و پویا تبدیل شده است. معماری مبتنی بر مؤلفه آن، توسعه برنامه‌های کاربردی صفحه تک (SPA) را با ارائه یک رابط کاربری اعلامی و استفاده از مفهوم DOM مجازی ساده می‌کند. این برگه تقلب برای راهنمایی شما در مورد موارد ضروری React.js از درک اصول اولیه تا تسلط بر تکنیک های پیشرفته طراحی شده است. چه مبتدی باشید و چه به دنبال بهبود مهارت های خود باشید، این راهنما منبع اصلی شما برای تسلط بر React.js است.

1. درک اصول React.js

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

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

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

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

JSX (جاوا اسکریپت XML): JSX به شما این امکان را می دهد که دستور زبان HTML را مستقیماً در کد جاوا اسکریپت خود بنویسید و کار با آن را آسان تر و بصری تر می کند.

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

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

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

DOM مجازی: Virtual DOM React یک کپی سبک از DOM واقعی است که امکان به روز رسانی و رندر کارآمد را فراهم می کند و عملکرد برنامه را بهبود می بخشد.

2. ابزارهای ضروری و کتابخانه ها

بابل: یک کامپایلر جاوا اسکریپت که به شما امکان می دهد کدهای جاوا اسکریپت مدرن، از جمله JSX را بنویسید و آن را به یک نسخه سازگار با مرورگر تبدیل می کند.

// Babel transforms this JSX:
const element = h1>Hello, world!/h1>;
// Into this:
const element = React.createElement(‘h1’, null, ‘Hello, world!’);

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

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

پک وب: یک بسته ماژول که به مدیریت دارایی ها و وابستگی های پروژه کمک می کند و آنها را برای بارگذاری کارآمد بهینه می کند.

Redux: یک کتابخانه مدیریت حالت که وضعیت برنامه سازگار و قابل پیش بینی را تضمین می کند، که اغلب با React.js استفاده می شود.

import { createStore } from ‘redux’;

function reducer(state = {}, action) {
switch (action.type) {
case ‘INCREMENT’:
return { count: state.count + 1 };
default:
return state;
}
}

const store = createStore(reducer);

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

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

3. اجزای عملکردی و قلاب ها

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

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>
);
}

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

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

قلاب های کلید:

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

useEffect: عوارض جانبی مانند واکشی داده یا اشتراک را کنترل می کند.

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

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

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

useContext: راهی برای عبور داده ها از درخت کامپوننت بدون ارسال دستی props فراهم می کند.

4. کار با JSX

JSX به شما اجازه می دهد تا سینتکس HTML مانند را با عبارات جاوا اسکریپت ترکیب کنید. این قابلیت اجزای شما را پویاتر و تعاملی تر می کند. از JSX برای رندر شرطی عناصر، نقشه روی آرایه ها و جاسازی متغیرها به طور مستقیم در UI خود استفاده کنید.

const user = {
firstName: ‘Harper’,
lastName: ‘Perez’
};

const element = (
h1>
Hello, {formatName(user)}!
/h1>
);

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

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

5. خواص (Props)

Props راهی برای انتقال داده‌ها از اجزای والد به فرزندانشان است که به شما امکان می‌دهد رفتار و ظاهر اجزای فرزند را کنترل کنید. لوازم جانبی قطعات شما را قابل استفاده مجدد و نگهداری می کند.

function Greeting(props) {
return h1>Hello, {props.name}/h1>;
}

// Usage
Greeting name=”Sara” />

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

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

6. استایل کردن در React

سبک های درون خطی: با استفاده از اشیاء جاوا اسکریپت استایل ها را مستقیماً در اجزای خود تعریف کنید. سبک های درون خطی می توانند به صورت پویا بر اساس وضعیت مؤلفه یا پروپوزال تنظیم شوند.

const divStyle = {
color: ‘blue’,
backgroundColor: ‘lightgray’,
};

function StyledComponent() {
return div style={divStyle}>Styled with Inline CSS/div>;
}

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

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

کتابخانه های CSS-in-JS: کتابخانه‌هایی مانند Styled Components یا Emotion به شما امکان می‌دهند تا CSS را در کد جاوا اسکریپت خود بنویسید، سبک‌ها و منطق را با هم برای نگهداری بهتر محصور کنید.

import styled from ‘styled-components’;

const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;

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

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

7. مدیریت دولتی

State داده ای است که رفتار و رندر یک جزء را کنترل می کند. از قلاب useState برای مدیریت وضعیت مؤلفه محلی و از setState برای ایجاد رندرهای مجدد در هنگام تغییر حالت استفاده کنید.

function Example() {
const [state, setState] = useState({ count: 0 });

return (
div>
p>You clicked {state.count} times/p>
button onClick={() => setState({ count: state.count + 1 })}>
Click me
/button>
/div>
);
}

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

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

8. رسیدگی به رویدادها

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

function handleClick(e) {
e.preventDefault();
console.log(‘The link was clicked.’);
}

a href=”#” onClick={handleClick}>Click me/a>

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

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

9. رندر مشروط

رندر شرطی به کامپوننت ها اجازه می دهد تا بر اساس شرایط خاص خروجی های متفاوتی را ارائه دهند. از عبارات شرطی جاوا اسکریپت مانند if-else یا اپراتورهای سه تایی در JSX برای ارائه پویا محتوا استفاده کنید.

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return h1>Welcome back!/h1>;
}
return h1>Please sign up./h1>;
}

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

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

10. React Router

React Router شما را قادر می سازد تا SPA هایی با نماهای متعدد و ناوبری یکپارچه ایجاد کنید. مسیرها را تعریف کنید و آنها را به مؤلفه‌ها پیوند دهید تا کاربران بتوانند بدون زحمت در برنامه شما حرکت کنند. همچنین از مسیریابی پویا و مسیرهای تو در تو پشتیبانی می کند و انعطاف پذیری ناوبری برنامه شما را افزایش می دهد.

import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;

function App() {
return (
Router>
div>
nav>
Link to=”/”>Home/Link>
Link to=”/about”>About/Link>
/nav>
Route path=”/” exact component={Home} />
Route path=”/about” component={About} />
/div>
/Router>
);
}

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

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

نتیجه گیری

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

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

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

// Babel transforms this JSX:
const element = h1>Hello, world!/h1>;
// Into this:
const element = React.createElement('h1', null, 'Hello, world!');

import { createStore } from 'redux';

function reducer(state = {}, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

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>
  );
}

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  h1>
    Hello, {formatName(user)}!
  /h1>
);

function Greeting(props) {
  return h1>Hello, {props.name}/h1>;
}

// Usage
Greeting name="Sara" />

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
};

function StyledComponent() {
  return div style={divStyle}>Styled with Inline CSS/div>;
}

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

function Example() {
  const [state, setState] = useState({ count: 0 });

  return (
    div>
      p>You clicked {state.count} times/p>
      button onClick={() => setState({ count: state.count + 1 })}>
        Click me
      /button>
    /div>
  );
}

function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}

a href="#" onClick={handleClick}>Click me/a>

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return h1>Welcome back!/h1>;
  }
  return h1>Please sign up./h1>;
}

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

function App() {
  return (
    Router>
      div>
        nav>
          Link to="/">Home/Link>
          Link to="/about">About/Link>
        /nav>
        Route path="/" exact component={Home} />
        Route path="/about" component={About} />
      /div>
    /Router>
  );
}