پیش نیازهای جاوااسکریپتی قبل از ورود به ری‌اکت

می‌خوایم با ویژگی‌هایی از جاوااسکریپت آشنا بشیم که بیشترین استفاده رو توی ری‌اکت دارن و هر توسعه‌دهندهٔ ری‌اکتی لازمه اونها رو بدونه!

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

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

تقریباً برای همه مواردی که بهشون اشاره می‌کنیم، توی صفحه شخصی من در ویرگول مقاله‌های آموزشی اختصاصی وجود داره ??

در ضمن پیشنهاد میشه نسخه صوتی بالارو گوش کنید بنظرم خیلی باحاله :))))))))))))))

پیش نیازهای ورود به ری اکت

۱. توابع جاوااسکریپت

توی دل هر برنامهٔ ری‌اکتی شاید بیشتر از هر چیز دیگه‌ای کامپوننت‌ها دیده بشن. یکی از رایج‌ترین راه‌های ساختن کامپوننت‌های ری‌اکتی استفاده از یک تابع هست:

function Component1(props) {
  return <h1>Welcome dear {props.user.name}!</h1>;
}

const Component2 = (props) => {
  return <h1>Welcome dear {props.user.name}!</h1>;
}

تابع جاوااسکریپت که می‌تونن به شکل‌های مختلف ساخته بشن، جزئیات مهمی مثل کلمه‌کلیدی this و Hoisting دارن که دونستن اونها اهمیت بالایی داره. برای درک توابع و همچنین موضوع‌های وابسته به اون، پست‌های زیر رو بخونید:

• توابع توی جاوااسکریپت
• کلمه‌کلیدی this
• Arrow Function ها به زبان ساده
• مفهوم Hoisting در جاوااسکریپت
• مفهوم اسکوپ‌ها (Scopes) در جاوااسکریپت
• کلوژرها در جاوااسکریپت<br/>

۲. کلاس‌ها

یک راه دیگه برای ساختن کامپوننت‌های ری‌اکت استفاده از کلاس‌های جاوااسکریپت هست:

