توسعه وبسایت طراحی وبسایت

چگونگی نصب ReactJS در اوبونتو 20.04

در مقاله چگونگی نصب ReactJS در اوبونتو 20.04 یاد میگیریم تا React را روی ubuntu نصب کنیم و شروع به توسعه با این نرم افزار نماییم. از این رو ابتدا به تعریف React می پردازیم.

React یک کتابخانه جاوا اسکریپت متن‌باز برای ایجاد محیط Frontend وب و کامپوننت های UI این محیط است. React توسط انجمن فیسبوک و تعداد زیادی از توسعه دهندگان، توسعه و نگهداری می شود. همچنین React برای ایجاد نرم‌افزار های تلفن همراه قابل استفاده است.

جدول مفاهیم

پیش‌نیازها

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

  • شیرازوب
  • ایران سرور
  • ابر آروان
  • aws
  • و…

مرحله 1 – نصب Node.js

Node.js برای ایجاد و اجرای یک برنامه React.js مورد نیاز است. مراحل زیر Node.js 14 را بر روی سیستم اوبونتو شما نصب می کند.

یادآوری می‌کنیم که در صورت ارتقاء سیستم خود از وبسایت Nodejs آخرین نسخه را نصب کنید.

۱. مخازن PPA را برای Node.js 14 (نسخه پایدار فعلی) به سیستم عامل اوبونتو خود اضافه کنید.

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - 

۲. بعد ، دستور زیر را برای نصب Node.js روی سیستم خود اجرا کنید:

sudo apt install nodejs -y 

۳. در نهایت ، نسخه فعلی فعال Node.js را بررسی کنید:

node -v

خروجی آن نیز بدین شکل نمایش داده خواهد شد:

v14.15.3

۴. همچنین ابزار مدیریت بسته های Yarn را بر روی سیستم عامل اوبونتو خود نصب کنید.

npm install -g yarn

مرحله 2 – ایجاد یک نرم‌افزار React جدید

می توانید با استفاده از یکی از دستورات زیر یک نرم‌افزار React.js ایجاد کنید.

yarn create react-app myreactapp

به استثای yarn ، همچنین می توانید از دستورات npx با دستور (npx create-react-app myreactapp) یا npm با دستور (npm init reag-app myreactapp) برای ایجاد نرم‌افزار React.js استفاده کنید.

در صورت موفق بودن مراحل نصب ، نتیجه را در محیط کنسول مشاهده خواهید کرد. در پایان ، نتیجه را به همراه چند دستور کمکی (جهت استفاده)، مانند تصویر زیر مشاهده خواهید کرد.

چگونگی نصب ReactJS در اوبونتو 20.04
چگونگی نصب ReactJS در اوبونتو 20.04

اکنون با راهنمایی مقاله چگونگی نصب ReactJS در اوبونتو 20.04 ابزار های محیط توسعه ایجاد گردیدند. بیایید یک کد ایجاد کنیم و محیط توسعه را تست نماییم.

مرحله 3 – اجرای نرم‌افزار React

هنگامی که نرم‌افزار React خود را ایجاد کردید. یک پوشه در مسیر فعلی با نام پروژه ایجاد گردیده است. به درون پوشه پروژه بروید و با استفاده از دستور yarn اقدام به اجرای پروژه جدید نمایید.

cd myreactapp 
yarn start 

خروجی:

Compiled successfully!

You can now view myreactapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.10.200:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

برنامه react بصورت پیش فرض روی پورت 3000 شروع می شود. با استفاده از پورت 3000 به همراه آدرس IP سیستم به برنامه React خود دسترسی پیدا کنید. برای ماشین محلی از “localhost” و به دنبال آن پورت 3000 استفاده کنید.

اجرای React روی اوبونتو
اجرای React روی اوبونتو

حا می‌توانید یک واسط کاربری برای پروژه خود ایجاد کنید: مثلا یک داشبورد مدیریت یا یک داشبورد مشتری و یا داشبورد کارمندان.

مرحله 4 – ایجاد نسخه React.js برای محیط عملیاتی

هنگامی که برنامه شما برای استقرار تولید و آماده شد. بیایید یک نسخه عملیاتی نرم‌افزار React شما ایجاد کنیم. در واقع روی سرور اوبونتو در محیط عملیاتی نیازی به نصب yarn یا Nodejs نداریم. چون به هیچ کد نویسی در آن محیط صورت نمی گیرد.

با استفاده از دستور های yarn build یا npm run build کد عملیاتی خود را ایجاد نمایید.

cd myreactapp 
yarn build 

در صورت موفق بودن عملیات ، خروجی را مانند تصویر زیر مشاهده خواهید کرد:

yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.33 KB  build/static/js/2.fefeb60f.chunk.js
  1.59 KB   build/static/js/3.63acee40.chunk.js
  1.17 KB   build/static/js/runtime-main.3da20c7a.js
  591 B     build/static/js/main.3ee865b4.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 26.59s.

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

در صورت بروز هرگونه مشکل در سرور محیط عملیاتی. ابتدا ، باید مشکل را در کد محلی برطرف نمایید ، سپس مجددا عملیات تولید کد برای محیط عملیاتی را اجرا نمایید.

نتیجه

در این آموزش ، چگونگی نصب ReactJS در اوبونتو 20.04 برای محیط توسعه و عملیاتی را آموختید. همچنین آموختید که چگونه نتیجه پروژه ایجاد شده را در مرورگر تماشا نمایید. علاوه بر این ، دستوراتی برای ایجاد نسخه عملیاتی نرم‌افزار React خود مشاهده کردید.

Author

خسرو نظری

دانش آموخته کارشناسی ارشد فناوری اطلاعات (گرایش طراحی و تولید نرم افزار)، توسعه دهنده وب، مدیرپروژه های نرم افزاری، مدیرسیستم (sysadmin) لینوکس، مشاور مانیتورینگ و مدیر مجموعه تحلیل یار

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *