# خلاصه پروژه و نصب node

در این بخش می‌خوایم برای یادگیری مثال‌های عملی و دست به کد شدن، شروع کنیم به پیاده‌سازی یک web application ساده. کلیت قضیه یه بخش ساده ولی مهم از دیواره، فقط چند تا چیز کوچیک هست که باید قبل از شروع، در موردشون بدونیم.

پیشنهاد می‌کنیم پیش از شروع دوره‌ی آموزشی هزاردستان رو بخونی. احتمالاً لازمه VPN رو روشن کنی!

# ES6

ورژن جدید جاوا اسکریپت که با نام‌های ES6 و ES2015 شناخته‌ میشه، یک سری سینتکس و امکانات جدید رو به زبون معرفی کرد. موارد زیر رو بخون:

1. Arrow functions

2. Classes

3. let vs const

موارد اضافه شده به زبان، به همین سه مورد محدود نمیشه. جلوتر با بقیه امکاناتش آشنا میشیم.

تمرین: تو داک «مفاهیم 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

# کنترل نسخه و github

پیش‌تر با کنترل نسخه و دلایل استفاده از این ابزارها آشنا شدی. از این مرحله به بعد می‌خوایم تمام کدهای پروژه با ابزار کنترل نسخه git پیش بره. برای اینکار ابتدا یک اکانت روی github بساز و بعد یک repository درست کن.

در پوشه‌ی پروژه گیت رو init کن و پروژه رو روی repository که در github ساختی 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 ادغام می‌شه.