آماده سازی محیط توسعه ReactJS – آموزش ReactJs

reactjs environment setup 6078 تصویر

آماده سازی محیط توسعه ReactJS

در این بخش نحوه آماده سازی محیط توسعه ReactJS را بررسی خواهیم کرد. برای این کار ابتدا باید NodeJS را بر روی سیستم خود نصب کنید.

نصب NodeJS

اگر قبلا آن را بر روی سیستم خود نصب کرده اید نیاز نیست این مرحله را انجام دهید. برای بررسی نصب بودن NodeJs در خط فرمان دستور زیر را وارد کنید:

اگر نود نصب شده باشد، نسخه آن چاپ خواهد شد.

به منظور نصب NodeJS ابتدا به سایت آن بروید، سپس از بخش دانلود آن را دانلود کنید و فایل نصب کننده را اجرا کنید تا بر روی سیستم شما نصب شود.

نصب ReactJS

برای نصب ReactJS می توانید از دو روش زیر استفاده کنید (ما در این آموزش از روش اول استفاده خواهیم کرد):

  • نصب با استفاده از webpack و babel
  • نصب با دستور create-react-app

نصب با استفاده از webpack و babel

Webpack یک ماژول bundler (بسته بندی کننده ماژول ها) است که برای مدیریت ماژول های مختلف مورد نیاز در هنگام ساخت برنامه استفاده می شود. این ابزار ماژول های مختلف را به یک ماژول تبدیل می کند و شما می توانید با استفاده از خط فرمان یا فایل webpack.config از این بسته در زمان توسعه برنامه ها استفاده کنید.

Babel یک کامپایلر زبان جاوا اسکریپت است. با استفاده از آن می توانیم از ویژگی های موجود در ES6 در کدهای خود استفاده کنیم. این کامپایلر کدهای ما را به ES5 تبدیل می کند تا در تمام مرورگرها قابل اجرا باشد.

برای نصب ReactJS با استفاده از این روش، مراحل زیر را دنبال کنید:

مرحله اول : ایجاد فولدر اصلی (root)

یک فولدر جدید با نام reactApp در دسکتاپ خود ایجاد کند تا فایل های ضروری را در آن نصب کنیم. دستور زیر اینکار را برای شما انجام می دهد:

برای ایجاد هر ماژولی، یک فایل package.json لازم است. بنابراین بعد از ساخت فولدر اصلی، با استفاده از npm و خط فرمان یک فایل package.json ایجاد می کنیم.

با اجرای دستور فوق، اطلاعاتی (مانند نام بسته، توضیحات، نویسنده و غیره) از شما پرسیده می شود. برای ایجاد فایل package.json با مقادیر پیشفرض گزینه –y را به دستور فوق اضافه کنید.

مرحله دوم : نصب React و React Dom

برای نصب React و React Dom می توانید از دو دستور زیر استفاده کنید (گزینه –save در انتهای هر دستور، باعث می شود تا بسته نصب شده به فایل package.json نیز اضافه شود):

یا هر دو آن ها را با یک دستور نصب کنید:

مرحله سوم : نصب webpack

از آن جا که در این روش به منظور bundle کردن نرم افزار از webpack استفاده خواهیم کرد، باید آن را نصب کنیم. دستور زیر webpack، webpack-dev-server و webpack-cli را نصب می کند:

ترکیب سه دستور فوق در یک دستور:

مرحله چهارم : نصب babel

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

دستورات فوق در یک دستور:

مرحله پنجم : ایجاد فایل ها

برای کامل کردن فرآیند نصب، باید چند فایل با نام های مشخص (index.html، App.js، main.js، webpack.config.js و .babelrc) ایجاد کنیم. شما می توانید این فایل ها را به صورت دستی یا با استفاده از دستور زیر ایجاد کنید:

مرحله ششم : تنظیم کامپایلر، سرور و لودر ها

فایل webpack-config.js را باز کرده و کدهای زیر را به آن اضافه کنید. در کد زیر ما main.js را به عنوان entry (فایل اصلی برنامه) تنظیم کرده ایم.

محتوای فایل webpack-config.js:

فایل package.json باز کرده و عبارت “test”: “echo \”Error: no test specified\” && exit 1″ که در داخل شیء scripts قرار دارد را حذف کنید. این عبارت مربوط به فرآیند تست برنامه است. ما در این آموزش هیچ گونه تستی بر روی برنامه انجام نخواهیم داد. به جای آن عبارات زیر را اضافه کنید:

مرحله هفتم : فایل index.html

محتوای این فایل HTML معمولی است. در کد زیر ما یک div با ای دی app ایجاد کرده ایم که به عنوان عنصر root برنامه در نظر گرفته می شود سپس فایل index_bundle.js را اضافه کرده ایم که فایل bundle شده برنامه ماست.

مرحله هشتم : فایل های App.jsx و main.js

فایل App.jsx اولین کامپوننت در React است. کامپوننت ها را در بخش های بعدی بیشتر بررسی می کنیم. این کامپوننت عبارت Hello World را رندر می کند.

محتوای فایل App.js:

برای اینکه بتوانیم محتوای این کامپوننت را در مرورگر نمایش دهیم، باید آن را به فایل main.js اضافه کنیم.

 

توجه! هر زمان که بخواهید از چیزی استفاده کنید، باید ابتدا آن را import کنید.

محتوای زیر را به فایل .babelrc اضافه کنید:

مرحله نهم : اجرای سرور

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

بعد از اجرا دستور فوق، پورتی که باید در مرورگر باز شود، نمایش داده می شود. بعد از باز کردن آن در مرورگر خروجی زیر را مشاهده خواهید کرد:

running the server 6078 تصویر

مرحله دهم : تولید bundle

در نهایت، برای تولید بسته نرم افزاری (bundle)، باید دستور زیر را در خط فرمان اجرا کنید:

دستور فوق bundle را در فولدر جاری ایجاد خواهد کرد:

generating the bundle 6078 تصویر

نصب با دستور create-react-app

این روش نصب خیلی ساده تر از روش webpack است. برای نصب ReactJS با استفاده از این روش، مراحل زیر را دنبال کنید.

مرحله اول : ایجاد پروژه با create-react-app

مانند نمونه زیر به دسکتاپ خود رفته و با دستور create-react-app یک برنامه جدید ایجاد کنید:

دستور فوق یک فولدر جدید با نام my-app در دسکتاپ شما ایجاد و سپس فایل مورد نیاز را به آن اضافه می کند.

مرحله دوم : حذف فایل ها

مانند نمونه زیر به فولدر ایجاد شده بروید و فایل های موجود در فولدر src را حذف کنید:

مرحله سوم : اضافه کردن فایل ها

دو فایل جدید با نام های index.css و index.js در همان فولدر ایجاد کنید. مانند نمونه زیر:

سپس محتوای زیر را به فایل index.js اضافه کنید:

مرحله آخر : اجرای پروژه

در آخر با استفاده از دستور start برنامه ایجاد شده را اجرا کنید. مانند نمونه زیر:

reactjs environment setup 6078 1 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است