راه اندازی محیط توسعه و پکیج create-react-app

Launching a Development Environment And the create-react-app Package

راه اندازی محیط توسعه و پکیج create-react-app

حالا که نکات اصلی جاوا اسکریپت ES6 را یاد گرفتیم نوبت راه اندازی محیط کارمان است. ما برای کار با پروژه های react نیاز به یک محیط کار محلی داریم یعنی محیطی که روی سیستم خودمان باشد نه اینکه از وب سایت هایی مثل codepen استفاده کنیم. این وب سایت ها اکثرا برای بازی کردن با کدها یا به اشتراک گذاشتن کدهایی است که از قبل نوشته شده اند. در واقع زمانی که بحث از محیط های توسعه محلی می شود دو سوال اصلی به ذهن کاربران تازه کار می آید: چرا از محیط های توسعه محلی استفاده کنیم؟ و اینکه چطور یک محیط توسعه محلی داشته باشیم؟

سوال: چرا باید یک محیط توسعه محلی داشته باشیم؟

پاسخ: دلایل زیادی برای انجام آن وجود دارد که همگی زیرمجموعه یک دلیل اصلی هستند: قابلیت های بیشتری در محیط توسعه محلی وجود دارد. من برخی از آن ها را نام می برم: ما باید کدهایمان را بهینه سازی کنیم؛ یعنی کدهایمان تا حد ممکن سریع و تا حد ممکن کم حجم باشند. چنین قابلیتی در وب سایت های آنلاین به صورت درست و حسابی وجود ندارد. از طرفی می خواهیم از قابلیت های جدید جاوا اسکریپت (ES6) استفاده کنیم چرا که کارمان را بسیار ساده تر می کند. اگر یادتان باشد در هنگام کار با codepen از Babel استفاده کردیم که کدهای ES6 را تا حدی در اختیار ما قرار می داد اما هنوز به محیط بسیار کامل تری نیاز داریم تا بتواند کدهای ما را به کدهایی کامپایل کند که روی تمام مرورگرها اجرا شود. از دلایل دیگر استفاده از محیط های توسعه محلی سرعت بالاتر کار و کدنویسی است

حالا به سوال دوم می رسیم:

سوال: چطور یک محیط توسعه محلی داشته باشیم؟

پاسخ: اول از همه به یک سیستم مدیریت وابستگی مانند npm یا yarn احتیاج داریم. ما در طول این دوره از npm استفاده می کنیم. سپس به یک bundler نیاز داریم (مانند Webpack)؛ ما کدهایمان را به صورت ماژولار می نویسیم یعنی تمام کدها در یک فایل نیست بلکه در فایل های متعددی پراکنده شده است تا هر فایل مسئول بخشی از کدها باشد. bundler ها تمام این فایل ها را در نهایت به یک یا دو یا سه (تعداد محدودی) فایل تبدیل می کنند تا کاربران مجبور نشوند تعداد زیادی از فایل ها را دانلود کنند. ما در این دوره از webpack استفاده خواهیم کرد. در قدم بعدی به یک کامپایلر نیاز داریم تا کدهای ES6 را تبدیل به کدهای ساده و قدیمی تر جاوا اسکریپت کند تا روی تمام مروگرها اجرا شود. ما برای کامپایلر از Babel استفاده خواهیم کرد. در نهایت می خواهیم از یک development server (سرور توسعه محلی) استفاده کنیم تا بتوانیم کدهایمان را به صورت محلی روی سیستم خودمان تست کنیم و نیازی به سرور واقعی و هزینه های آن نداشته باشیم.

احتمالا فکر می کنید که راه اندازی چنین محیطی بسیار سخت و پیچیده خواهد بود اما اشتباه می کنید! در واقع تیم توسعه React یک ابزار بسیار کاربردی برای ما تهیه کرده اند که تمام محیط توسعه را بدون هیچ پیکربندی از سمت ما راه اندازی می کند و از ما هیچ چیزی نمی خواهد! نام این پکیج create-react-app است:

