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

در ضمن در انتهای مقاله، آموزش کامل vite را ارایه کرده ایم که آن را از دست ندهید!

چرا ری اکت؟

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

React به شما این امکان را می‌دهد تا از قطعات مجزا به نام کامپوننت، رابط کاربری بسازید. اجزای React خود را مانند Thumbnail، LikeButton و Video ایجاد کنید. سپس آنها را در کل صفحه‌ها، صفحات و برنامه‌ها ترکیب کنید.

همچنین با امکاناتی نظیر state و props این امکان را دارید که داده های خود را مدیریت کرده و یا آنها را بین کامپوننت ها و یا صفحات پاس کاری کنید!

چه به تنهایی کار کنید و چه با هزاران توسعه‌دهنده دیگر، استفاده از React یکسان است.

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

روش های نصب ری اکت

اگر می‌خواهید یک برنامه جدید یا یک وب‌سایت جدید به طور کامل با React بسازید، توصیه می‌کنیم یکی از چارچوب‌های مبتنی بر React را انتخاب کنید که در جامعه ری اکت محبوب هستند.

نصب ری اکت با روش npm

اولین و قدیمی ترین روش نصب با npm بود که تقریبا امروزه میشود گفت روش منسوخی به حساب میآید.

npm i -g create-react-app
create-react-app parsa

نصب ری اکت با روش npx یا روش CRA

معمولا برای شروع آسان یک پروژه react، از create-react-app یا به طور مخفف CRA استفاده می‌کنیم.

روش بسیار خوبی که هنوز هم در زمان ویرایش این مقاله کار میکند و به دو روش با serviceWorker و بدون serviceWorker برای شما یک برنامه تستی ری اکت تولید کرده و تمام پیش نیاز های لازم را در اختیارتان قرار میدهد تا بتوانید ادامه مسیر کدنویسی را طی کنید.

اما از حق نگذریم که برخی موارد قطعی هایی دارد و زمان بر هم میباشد.

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

روش NPX

از ورژن 4 CRA به بعد ، دیگر فایل serviceWorker بصورت دیفالت وجود ندارد.

npx create-react-app parsa

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

کلیک کنید

اما اگر کاربر قصد داشته باشه از serviceWorker در پروژه خودش استفاده کنه و دوست داشته باشه که پروژه‌اش با این تنظیمات ایجاد بشه، cra یک تمپلیت مجزا آماده کرده که مخصوص برنامه‌های PWA است و سرویس‌ورکر درون اون تمپلیت پیاده‌سازی شده و تنظیمات ابتدایی اون انجام شده است.

npx create-react-app yyyy –template cra-template-pwa

نصب ری اکت با next.js

به عنوان یکی از روش های اصلی نصب ری اکت در سایت رسمی ری اکت ذکر شده است.

همانطور که میدانید ، Next.js یک چارچوب فول استک در ری اکت است. همه کاره است و به شما امکان می دهد برنامه های React را با هر اندازه ای ایجاد کنید.

از یک وبلاگ ساده گرفته تا یک برنامه پویا پیچیده. برای ایجاد یک پروژه Next.js جدید، در ترمینال خود اجرا کنید:

npx create-next-app

البته بعد از این کامند، تعدادی سوال از شما پرسیده میشود که باید به آنها جواب بدید.

در انتها و بعد از نصب ، برای اینکه نکست وارد حالت اجرای آنلاین شود، کامند زیر را بزنید:

npm run dev

توضیح مختری در رابطه با فایل های NEXT.js

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

همانطور که در تصویر زیر مشاهده میفرمایید، نکست در داخل پوشه src ، دو پوشه app و pages دارد. اگر با نکست آشنایی زیادی ندارید، وارد پوشه App شده و فایل page.js را ادیت کنید.

نصب ری اکت یا Gatsby 

Gatsby یک سایت Generator بر پایه react و GraphQL هست . Gatsby بهترین بخش های React , webpack , react-router, GraphQL و ابزار دیگر front-end رو با هم ادغام کرده تا برای توسعه دهنده محیط توسعه جذابی را فراهم کند.

شاید static site generator  زیبنده Gatsby نباشه . چون Gatsby شبیه به یک فریمورک جدید و قدرتمنده تا یک سایت ساز استاتیک قدیمی!

