چطور یه پروژه جدید React رو شروع کنیم؟

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

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

اگه قبلا yarn روی سیستم تون نصبه میتونید این قسمت رو رد کنید

نسخه node که من دارم 16.15.1 هست. میتونید به کمک NVM نسخه node روی سیستم تون رو کنترل کنید.

من از Yarn استفاده میکنم، پس پیشنهاد میکنم اونم نصب کنید. نصب کردنش خیلی ساده هست فقط کافیه توی terminal این دستور رو بنویسید:

npm i -g yarn

ساخت پروژه با Vite و Typescript

اولین قدم اینه که پروژه رو استارت بزنیم، قبلا دو تا مطلب در مورد مقایسه Create React App و Vite نوشتم که میتونید اینجا پیداشون کنید. اینجا از vite برای استارت پروژه استفاده میکنیم. تو مسیری که میخواید پروژه رو درست کنید این دستور رو اجرا کنید:

yarn create vite

کار با vite خیلی راحته، بعد از اجرای این دستور، از بین گزینه ها react-ts رو انتخاب کنید و پروژه تون ساخته میشه.

نصب ESLint

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

برای نصبش کافیه دستور زیر رو اجرا کنید:

yarn add eslint --dev

بعد از نصب باید کانفیگش کنیم. میتونید اینکارو خیلی راحت از طریق CLI انجام بدید. این دستور رو اجرا کنید:

yarn run eslint --init

بقیه تنظیمات رو میتونین به میل خودتون انجام بدید ولی من از این تنظیمات استفاده میکنم:

بعد اینکه تموم شد، یه فایل به اسم eslintrc.js. توی root اصلی پروژه ایجاد میشه که تنظیمات linter داخلش هست. بعدا اگر خواستید چیزی از کانفیگ linter رو عوض کنید میتونید این فایل رو تغییر بدید. تا اینجا محتوای فایل یه چیزی شبیه اینه:

اینجا از code style که airbnb ارائه داده استفاده کردیم. یه جورایی بکن و نکن هایی هست که میگه چی رو چجوری بهتره بنویسیم.

توی قسمت rules میتونید خودتون ارور های لینتر رو کنترل کنید. این قوانین رو اضافه کنید اونجا:

&quotreact/jsx-filename-extension&quot: [2, { extenstions: [&quot.js&quot, &quot.ts&quot, &quot.tsx&quot, &quot.jsx&quot] }]

&quotreact/react-in-jsx-scope&quot: &quotoff&quot

این قوانین باعث میشه که هماهنگی بیشتری با Typescript داشته باشه. بعضی فایل ها نیازی به lint ندارن برای همین یه فایل به اسم eslintignore. توی root ایجاد کنید و اینا رو داخلش بنویسید:

.eslintrc.js
vite.config.ts
/node_modules
/build

دستور lint هم داخل package.json قسمت scripts اضافه کنید:

&quotlint&quot: &quoteslint --fix --ignore-path .eslintignore --ignore-pattern \&quot!**/.*\&quot .&quot

یه بار هم تستی yarn lint رو اجرا کنید ببینید چه ارور هایی بهتون نشون میده.

نصب و کانفیگ Prettier

این یکی خیلی شبیه همون Eslint هست با این تفاوت که بیشتر روی فرمت کد تمرکز داره، تر تمیز میکنه و مرتب میکنه و این چیزا خلاصه. نصبش راحته:

yarn add prettier -D

بعد نصبش اینم باید کانفیگ کنیم ولی نکته مهمش اینه که باید حتما کاری کنیم که با Linter هماهنگ باشه وگرنه دعواشون میشه. به خاطر همین مجبوریم چندتا پلاگین اضافه هم نصب کنیم:

yarn add @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier prettier -D

بعد باید فایل eslintrc.js. رو تغییر بدیم. قسمت extends این موارد رو اضافه کنید:

extends: [
   &quotplugin:@typescript-eslint/recommended&quot,
   &quotplugin:react/recommended&quot,
   &quotplugin:prettier/recommended&quot
]

بعد میتونید کانفیگ prettier رو انجام بدید، برای همین یه دونه فایل به اسم prettierrc.json. بسازید و داخلش این مقادیر رو بذارید: (یادتون باشه بعدا هر زمان که دوست داشتید میتونید تنظیمات این فایل رو به میل خودتون عوض کنید)

{
   &quotprintWidth&quot: 120,
   &quottabWidth&quot: 2,
   &quotuseTabs&quot: false,
   &quotsemi&quot: true,
   &quotsingleQuote&quot: true,
   &quotquoteProps&quot: &quotas-needed&quot,
   &quotjsxSingleQuote&quot: true,
   &quottrailingComma&quot: &quotall&quot,
   &quotbracketSpacing&quot: false,
   &quotarrowParens&quot: &quotalways&quot
}

خب دیگه اینم از این! الان دیگه به کمک prettier میتونید کدتون هم فرمت کنید.

نصب و ستاپ ابزار های تست

معمولا برای پروژه ها دو مدل تست لازم داریم. unit test و تست e2e. کتابخونه ری-اکت برای یونیت تست ها به صورت built-in راهکار داره و اونم استفاده از React Testing Library هست. البته ناگفته نباشه که انواع تست های دیگه هم داریم ولی این دو مدل تست تقریبا تو همه پروژه ها هست.

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

این دستور رو اول اجرا کنید:

yarn add jest cypress @types/jest @babel/preset-typescript @babel/preset-env @babel/preset-react -D

