تا %60 تخفیف خرید برای 2 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

دوره مقدماتی React.js: قسمت 4 - آشنایی Webpack و نصب Node

پارسا
پارسا
0 پسند
26 بازدید
0 نظر
1 ماه قبل

تا به اینجا ما از CodeSandbox برای استفاده از React کمک گرفتیم. توسعه ی برنامه های بزرگتر با استفاده از CodeSandbox عملی نیست و وقتش رسیده که ما محیط توسعه ی React را روی کامپیوتر خودمان آماده کنیم.

اما قبل از این باید با چند مفهوم آشنا شویم:

 

وابستگی ها (Dependencies)

وابستگی ها همان بسته ها (Packages)، فریم ورک ها (Frameworks) و لایبرری هایی (Libraries) هستند که پروژه ی ما از آن ها استفاده می کند. حضور وابستگی ها برای اجرای پروژه الزامی است. مثلا در ویدیو های قبل React و Babel وابستگی های  پروژه ی ما بودند که CodeSandbox برای ما فراهم می کرد. 

 

ماژول بانلدر ها (Module Bundlers)

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

  • استفاده از تگ src داخل فایل HTML برای لینک کردن فایل های جاوااسکریپت
  • استفاده از import و قرار دادن آدرس فایل ها در جاوااسکریپت ES6
  • استفاده از ماژول بانلدر ها: ابزار هایی که کار مدیریت این بسته ها (Package) و وابستگی های (Dependencies) مختلف را بر عهده دارند.

با پیجیده تر شدن برنامه های Front-End و فریم ورک های استفاده شده، استفاده از دو راه اول سخت و در بعضی موارد غیر ممکن میشود. ماژول بانلدر ها برای کمک کردن به ما در مدیریت بسته ها و وابستگی های مختلفی که استفاده می کنیم، به وجود آمده اند. 

حتی در مواردی، مثل استفاده از Babel برای تبدیل JSX به جاوااسکریپت، بعضی از این بسته ها باید قبل از اجرای برنامه وضایف خودشان را انجام دهند. در این موارد بدون کمک گرفتن از یک Module Bundler توسعه و تست کردن برنامه غیر ممکن می شود.

 webpack logo

Webpack

معروف ترین ماژول بانلدر حال حاضر Webpack است. بسیاری از وب سایت هایی که ما روزانه از آن ها استفاده می کنیم، برای مدیریت وابستگی هایشان از Webpack استفاده می کنند. Webpack قابلیت های زیادی دارد که در شرایط مختلف به کمک ما خواهند آمد. 

با این که ما در این دوره به صورت مستقیم از Webpack استفاده نمیکنیم، ابزار های مورد استفاده ی ما در پشت پرده از Webpack کمک می گیرند.

برای یادگرفتن Webpack به این سری آموزش رایگان مراجعه کنید.

nodejs logo

NodeJs

تمامی ابزار هایی که ما در طول توسعه ی برنامه از آن ها کمک می گیریم خود با JavaScript نوشته شده اند. برای اجرای این ابزار ها ما نیاز به یک Runtime داریم که بتواند کد های JavaScript را خارج از محیط مرورگر و بر روی سیستم عامل اجرا کند. این Runtime چیزی نیست جز NodeJs. با استفاده از NodeJs ما می توانیم کد های جاوااسکریپت را روی سیستم عامل های مختلف اجرا کنیم. 

NodeJs همچنین در نوشتن برنامه های Backend با جاوااسکریپت هم استفاده می شود. 

در ادامه ی این آموزش ما با نصب NodeJs محیط توسعه ی برنامه های React را روی سیستم عامل آماده می کنیم.

نصب NodeJs 

در ادامه نحوه ی نصب NodeJs روی ویندوز، مک و Ubuntu توضیح داده می شود.

نصب Node Js روی ویندوز

به https://nodejs.org/en رفته و روی لینک LTS کلیک کنید:

NodeJs Website