گتسبی یک چارچوب منبع باز مبتنی بر React برای ایجاد وب سایت است. چه سایت شما 100 صفحه داشته باشد یا 100000 صفحه. اگر عمیقاً به عملکرد، مقیاس‌پذیری و امنیت داخلی اهمیت می‌دهید ، ساختن با گتسبی را دوست خواهید داشت.

این ابزار برای ساخت سایت هایی با صفحه های استاتیک ، به خاطر سرعت بی نهایت لود شدنش فوق العادست . Gatsby با استفاده از GraphQL ٬ داده های سایت رو گرد هم میاره تا دسترسی سریعی به اونها  داشته باشید.

نصب گستبی روی سیستم:

npm install –global gatsby-cli

یا کامند npx:

npx create-gatsby

نصب ری اکت با Remix

Remix یک چارچوب React فول استک با مسیریابی تودرتو است. این به شما امکان می دهد برنامه خود را به بخش های تو در تو تقسیم کنید که می توانند داده ها را به صورت موازی بارگیری کنند و در پاسخ به اقدامات کاربر به روز شوند. برای ایجاد یک پروژه Remix جدید، اجرا کنید:

npx create-remix

در انتها روشی به نام expo cli هم وجود دارد که بیشتر آن را برای دوستانی که مایل به کار با react Native هستند ، پیشنهاد میکنیم.

اما…

جدیدترین و آخرین روش برای نصب ری اکت ، vite

ویت !

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

قبل از اینکه ماژول‌های ES در مرورگرها در دسترس باشند، توسعه‌دهندگان هیچ مکانیزم نیتیو برای نوشتن جاوا اسکریپت به شکل مدولار شده نداشتند.

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

شما معمولاً می‌توانید از CRA برای ایجاد پروژه جدید React بهره ببرید. اما برای استفاده از این ابزار باید حدود ۱۴۰ مگابایت Dependency دانلود کنید که ممکن است کمی زمان‌بر باشد.

Vite یکی از ابزارهای جدیدی است که می‌تواند جایگزین Create React شود. این ابزار کاملاً سبک است و تنها ۳۱ مگابایت Dependency دارد که صرفه‌جویی در زمان شروع پروژه جدید را در پی دارد.

همچنین، Vite از ماژول‌ ECMAScript استفاده می‌کند و این یعنی پس از تغییر هر فایل به بازسازی کل بسته نرم‌افزاری نیازی نیست.

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

آموزش ساخت پروژه React با Vite

ابتدا node.js را در سیستم نصب کنید تا بتوانیم کامند های npm و npx را فعال کنیم.

سپس نیاز به yarn برای نصب vite داریم. کامند زیر را برای نصب yarn بزنید:

npm install -g yarn

برای نصب vite ابتدا کامند زیر:

yarn create vite

طبق تصویر زیر، برای پوشه نام بزارید و سپس react را انتخاب کنید.

در انتها انتخاب کنید که js یا typeScript ?!

کار تمام است! همانطور که میبینید به پوشه ساخته شده cd کنید و سپس دستور yarn و بعد دستور yarn dev را زده و از این که از آخرین متد نصب ری اکت بهره مند شدید، لذت ببرید ♥

نکته جالب توجه اینجاست که میتوانید پیش‌نمایش برنامه با استفاده از تلفن‌همراه خود داشته باشید. واقعا جذاب و روح نواز میشه 😂

فقط کافیست کد زیر را بزنید:

yarn run dev –host

در تب نتورک آی پی و پورت را در مرورگر گوشی یا تب لت خود وارد کنید و از این که تغییرات را بصورت آنلاین میبینید، لذت ببرید.

 گرفتن Build برای تولید نهایی

در این مرحله، بسته نرم‌افزاری بهینه‌شده و آماده برای استقرار در سرور را با‌هم خواهیم ساخت. برای گرفتن Build، دستور زیر را در ترمینال اجرا کنید:

yarn run build

حالا می‌توانید محتویات پوشه dist را به‌صورت آنلاین روی سرور مستقر کنید. اگر از سرور Apache یا Nginx استفاده می‌کنید، این کار را به‌صورت دستی نیز می‌توانید انجام دهید.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.