سلام رفقا ، به پارت دوم خیلی خوش اومدین . تا اینجا ما اومدیم با مقدمات React و همچنین با ویژگی های اون اشنا شدیم و همونطور که قولش رو داده بودم ، در پارت دوم قرار هست به کمک هم محیط توسعه مون رو راه اندازی کنیم و با پکیج create-react-app آشنا بشیم و ببینیم که اگر همچین پکیجی وجود نداشت با چه مشکلاتی مواجه میشدیم ! خوب منتظر چی هستین ؟ بیاین شروع کنیم ...
ما برای کار با پروژه های React ، نیاز به یک محیط کار محلی داریم یعنی محیطی که روی سیستم خودمون باشه نه اینکه از وب سایت هایی مثل codepen استفاده کنیم . در واقع زمانی که بحث از محیط های توسعه ی محلی میشه ، دو سوال اصلی به ذهن کاربرهای تازه کار میاد : چرا باید از محیط های توسعه محلی استفاده کنیم؟ و اینکه چطور میتونیم یک محیط توسعه ی محلی داشته باشیم ؟ خوب من با اجازتون دل و روده ی این موضوع رو میشکافم ...
دلایل زیادی برای انجام این کار وجود داره که همگی زیرمجموعه ی یک دلیل اصلی هستن و اون دلیل ، این هست که قابلیت های بیشتری در محیط توسعه محلی وجود داره ! مثلا ما باید کدهامون رو بهینه سازی کنیم ، یعنی کدهامون باید تا حد ممکن سریع و کم حجم باشن . چنین قابلیتی در وب سایت های آنلاین به صورت درست و حسابی وجود نداره ، از طرفی میخوایم از قابلیت های جدید جاوا اسکریپت یعنی ES6 هم استفاده کنیم چراکه کارمون رو خیلی ساده تر میکنه . البته در هنگام کار با ادیتور آنلاینی مثل codepen میتونیم از Babel استفاده کنیم تا کدهای ES6 رو تا حدی در اختیار ما قرار بده اما بازهم به محیط خیلی کامل تری نیاز داریم تا بتونه کدهای ما رو به کدهایی کامپایل کنه که روی تمام مرورگرها قابل اجرا باشه ! البته به این موضوع هم توجه کنیم مشکلاتی که بهشون اشاره شد با وجود اپ هایی مثل codesandbox ، stackblitz ، cloud9 یا codespaces زیاد معنی نمیدن و از جمله دلایل اصلی که ما از محیط توسعه لوکال استفاده میکنیم ، میتونیم به Developer Experience بهتر و مشکلات اینترنت تو ایران اشاره کنیم :)
اول از همه به یک سیستم مدیریت وابستگی مثل npm یا yarn احتیاج داریم . ما در طول این آموزش از npm استفاده میکنیم و بعد به یک module bundler مثل Webpack نیاز داریم .
ما کدهامون رو به صورت ماژولار مینویسیم ، یعنی تمام کدها در یک فایل نیستن بلکه در فایل های متعددی قرار میگیرن و هر فایل مسئول بخشی از کدها هست . حالا وظیفه ی bundler ها این هست که میان تمام این فایل ها رو در نهایت به یک یا دو یا سه ( تعداد محدودی ) فایل تبدیل میکنن تا کاربر ها مجبور نشن تعداد زیادی از فایل ها رو دانلود کنن .
در قدم بعدی به یک کامپایلر نیاز داریم تا کدهای ES6 رو به کدهای ساده تر و قدیمی تر جاوا اسکریپت تبدیل کنه تا روی تمام مروگرها قابل اجرا باشن ، چون ممکنه بعضی از مرورگر ها نسخه های متفاوتی داشته باشن و نتونن برنامه ی ما رو به درستی تفسیر کنن . ما برای این منظور از Babel که یک کامپایلر جاوااسکریپتی هست استفاده خواهیم کرد .
در نهایت میخوایم از یک development server یا یک سرور توسعه محلی استفاده کنیم تا از طریق اون بتونیم کدهامون رو به صورت محلی روی سیستم خودمون تست کنیم و نیازی به سرور واقعی و هزینه های اون نداشته باشیم . همه ی این ها رو میتونیم به کمک Node.js انجام بدیم . درسته که Node.js یعنی اجرای جاوااسکریپت در خارج از مرورگر ، اما Node.js در اینجا برای ما نقش یک Runtime رو داره تا بتونیم تمام این ابزارها رو در کنار هم داشته باشیم و در داخل یک سرور محلی اون ها رو مدیریت کنیم .
پس بطور کلی برای توسعه ی نرم افزار با React و داشتن یک محیط توسعه ی محلی ، به موارد زیر احتیاج داریم:
· یک سیستم مدیریت وابستگی مثل npm یا yarn
· یک module bundler مثل Webpack
· کامپایلر Babel
· نود جی اس (Node.js)
ممکنه ما جلوتر به یکسری از ابزار های دیگه هم نیاز داشته باشیم ، مثلاً ممکنه یک نسخه از webpack رو نصب کنیم که با یک نسخه خاص از babel تداخل داشته باشه و به درستی برای ما کار نکنه و کار ما رو سخت کنه ! برای رفع این مشکل ، تیم توسعه دهنده ی React یک ابزار خیلی کاربردی برای ما تهیه کرده که کل محیط توسعه رو بدون هیچ پیکربندی از سمت ما راه اندازی میکنه و از ما هیچ چیزی نمیخواد ! خوب چه چیزی از این بهتر رفقا ؟! واقعا یه لحظه فکر کنید اگر create-react-app معرفی نمیشد چه بلایی سر توسعه دهنده های یکی از یکی گل تر میومد :)
اسم این پکیج create-react-app هست و ما میتونیم اونو به کمک npm نصب کنیم تا همه ی ابزار هایی که نیاز داریم رو یکجا داشته باشیم و نگران تداخل ورژن ابزارها هم نباشیم ! با مراجعه به لینک پایین میتونیم به صفحه ی گیت هاب این پکیج بریم و در موردش مطالعه کنیم :
https://github.com/facebook/create-react-app
همونطور که گفته شد برای راه اندازی و نصب این پکیج ، به npm نیاز داریم . بنابراین اول باید Node.js رو از آدرس https://nodejs.org/en/ دانلود و نصب کنیم ، چون همونطور که میدونیم همراه با نصب Node.js ، پکیج منیجر npm هم برامون نصب میشه و ما به کمک اون میتونیم پکیج create-react-app رو نصب کنیم . برای نصب پکیج های npm از این ساختار استفاده میکنیم :
البته به جای install میتونیم از i که مخفف install هست هم استفاده کنیم . معمولاً بهتره که قبل از اسم پکیج ، از علامت g- استفاده کنیم که مخفف globally هست ، چون وقتی ما پکیجی رو به صورت سراسری نصب میکنیم ، میتونیم از اون پکیج در تمام قسمت های کامپیوترمون استفاده کنیم ! پس در حالت کلی برای نصب بسته ی نرم افزاری create-react-app به صورت سراسری به صورت زیر عمل می کنیم :
توی قدم بعدی باید تعیین کنیم که قرار هست در چه محلی از حافظه ی کامپیوتر یا به عبارت بهتر در چه آدرسی یک پروژه ری اکتی ایجاد کنیم . همونطور که میدونیم محیط CMD به صورت پیشفرض تو مسیر user قرار داره ، اگر دستور dir رو اجرا کنیم ، تمام فایل ها و فولدرهای موجود در اون بهمون نمایش داده میشه و حالا اگر فرضا بخوایم از user به Desktop بریم و اونجا یک فولدر برای پروژه های React بسازیم باید به این صورت عمل کنیم:
سپس برای ایجاد پروژه در دسکتاپ به اینصورت عمل میکنیم :
حالا ما مثلاً اسم پروژه رو میزاریم firstProject :
بعد از اجرای دستور بالا باید چند دقیقه صبر کنیم تا پروژه ی جدید برامون ساخته بشه .
توجه : ما برای ساخت پروژه جدید با استفاده از create-react-app ، میتونیم خودمون فولدر پروژه رو بصورت دستی ایجاد کنیم و سپس توی ترمینال به مسیر فولدر پروژه مون بریم و بعد دستور زیر رو اجرا کنیم تا تمام Dependency ها و موارد مورد نیاز رو برامون کنه :
بعد از ایجاد پروژه حالا برای راه اندازی سرور مجازی باید از طریق ترمینال به پوشه ی firstProject بریم ( یا هر پوشه ای که برای اسم پروژه انتخاب کردین ) و بعد دستور زیر رو اجرا کنیم :
بعد از اجرای دستور بالا مرورگرمون بطور خودکار باز خواهد شد و حالا ما یک سرور محلی داریم . بعد از اجرای پروژه مون در مرورگر چنین چیزی رو خواهیم دید :
همونطور که میبینیم این صفحه ی ساده ی HTML ، صرفا یک قالب خوشامدگویی هست و چیز خاصی نداره .
نکته ی مهم : در طول توسعه و کار با کدها ، هیچ وقت command line یا ترمینال رو نباید ببندیم و باید بزاریم که سرور مجازی در حال اجرا باشه چون در حالت عادی سرور مجازی کدهای ما رو زیر نظر میگیره و اگر کدها رو تغییر بدیم ، بصورت خودکار صفحه ی مرورگر رو برای ما refresh میکنه تا تغییرات رو مشاهده کنیم اما اگر command line یا ترمینال رو ببندیم ، سرور مجازی دیگه کدهای ما رو زیر نظر نمیگیره ! در کل هر زمانی که کار توسعه و کدنویسی ما تموم شد میتونیم command line رو ببندیم و دفعه ی بعد دوباره دستور npm start رو اجرا کنیم .
نکته ی مهم : همونطور که میدونیم وقتی از طریق کامند npm install -g create-react-app میخوایم پکیج create-react-app رو روی سیستممون نصب کنیم ، Node.js این پکیج رو برامون از سرور npm دانلود و نصب میکنه ! اما ممکنه که در هنگام فرآیند نصب ، بنا به دلایلی مثل کند بودن سرعت اینترنت یا قطعی اینترنت یا مشکلات مربوط به سرور و … ، این پکیج به درستی روی سیستممون نصب نشه و بعدها مشکلاتی رو به بار بیاره (مثلا ممکنه نتونیم از طریق اون پروژه ی جدیدی ایجاد کنیم !) . برای رفع این مشکل یا میتونیم اونو حذف کنیم و از دوباره نصبش کنیم و یا میتونیم هر بار که میخوایم پروژه ی جدیدی ایجاد کنیم ، از کامند زیر استفاده کنیم:
این کامند دیگه کاری به این نداره که آیا پکیج create-react-app روی سیستم ما نصب هست یا نه و تفاوتی که با کامند قبلی داره این هست که وقتی ما پکیج create-react-app رو بصورت global نصب میکنیم دیگه نمیتونیم از به روز بودن Dependency ها اطمینان حاصل کنیم ، در حالی که با npx آخرین تغییرات مربوطه برامون از سرور گرفته و نصب میشه ! در آخر به نکته ی دیگه ای که باید توجه کنیم این هست که npx هم مشابه npm همراه نصب nodejs برامون نصب میشه و برای استفاده از اون حتما باید ورژن npm بالاتر از ورژن 5.2 باشه !
خوب عزیزان این هم از این قسمت ، امیدوارم شمارو به خوبی با نحوه ی راه اندازی محیط توسعه React آشنا کرده باشم . اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین . اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)
بخش بعدی رو هم به هیچ عنوان از دست ندید ، چراکه قرار هست با ساختار اولیه تمام فایل ها و پوشه هایی که هنگام ایجاد پروژه بصورت دیفالت ایجاد میشن آشنا بشیم و کم کم خودمون رو برای کدنویسی آماده کنیم :)
