چطور یه پروژه جدید 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 دنبال این فایل ها میگرده برای اینکه تست ها رو انجام بده:فایل هایی که آخرشون با test.js. تموم بشهفایل هایی که توی فولدر __tests__ باشنفایل هایی که آخرشون با 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اگر دوست داشتید این مطلب ادامه داشته باشه و در مورد ساختار فایل ها و فولدر ها هم صحبت بشه توی کامنت ها بهم بگید! شاید ادامه اش رو نوشتیم! https://github.com/hesan-aminiloo/yet-another-react-starter