نحوه نصب و راه اندازی React Js
کتابخانه React Js، یک کتابخانه قدرتمند و پیشرو می باشد که توسط شرکت فیسبوک در سال ۲۰۱۳ میلادی به صورت متن باز ارائه شد و توسط زبان برنامه نویسی جاوا اسکریپت توسعه یافته است و سپس توسعه دهندگان جاوا اسکریپت هر روز پیشرفت کردند و امروزه کتابخانه React Js، به عنوان یکی از محبوب ترین کتابخانه های جاوا اسکریپت شناخته شده است. در این مقاله قصد داریم شما را با آموزش نصب و راه اندازی React Js آشنا نماییم.
لازم به ذکر است که از کتابخانه React Js در حین تولید شبکه اجتماعی فیسبوک استفاده شده است و همچنین شبکه اجتماعی اینستاگرام نیز به صورت کامل توسط React Js نوشته شده است. اساسا این کتابخانه برای ایجاد رابط کاربری مخصوصا برای برنامه های تک صفحه ای مورد استفاده قرار می گیرد.
ویژگی های ویژه کتابخانه ReactJs
قبل از آموزش نصب و راه اندازی ReactJs بهتر است به برخی از ویژگی های ویژه کتابخانه ReactJs می توان شود که عبارتند از:
- این کتابخانه فرایند نوشتن مولفه ها را ساده تر می کند.
- کتابخانه React Js باعث افزایش کارایی و نگهداری ساده تر می شود.
- استفاده از کتابخانه React Js یک راه حل ایده آل برای اپلیکشن های سنگین می باشد و همچنین یک ابزار ایده آل برای توسعه برنامه های موبایل می باشد.
- این کتابخانه پایداری کدها را تضمین می نماید و همچنین موجب تقویت سئو می شود.
- یادگیری React Js بسیار آسان می باشد.
آموزش دانلود React Js
قبل از نصب و راه اندازی React Js بهتر است React Js را دانلود کرد که در این جا آموزش دانلود React Js را برای شما عزیزان توضیح می دهیم. در این جا دو نسخه از React ارائه می شود که یک نسخه غیر فشرده برای توسعه و دیگری نسخه کوچک برای تولید.
نسخه توسعه شامل هشدارهای لازم در مورد اشتباهات رایج می باشد، در حالی که نسخه تولید شامل بهینه سازی عملکرد اضافی می باشد و تمام پیام های خطا را نشان می دهد. اگر فردی تازه کار هستید حتما باید از نسخه توسعه استفاده کنید.
نسخه فشرده نشده و توسعه از react js و react-dom.js که بایستی دو فایل ایجاد کرد.
<script src="https://fb.me/react-0.14.3.js"></script> <script src="https://fb.me/react-dom-0.14.3.js"></script> نسخه فشرده شده و تولید از react.js و react-dom.js که نیاز به دو فایل دارند. <script src="https://fb.me/react-0.14.3.min.js"></script> <script src="https://fb.me/react-dom-0.14.3.min.js"></script>
React با افزودنی های ۰٫۱۴٫۳ (توسعه) – نسخه توسعه یافته و فشرده نشده React با افزودنی های اختیاری
<script src = "https://fb.me/react-with-addons-0.14.3.js"> </script> <script src = "https://fb.me/react-dom-0.14.3.js"> </script>
React با افزودنی های ۰٫۱۴٫۳ (تولید) – نسخه تولید و فشرده شده React با افزودنی های اختیاری
<script src = "https://fb.me/react-with-addons-0.14.3.min.js"> </script> <script src = "https://fb.me/react-dom-0.14.3.min.js"> </script>
تمام اسکریپت ها نیز از طریق CDN JS قابل دسترس هستند.توصیه می شود که از React از npm با بسته نرم افزاری مانند مرورگر یا صفحات وب استفاده کنید. پس از نصب آن با استفاده از npm install –Save reag-dom، شما می توانید از موارد زیر استفاده کنید:
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);
هر یک از افزودنی ها در بسته خود قرار دارند. لازم به ذکر است که به طور پیش فرض، React در حالت توسعه قرار خواهد گرفت. برای استفاده از React در حالت تولید، متغیر محیط NODE_ENV را بر روی تولید قرار دهید (با استفاده از enveify یا DefinePlugin از صفحه وب). توصیه می شود یک مینی فایر که حذف dead-code مانند Uglify JS را انجام می دهد ، به طور کامل کد اضافی موجود در حالت توسعه را حذف کند.
Bower $ bower install --save react
روش های نصب و راه اندازی React Js
روش های مختلفی برای استفاده از React Js وجود دارد. از جمله روش های نصب و راه اندازی React Js می توان به موارد زیر اشاره کرد:
روش اول: اضافه کردن فایل جاوا اسکریپت React
این روش یکی از روش های آسان برای استفاده از React Js می باشد زیرا این وب اپلیکیشن در این روش از قبل آماده شده و تنها باید برخی از قسمت ها را ویرایش کرد.
این روش تنها با اضافه کردن تگ HTML، افزودن React به پروژه تمام می شود و می توان شروع به کد نویسی React کرد. بنابراین لازم است که تگ های زیر به صفحه HTML اضافه کرد:
<script data-src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
قابل توجه است که در واقع با اضافه کردن دو خط کد به پروژه خود، هر مرتبه فایل ها را از سرور خارجی بارگذاری می شود. پس وقتی که امکان دسترسی به اینترنت وجود نداشته باشد، استفاده از React امکان پذیر نخواهد بود. لذا توصیه می شود که فایل های React را دانلود و در سرور خود قرار داده و از آن استفاده کرد.
روش دوم: ایجاد پروژه جدید React
یکی دیگر از روش ها، ایجاد پروژه جدید React می باشد که برای توسعه یک وب اپلیکیشن بزرگ بسیار راحت خواهد بود زیرا می توانید از ابزارهای کمکی جاوا اسکریپت کمک بگیرید. در این روش باید یک پروژه React از ابتدا ایجاد کرده و در یک محیط کاملا توسعه یافته با جاوا اسکریپت، توسعه وب اپلیکیشن خود را شروع کرد.
در این روش نصب و راه اندازی React Js ابتدا بایستی Node Js را دانلود و نصب کرد. پس از نصب و راه اندازی Node Js، پنجره CMD و یا ترمینال خود را در پوشه ایجاد شده مورد نظر اجرا کرده و دستور زیر را وارد کنید:
npm create-react-app my-app
با استفاده از این دستور می توان بین پوشه های مختلف جا به جا شد و همچنین با استفاده از دستور dir می توان محتویات داخل پوشه را مشاهده کرد.
پس از وارد نمودن دستور فوق پکیج مدیریت Node Js شروع به دریافت فایل های React کرده و یک پروژه React جدید ایجاد می شود. لازم به ذکر است که اگر دستورات فوق دچار مشکل شدند می توان از دستورات زیر استفاده کرد:
npm install yarn yarn create react-app my-app
با استفاده از دستورهای فوق، فرد باید ابتدا پکیج منیجر yarn را نصب کند و سپس از طریق آن فایل های React را دریافت کند. نهایت نصب و راه اندازی React Js توسط ایجاد پروژه جدید React به پایان می رسد.
روش سوم: روش سریع و آسان نصب و راه اندازی React Js
یکی از روش های سریع و آسان نصب و راه اندازی React Js، نصب بسته create-react-app می باشد که برای این کار کافی است که ابتدا به خط فرمان بروید و دستور زیر را وارد کنید. شایان به ذکر است که لازم نیست برای هر پروژه ای از این دستور استفاده کنید.
npm install -g create-react-app
پس از اجرای دستور فوق می توان از دستور create-react-app برای دریافت پروژه آماده ReactJs استفاده کرد. حالا فقط کافی است که دایرکتوری مورد نظر رفته و دستور زیر را وارد کرد.
create-react-app نام پروژه
در این مرحله پروژه مورد نظر ساخته شده و کافی است به دایرکتوری پروژه رفته و دستور زیر را اجرا کرد:
cd نام پروژه npm start
پس از اجرای دستور فوق مرورگر پیش فرض کاربر به صورت اتوماتیک باز شده و پیام Hello World ظاهر می شود. از این رو این روش به عنوان یکی از روش های آسان نصب و راه اندازی React Js شناخته شده است.