ممکنه نصب cypress یکم طول بکشه چون حجمش بالاست. بعد از نصبش یه دستور ساده میتونید اجرا کنید که اپلیکیشن cypress رو اجرا میکنه و از اونجا به بعد با GUI میتونید ادامه کارو انجام بدید.

ولی کانفیگ Jest یکم بیشتر کار میبره. اول دستور مربوط به تست اش رو توی قسمت scripts از فایل package.json اضافه کنید.

&quottest&quot: &quotjest&quot

توی root یه فایل کانفیگ babel به اسم babelrc. ایجاد کنید و توش اینا رو بذارید:

{
   &quotpresets&quot: [
      &quot@babel/preset-env&quot,
      &quot@babel/preset-react&quot,
      &quot@babel/preset-typescript&quot
   ],
   &quotplugins&quot: []
}

حالا jest دنبال این فایل ها میگرده برای اینکه تست ها رو انجام بده:

1. فایل هایی که آخرشون با test.js. تموم بشه
2. فایل هایی که توی فولدر __tests__ باشن
3. فایل هایی که آخرشون با spec.js. تموم بشه

برای اطلاعات کامل تر میتونید اینجا رو بخونید.

اینم از تست ها، ولی لازمه که برای ESLint هم Jest رو کانفیگ کنیم که مشکلی براش پیش نیاد. پس نیازه که این dependency ها رو هم نصب کنیم:

yarn add -D eslint-plugin-jest

بعدش هم توی فایل eslintrc. این قسمت ها رو آپدیت کنید:

&quotplugins&quot: [&quotjest&quot]
&quotextends&quot: [&quotplugin:jest/recommended&quot]

خب اینم تمومه.

نصب tailwind و styled-components

هر دو این ابزار ها به ما کمک میکنن که بتونیم به کامپوننت هامون استایل بدیم. یکی مثل tailwind مدلش به صورت helper class هاست و فایل کانفیگ که البته مزایای دیگه ای هم داره مثل حذف استایل های تکراری و سرعت توسعه و prefix کردن استایل ها و ... . در کنارش بعضی جاها که نمیتونیم از tailwind استفاده کنیم styled-component به دادمون میرسه. قبلا در مورد styled-components یه مطلب نوشتم که میتونید اینجا پیداش کنین.

بریم که نصبش کنیم: (میتونید راهنمای کاملش رو از داکیومنت اش بخونید)

yarn add -D styled-components tailwindcss postcss autoprefixer

بعد از نصب کارمون با styled-components تموم میشه ولی برای tailwind باید چند قدم دیگه برداریم. tailwind برای اینکه کار کنه باید حتما postcss رو کانفیگ کنیم (البته راه های دیگه هم داره ولی برای من این از بقیه بهتر جواب داده). خود tail کار رو برامون راحت کرده، به طوری که میتونید این دستور رو اجرا کنید و فایل کانفیگ رو براتون ایجاد کنه:

npx tailwindcss init

که یه دونه فایل tailwind.config.js میسازه. از طریق این فایل میتونید بعدا تنظیمات tailwind رو انجام بدید. داخل این فایل توی قسمت content این مقدار رو قرار بدید:

&quotcontent&quot: [&quot.src/**/*.{html,js,jsx,ts,tsx}&quot]

و در آخر توی فایل App.css این مقادیر رو قرار بدید:

 @tailwind base;
 @tailwind components;
 @tailwind utilities; 

این کار باعث میشه از این به بعد tailwind کار کنه و کلاس هایی که به المان ها میدید اعمال بشه. بعدا اگر خواستید استایل ها رو تغییر بدید یا یه سری کلاس جدید tail ایجاد کنید توی همین فایل میتونید اینکارو بکنید.

در مورد ستاپ کردن Storybook هم چون خیلی مفصله یه مطلب در موردش نوشتم قبلا که پیشنهاد میکنم اونو بخونید.

کتابخونه های third-party

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

• کتابخونه react-router-dom: برای هندل کردن مسیر ها و صفحات
• کتابخونه use-debounce, axios, axios-retry: برای ریکوئست ها و ...
• کتابخونه redux, redux-thunk, redux-persist, redux-logger: مدیریت استیت کلی اپلیکیشن، به همراه لاگ و ...
• کتابخونه clsx: نوشتن کلاس استایل ها رو برامون خیلی ساده تر میکنه
• کتابخونه react-hook-form, zod: برای validation فرم ها
• کتابخونه i18n: به کمک این ابزار میتونیم اپلیکیشن رو چند زبانه کنیم
• کتابخونه react-query: هندل کردن بحث cache برای ریکوئست ها و ... (حتی میتونید به عنوان جایگزین redux ازش استفاده کنید)
• کتابخونه react-app-polyfill: برای ساپورت بهتر مرورگر های قدیمی
• کتابخونه react-error-boundary: برای هندل کردن exception هایی که ممکنه کامپوننت ها بر بخورن.
• کتابخونه ramda یا lodash: برنامه نویسی functional رو بهتر میتونید انجام بدید

دستور زیر رو اجرا کنید:

yarn add react-router-dom axios axios-retry redux redux-thunk redux-persist redux-logger clsx react-hook-form zod i18n-js @hookform/resolvers react-query react-app-polyfill ramda use-debounce react-error-boundary

اگر دوست داشتید این مطلب ادامه داشته باشه و در مورد ساختار فایل ها و فولدر ها هم صحبت بشه توی کامنت ها بهم بگید! شاید ادامه اش رو نوشتیم!