آموزش نصب ReactJS در اوبونتو



آموزش نصب ReactJS در اوبونتو

React کتابخانه جاوا اسکریپت open-source برای استفاده در frontend و UI صفحات وب است. این کتابخانه توسط فیس بوک و جامعه بزرگی از توسعه دهندگان توسعه و نگهداری می شود و برای ایجاد برنامه های تلفن همراه نیز مفید است. در این آموزش شما نصب و ایجاد React Application را روی سیستم لینوکس اوبونتو یاد خواهید گرفت. این آموزش براساس سیستم عامل Ubuntu 20.04 نوشته شده است، در صورتیکه خرید VPS ایران تهیه کردین میتونین این کتابخانه رو  روی سرور نصب کنین.

 

آموزش نصب ReactJS در اوبونتو

مرحله 1 – Node.js را نصب کنید

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

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

حالا دستور زیر را برای نصب Node.js در اوبونتو اجرا کنید.

sudo apt install nodejs -y 

 

همچنین Yarn package manager را روی ابونتو باید نصب کنید.

npm install -g yarn 

 

ایجاد React Application

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

yarn create react-app myreactapp

به غیر از yarn می توانید از دستورات npx (npx create-react-app myreactapp) یا npm (npm init react-app myreactapp) برای ایجاد برنامه React.js استفاده کنید. بعد از نصب موفقیت آمیز React Application شما نتیجه نصب با یک گزارش طولانی رو در صفحه مشاهده خواهید کرد.

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

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” و به دنبال آن از پورت میتوانید استفاده کنید.

آموزش ReactJS

ایجاد React.js Production Build

هنگامی که برنامه شما برای گسترش آماده شد، یک نسخه تولیدی از برنامه React شما ایجاد میکنیم. Build build شامل فایلهای استاتیک مورد نیاز برای اجرای برنامه در محیط تولید (production) است. شما نیازی به نصب Node.js در سرورهای تولید (production) ندارید زیرا هیچ فایل توسعه ای ندارید. برای ایجاد ساخت production  برنامه React.js خود از دستور 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.

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