در جدول نسخه ی bit-64 با پسوند msi را انتخاب کنید:

Nodejs Website Download Page

پس از دانلود شدن روی فایل کلیک کرده و مراحل زیر را دنبال کنید:

  • برای رد شدن از صفحه مقدمه روی Next کلیک کنید.

 دوره مقدماتی React.js: قسمت 4 - آشنایی Webpack و نصب Node

  • سپس با پر گردن چک باکس و کلیک روی Next با شراط استفاده موافقت کنید. nodejs installer
  • در صورت نیاز محل نصب را تغییر داده و دوباره روی Next کلیک کنید.

دوره مقدماتی React.js: قسمت 4 - آشنایی Webpack و نصب Node

  • بدون تغیر موارد نصب روی Next کلیک کنید.

Nodejs Windows Installer

  • در صفحه ی آمده چک باکس را پر کنید تا ابزار های جانبی Node نصب شوند.

دوره مقدماتی React.js: قسمت 4 - آشنایی Webpack و نصب Node

  • بر روی Install کلیک کنید.

Nodejs Windows Installernodejs windows installerNodejs Windows Installer

پس از اتمام نصب برای مطمئن شدن از نصب شدن برنامه، CMD یا PowerShell را باز کرده و دستور زیر را اجرا کنید:

node -v

در صورت موفقیت، ورژن فعلی NodeJs برای شما چاپ خواهد شد.

نصب Node Js روی Ubuntu 

برای نصب NodeJs روی سیستم عامل Ubuntu از مراحل زیر پیروی کنید:

  • ترمینال (Terminal) خود را باز کنید.
  • دستور زیر را وارد کنید:

sudo apt update

  • پسورد root را وارد کنید تا دستور اجرا شود.
  • سپس دستور زیر را اجرا کنید تا NodeJs نصب شود:

sudo apt install nodejs

  • سپس به صورت جدا NPM را نیز نصب کنید (در آینده راجع به NPM توضیح خوایهم داد):

sudo apt install npm

برای مطمین شدن از نصب این دو می توانید از دستورات زیر استفاده کنید:

node -v

npm -v

در صورت موفقیت، ورژن این دو چاپ خواهد شد.

 

نصب NodeJs روی MacOs

برای نصب NodeJs روی Mac OS به https://nodejs.org/en/download  بروید و روی لینک MacOS Installer کلیک کنید.

دوره مقدماتی React.js: قسمت 4 - آشنایی Webpack و نصب Node

بعد از دانلود شدن، برنامه را باز کرده و مراحل زیر را دنبال کنید:

  •  کلید Continue را کلیک کنید.

Nodejs macos installer

  • با زدن کلید Continue و سپس Agree با شرایط استفاده موافقت کنید.

node macos installernode macos installer

  • بدون تغیر User ها روی Continue کلیک کنید.

nodejs macos installer

  • درصورت نیاز محل نصب را تغیر دهید. در غیر این صورت فقط روی Install کلیک کنید.

nodejs macos installer

  • پس از پایان نصب پنجره را ببندید.

nodejs macos installernodejs macos installer

برای مطمین شدن از نصب NodeJs میتوانید Terminal خود را باز کنید و دستور زیر را وارد کنید:

Node -v

در صورت چاپ شدن ورژن Node نصب موفقیت آمیز بوده است.

با نصب کردن Node ما می توانیم از ابزار های مختلف از جمله Webpack برای نوشتن اپ های ReactJs استفاده کنیم. 

قدم بعدی

با نصب NodeJs ما میتوانیم ابزار هایی که به نوشتن کد React Js کمک می کنند را نصب و استفاده کنیم. از این پس ما روی سیستم عامل خود و به صورت محلی برنامه هایمان را ایجاد می کنیم و توسعه می دهیم.

در قسمت بعدی (ویدیویی) به نصب و استفاده از مهم ترین این ابزار ها، یعنی create-react-app می پردازیم که در آماده کردن محیط های توسعه ی React به ما کمک می کند. 

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...