# خلاصه پروژه و نصب node
تو این قسمت میخوایم برای یادگیری مثال‌های عملی و دست به کد شدن، شروع کنیم به پیاده‌سازی یک web application ساده.کلیت قضیه یه بلاگ ساده‌است، فقط چند تا چیز کوچیک مونده که باید قبل از شروع، در موردشون بدونیم.
# ES6
ورژن جدید جاوا اسکریپت که با نام‌های ES6 و ES2015 شناخته میشه، یک سری سینتکس و امکانات جدید رو به زبون معرفی کرد. موارد زیر رو بخون:
موارد اضافه شده به زبان، به همین سه مورد محدود نمیشه. جلوتر با بقیه امکاناتش آشنا میشیم.
تمرین: تو داک «مفاهیم JavaScript»، تمرینی داشتیم که به این شکل بود:
تابعی بنویس که یه آرایه ۱۰۰ خونه‌ای از توابعی باشه که وقتی خونه iام رو صدا می‌زنی، عدد i رو لاگ کنه
var loggerArr = createLoggerArr(); loggerArr[0]() //LOG: 0 loggerArr[74]() //LOG: 74 loggerArr[120]() //TypeError: a[120] is not a function.
حالا که با مفهوم let و const آشنا شدی، یه بار دیگه، سعی کن سوال رو حل کنی و راه حل بهتری براش پیدا کنی.
# تمرین
کلاس Duck رو پیاده سازی کن که موقع ایجاد پارامتر voice رو میگیره و ذخیره میکنه، براش یه متد quack تعریف کن که موقع فراخوانی voice رو توی کنسول چاپ کنه. بعدا کلاس AngryDuck رو با ارث‌بری از کلاس Duck پیاده سازی کن که متد quack مقدار voice که در constructor کلاس پدر گرفته میشه رو بصورت کاملا حروف بزرگ توی کنسول چاپ کنه. وقت دست به کد شدنه.
وقتی اینا رو تموم کردی وقتشه بریم پروژه اصلی رو شروع کنیم.
# قدم اول: نصب nodejs و npm
Nodejs امکان اجرای پروژه‌های جاوا اسکریپت رو بدون مرورگر برای ما فراهم میکنه. npm هم اسم package manager نود هست که به ما امکان میده کتاب‌خونه های جاوااسکریپتی رو راحت‌تر نصب کنیم و ازشون استفاده کنیم. npm برای کار کردن نیاز به فایلی به نام package.json داره که در موردش اینجا میتونی بخونی.
برای نصب NodeJS برو به اینجا.
البته تو این پروژه ما بیشتر کارمون با npm، محدود میشه به نصب‌کردن پکیج‌های مختلف.
همچنین در مورد yarn هم میتونی این لینک رو بخونی که package manager دیگه‌ای برای نود هست و سرعت و کارایی بیشتری داره، فعلا برای پروژه آموزشی ضروری نیست ولی توی پروژه واقعی شاید لازمت بشه.
درباره‌ی lock file اینجا بخون.
# قدم دوم: نصب create-react-app
از اونجا که قراره پروژه رو با ری‌اکت انجام بدی فعلا میخوایم ساختار کلی پروژه رو تولید کنی تو فصل بعد کار با ری‌اکت شروع میشه. پکیج create-react-app که از طریق npm بصورت global باید نصب بشه کارش اینه که structure اولیه پروژه رو تولید میکنه. برای نصب این پکیج دستور زیر رو اجرا کن:
sudo npm install -g create-react-app
هدف کلی این پکیج اینه که کسی که می‌خواد شروع کنه به زدن کد React، مجبور نباشه که همه این مراحل رو دستی طی کنه.
# قدم سوم: ساخت پروژه با create-react-app
create-react-app blog
cd blog && npm install
# تمرین
تحقیق کن که npm install چیکار میکنه و کامند‌های زیر هر کدوم دقیقا چه کاری انجام میدن (لزومی نیست بخونی که هر کدوم از این پکیج ها چیکار می‌کنن):
npm install -g eslint
npm install -D webpack-dev-server
npm install --production
npm install why-did-you-update@v0.1.0
# کنترل نسخه و gitlab
پیش‌تر با کنترل نسخه و دلایل استفاده از این ابزارها آشنا شدی. از این مرحله به بعد میخوایم تمام کدهای پروژه با ابزار کنترل نسخه git پیش بره. برای اینکار ابتدا یک اکانت روی گیت‌لب بساز و بعد یک private repository ایجاد کن.
در فولدر پروژه گیت رو init کن و پروژه رو روی repository که در گیت‌لب ساختی push کن.
# نحوه مدیریت کد با git
روش‌های معتددی برای کار کردن یه تیم با گیت وجود داره. روشی که توی شرکت ازش استفاده میشه و انتظار می‌ره در پروژه آموزشی فرانت‌اند هم دنبال بشه، به شکل زیر هست:
از برنچ مستر (master branch) یه branch جدید می‌گیریم و اسم اون رو متناسب با کاری که میخوایم انجام بدیم می‌ذاریم. مثلاً اگه از ما خواسته شده برای پست‌های دیوار فیچر کامنت گذاشتن رو اضافه کنیم، نام branch همچین چیزی میشه:
feature/add-comment-to-posts
یا مثلا:
feature/comment-for-posts
نکته مهم، اینه که اینجا نمی‌خوایم چیزی در مورد نحوه پیاده‌سازی فنی قضیه تو اسم branch بیاریم. بلکه سعی می‌کنیم اسم برنچ رو چیزی بگذاریم که اهمیت محصولی داره. مگر این که جنس کاری که میخوایم انجام بدیم، اهمیت محصولی زیادی نداشته‌باشه. مثلاً refactor کردن بخشی از کد، از دید کاربر نهایی، احتمالا ارزش زیادی نداره. این‌جور جاها، مشکلی نیست که جنس کار + اسکوپش رو به عنوان نام branch انتخاب کنیم. مثلاً:
refactor/browse-component
fix/typo-in-post-page
fix/lint-errors-submit-page
بعد گرفتن branch جدید، کار خواسته شده رو انجام می‌دیم. موقع نوشتن commit message، سعی می‌کنیم این توضیح رو کمی دقیق‌تر کنیم و کلیتی از پیاده‌سازی فنی رو گاهی اوقات میاریم. پیش‌تر درباره یک commit message مناسب مطالعه کردی.
بعد از این تغییرات رو push کن. سپس یه merge request به master بفرست و به مربی‌ات assign کن. بعد از بررسی مربی تغییراتت تأیید یا رد میشه. درصورت رد باید تغییرات لازم رو بدی و درصورت تأیید branchت با master ادغام میشه.