در مقاله چگونگی نصب 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 ابزار های محیط توسعه ایجاد گردیدند. بیایید یک کد ایجاد کنیم و محیط توسعه را تست نماییم.
مرحله 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 استفاده کنید.
حا میتوانید یک واسط کاربری برای پروژه خود ایجاد کنید: مثلا یک داشبورد مدیریت یا یک داشبورد مشتری و یا داشبورد کارمندان.
مرحله 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 خود مشاهده کردید.