class Car extends React.Component {
  constructor() {
    super();
    this.state = { color: &quotBlack&quot };
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

توی همین کامپوننتِ ساده نکته‌های زیادی مثل ارث‌بری، Constructor و کلمه‌کلیدی this وجود داره که برای آشنایی کامل با اونها می‌تونین این پست رو ببینین:

۳. Template Literals

توی جاوااسکریپت روش‌های زیادی برای ساختن و کار با رشته‌ها وجود داره که Template Literals یک روش مدرن و کاربردی برای کار با رشته‌های پیچیده به حساب میاد. یک رشته با Template Literals با استفاده از کارکتر Backtick یا ` ساخته میشه:

const name = &quotMario&quot
console.log(`Welcome ${name}!`);


// In react
function User({ user }) {
  return (
    <div className={`user-${user.type}`}>
      ...
    </div>
  );
}

وقتی رشته‌های پیچیده داریم (مثلاً رشته‌های چند خطی یا رشته‌هایی که با یک عبارت جاوااسکریپتی میکس میشن) استفاده از Template Literals بهترین گزینه هست. چون باعث میشه کدهای خلاصه‌تر و خواناتر داشته باشیم.

۴. شرط‌های کوتاه با عملگرهای Ternary و && و ||

استفاده از این عملگرها خیلی زیاد توی یک برنامهٔ ری‌اکتی دیده میشه:

function User() {
  const isLoggedIn = true;  

  return <h1>Welcome {isLoggedIn ? 'User' : 'Guest'}</h1>
}

این راه در واقع یک راه کوتاه‌تر برای نوشتن چنین کدی هست:

function User() {
  const isLoggedIn = true;  
  let message = '';

  if (isLoggedIn) {
    message = <h1>Welcome User</h1>;
  } else {
    message = <h1>Welcome Guest</h1>;
  }

  return message;
}

همچنین استفاده از عملگر Logial AND یا && هم کاربردهای زیادی توی JSX داره:

const isLoggedIn = true;

const el = (
  <div>
    { isLoggedIn && <LogoutButton /> }
  </div>
);

توی این کد، کامپوننت LogoutButton فقط زمانی پردازش میشه که loggedIn یک مقدار truthy باشه. پس چنین عملگرهایی کمک می‌کنن تا کدهای خلاصه‌تری بنویسیم.

۵. متدهای کاربردی آرایه‌ها

توی ری‌اکت و مخصوصاً وقتی که با JSX سر و کار داریم، قطعاً متدهای زیادی از آرایه‌ها مثل map و filter و reduce به کارمون میان. درک اونها و نحوهٔ کارکردن اونها کمک می‌کنه تا برنامهٔ خلاصه‌تر و معنادارتر بنویسیم.

برای مثال اگه یک آرایه داریم و می‌خوایم اعضای اون رو نمایش بدیم، چیزی که مستندات ری‌اکت بهمون پیشنهاد می‌کنه استفاده از متد map هست:

const users = [&quotMario&quot, &quotEmily&quot, &quotSarah&quot, &quotDavid&quot];

<ul>
  {
    users.map(
      user => <li key={user}>{user}</li>
    )
  }
</ul>

برای آشنایی بیشتر با این متدها این سری پست‌ها رو ببینین:

۶. Destructuring

دیستراکچِرینگ یکی از محبوب‌ترین ویژگی‌های جاوااسکریپت هست که کاربرد اون توی هر قسمتی از برنامه قابل لمس هست:

function UserProfile({ user }) {
  const [count, setCount] = useState(0);

  const { name, avatar } = user;
  const [avatarLarge, avatarSmall] = avatar;

  return <img src={avatarLarge}&quot />
}

تصور کنین بدون این قابلیت چه حجم از کدهایی باید می‌نوشتیم:

function UserProfile(props) {
  const countState = useState(0);
  const count      = countState[0];
  const setCount   = countState[1];

  const user   = props.user;
  const name   = user.name;
  const avatar = user.avatar;

  const avatarLarge = avatar[0];
  const avatarSmall = avatar[1];

  return <img src={avatarLarge}&quot />
}

دیستراکچرینگ قابلیتی هست که هم برای آرایه‌ها و هم برای آبجکت‌ها در دسترسه که با لینک زیر می‌تونین کامل با اون آشنا بشین:

۷. اعضای Rest و عملگر Speard

سه‌نقطه‌های جذاب ... درست مثل Destructuring از کاربردی‌ترین ویژگی‌هایی بودن که از ES6 به جاوااسکریپت اضافه شدن تا به کدهامون خوانایی و سرعت ببخشن:

function UserProfile({user, children, ...otherProps}) {
  return <h1 {...otherProps}>Welcome {user.name}</h1>
}

توی این کد که می‌خواستیم هر پراپرتی که به کامپوننت پاس داده میشه رو به h1 هم پاس بدیم، هم از عضو Rest استفاده شده (خط ۱) و هم از عملگر Spread (خط ۲). بدون استفاده از این قابلیت‌ها باید همه پراپرتی‌ها رو به صورت دستی می‌خوندیم و توی h1 می‌نوشتیم.

برای آشنایی بیشتر با این ویژگی‌ها پست‌های زیر رو ببینین:

۸. ماژول‌های اکمااسکریپت

• این روزها ساختن یک برنامهٔ بزرگ بدون ذهنیت ماژولار غیر قابل تصور هست. یک برنامهٔ مدرنِ ری‌اکتی برای قابل توسعه بودن از بخش‌های کوچک خیلی زیادی تشکیل میشه و این بخش‌ها با استفاده از قابلیت ماژول‌های ES به هم مرتبط میشن:

// src/components/forms/index.js

import { TextField } from './TextField/TextField';
import { Select } from './Select/Select';
import { Radio } from './Radio/Radio';

export { TextField, Select, Radio };

بدون استفاده از این ویژگی، هر فایل میزبان هزاران خط کدهای غیر مرتبط به هم هست که در نتیجه توسعه و خوانایی کدها افسانه‌ای بیش نخواهد بود.

۹. پرامیس‌ها و Async/Await

این روزها عملیات ناهمگام (Asyncronous) مثل AJAX مثل نقل و نبات توی هر برنامه‌ای دیده میشه ? و جاوااسکریپتِ امروز حتماً راهی رو برای بهتر مدیریت کردن این عملیات در اختیار قرار داده که اون پرامیس هست. اگه برنامه‌نویس وب - چه فرانت‌اند و چه بک‌اند - هستین، یادگیری و درک پرامیس‌ها و Async/Await یکی از باید هاست!

۱۰. ترفندهای آبجکت‌ها

علاوه‌بر ویژگی‌هایی مثل Destructuring، عملگر Spread و Rest که بالاتر باهاشون آشنا شدیم، آبجکت‌ها ترفندهای دیگه‌ای هم دارن که با اونها می‌تونیم مدرن‌تر، خلاصه‌تر و خواناتر کدنویسی کنیم. یکی از اونها نوشتن کوتاه‌تر نوشتن پراپرتی‌ها یا به قول معروف Property Shorthand هست:

import {Triangle, Rectangle, Circle } from './shapes';

const components = {
  Triangle,
  Rectangle,
  Circle,
  other(shape) {
    return React.lazy(() => import(shape));
  }
};

بدون این ویژگی، آبجکت components باید اینطوری نوشته میشد:

import {Triangle, Rectangle, Circle } from './shapes';

const components = {
  Triangle: Triangle,
  Rectangle: Rectangle,
  Circle: Circle,
  other: function (shape) {
    return React.lazy(() => import(shape));
  }
};

خب دوستان این قسمت هم تموم شد. مطمئناً چیزهایی که برای توسعهٔ یک برنامه امروزی وجود داره به همین مواردی که بررسی کردیم ختم نمیشه و چیزی که دوست دارم بهتون بگم اینه که تا می‌تونین جاوااسکریپتتون رو قوی‌تر کنین تا کار با ابزارهای اون راحت‌تر و البته لذت‌بخش‌تر بشه. روزتون خوش ?✌️

Resources:

https://kentcdodds.com/blog/javascript-to-know-for-react

https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/

https://www.w3schools.com/react/react_class.asp

https://www.taniarascia.com/react-architecture-directory-structure/

https://ditty.ir/