https://github.com/facebook/create-react-app

با مراجعه به این لینک می توانید به صفحه گیت هاب آن بروید و در مورد آن مطالعه کنید. همانطور که گفتیم برای راه اندازی و نصب این پکیج به npm نیاز داریم. بنابراین باید ابتدا آن را از آدرس https://nodejs.org/en/ دانلود و سپس نصب کنیم. بهتر است آخرین نسخه را نصب کنید و فقط اگر به مشکل برخورد کردید از نسخه LTS آن استفاده کنید:

پس از نصب node.js پنجره command line یا هر ترمینال دیگری در سیستم خود را باز کرده و دستور زیر را بنویسید:

npm install create-react-app -g

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

sudo npm install create-react-app -g

چند دقیقه صبر کنید تا create-react-app به طور کامل نصب شود. دستور -g کاری میکند که پکیج به صورت global یا سراسری روی سیستم نصب شود و همه بتوانند از آن استفاده کنند.

برای استفاده از create-react-app باید یک پروژه جدید بسازیم. ابتدا به پوشه ای که میخواهید پروژه تان در آن باشد بروید و با نگه داشتن کلید shift و سپس راست کلیک و انتخاب گزینه open command window here، ترمینال خود را در مسیر خاصی باز کنید. البته می توانید به جای این کار از دستور cd و آدرس دهی به محل مورد نظر نیز همین کار را انجام دهید. حالا دستور زیر را تایپ می کنیم:

create-react-app react-complete-guide --scripts-version 1.1.5

در واقع react-complete-guide نام پروژه دلخواه ما است. شما می توانید هر نام دیگری را برای پروژه خودتان انتخاب کنید. قسمت --scripts-version نیز برای این است که ساختار پروژه شما شبیه به ساختار پروژه ما باشد چرا که در طول زمان ممکن است ساختارها تغییر کنند. توجه کنید که --scripts-version فقط روی ساختار و پوشه بندی ها تاثیر دارد و هیچ تاثیری روی نسخه react شما نخواهد داشت. پس از اجرای دستور بالا باید چند دقیقه صبر کنید تا پروژه جدید برایتان ساخته شود.

تبریک می گویم، پروژه شما ساخته شده است! حالا برای راه اندازی سرور مجازی باید به پوشه react-complete-guide بروید (یا هر پوشه ای که برای نام پروژه انتخاب کرده اید) و سپس ترمینال را با روش گفته شده (کلید shift و open command window here) در آنجا باز کنید. سپس دستور زیر را تایپ کنید:

npm start

پس از چند ثانیه مرورگر شما به طور خودکار باز خواهد شد و حالا شما یک سرور محلی دارید! اگر مرورگر بعد از چند دقیقا برایتان باز نشد، خودتان آن را باز کرده و آدرس localhost:3000 را در آن تایپ کنید. حالا در مرورگر چنین چیزی را خواهید دید:

اولین سند باز شده در پروژه ی پیش فرض — اولین سند باز شده در پروژه پیش فرض

این صفحه ساده HTML یک قالب خوشامدگویی به شما است و چیز خاصی ندارد.

نکته مهم: در طول توسعه و کار با کدها هیچ گاه command line را نبندید و بگذارید سرور مجازی در حال اجرا باشد. در حالت عادی سرور مجازی کدهای شما را زیر نظر می گیرد و اگر کدها را تغییر بدهید به صورت خودکار صفحه مرورگر را refresh می کند تا تغییرات مشاهده شود اما اگر command line را ببندید سرور مجازی دیگر کدهایتان را زیر نظر نمی گیرد. هر گاه که کار توسعه و کدنویسی شما تمام شد میتوانید command line را ببندید و دفعه بعد دوباره دستور npm start را اجرا کنید.

در قسمت بعد با ساختار پوشه های پروژه جدید خود آشنا خواهیم شد.