برای شروع و نصب ری اکت ابتدا باید نود جی اس را نصب کنیم. برای نصب به سایت nodejs.org میرویم.
بسته به سیستم عامل شما نسخه پیشنهادی در حال توسعه و پایدار را معرفی میکند که بهتر است آخرین نسخه پیشنهادی و پایدار آن را نصب کنید.
آیا در طول پروژه از برنامه nodejs قرار است استفاده کنیم؟
خیر. هدف از دانلود آن استفاده از برنامه npm است که با نصب node آن هم بر روی سیستم نصب میشود. Npm مخفف node package manager است. وظیفه آن دسترسی شما را به پکیج های جاوااسکریپت که توسعه دهندگان آن را نوشته اند فراهم میکند و هر برنامه نویس سمت فرانت باید با آن و طرز کار آن آشنا باشد.
نصب برنامه nodejs
نصب این برنامه بسیار ساده است و شما می توانید با چند next ساده آن را بر روی سیستم عاملتان نصب کنید.
بعد از نصب برنامه بخش command prompt سیستم عاملتان را بالا بیاورید. با وارد کردن دستور زیر می توانید نسخه node برنامه نصبی خود را مشاهده کنید.
نحوه نوشتن:
|
1 |
node -v |
همچنین با وارد کردن دستور زیر نسخه npm نصبی را مشاهده میکنید.
نحوه نوشتن:
|
1 |
npm -v |
نصب برنامه react
برای شروع و نصب برنامه ری اکت، میتوانید به سایت reactjs.org بروید.در بخش هدر و بالای سایت قسمتی به نام docs وجود دارد که مربوط به مستندات ری اکت می شود.
این مستندات برای هر قسمتی و هر کاری دارای توضیح و همراه با مثال است.
در قسمت راست صفحه باز شده، منویی جهت دسترسی به موضوعات مختلف وجود دارد. به بخش create-react-app بروید.
پکیجی بر روی npm به نام create-react-app وجود دارد که برای نصب ری اکت باید از آن استفاده کرد.
نکته ای که وجود دارد این است که نسخه node نصبی شما باید بزرگتر از ۸٫۱۰ و npm شما بزرگتر از ۵٫۶ باشد.
در توضیح داده شده در سایت ری اکت از دستور npx استفاده شده است. اما ما npm را بر روی سیستم خود داریم. پس چه فرقی میکند؟
فرق دستور npx با npm در نصب ری اکت
در صورت استفاده از npm آخرین نسخه از ری اکت را میتوان بر روی سیستم عامل خود بهمراه داشت. اما در حالت npx هربار آخرین نسخه ری اکت را از روی سرور گرفته و اجرا می‌کنیم و هیچ نسخه ای از آن بروی سیستم ما وجود ندارد و تنها با یک دستور آن را اجرا می کنیم.
رفع اشکال
برای راهنمایی بیشتر در زمینه نصب و در صورت مشکل در نصب می توانید به github آن به نشانی زیر مراجعه کنید. در بخش issues سوالات خود را مطرح نمایید.
آدرس:
https://github.com/facebook/create-react-app
پاک کردن نسخه قبلی نصب شده
در صورتی که react را از قبل بر روی کامپیوترتان نصب کردید و میخواهید از طریق npx آن را نصب کنید از دستور زیر استفاده نمایید.
نحوه نوشتن:
|
1 |
r -g create-react-app |
دریافت از طریق npx
برای دریافت پروژه کامل ری اکت از طریق سرور در دایرکتوری موردنظر به روش زیر عمل کنید.
در مستندات، خود ری اکت درخواست کرده که از این روش برای دریافت برنامه استفاده کنید.چون فایل های این برنامه در مدت کوتاهی در حال بروزرسانی است و بهتر است آخرین فایل ها را دریافت کنیم.
برای شروع نصب، در command prompt خود با استفاده از دستور cd، به دایرکتوری موردنظر خود می رویم. برای مثال ما می خواهیم در دسکتاپ خود برنامه خود را با نام reactapp ایجاد کنیم.پس به مسیر desktop می رویم.
مثال:
|
1 |
cd Desktop |
حال دستور npx create-react-app nameApp را وارد می کنیم. به جای nameApp نام پوشه ای که قصد دارید فایل های ری اکت درون آن قرار بگیرد را وارد کنید. این نام دلخواه است.
نحوه نوشتن:
|
1 |
npx create-react-app nameApp |
شرکت فیس بوک پکیج کاملی از فایل های مختلف برنامه را بروی github قرار داده است که با دریافت آن میتوانید کار خود را شروع کنید. سایتی هم مخصوص create react app به نشانی زیر وجود دارد که میتوانید به آن مراجعه کنید و مستندات آن را مشاهده کنید.
آدرس:
با وارد کردن دستور دریافت ری اکت از سرور شروع به دانلود فایل های مرتبط می کند.
مثال:
|
1 |
npx create-react-app reactapp |
در صورت نصب موفق در انتها راهنمایی برای اجرا کردن برنامه برای شما نمایش داده می شود. برای اجرای برنامه یکبار دیگر به پوشه پروژه جدید ساخته شده خود رفته سپس در command prompt از دستور yarn start یا npm start استفاده می کنیم.
فرق خاصی این دو دستور با هم نمی کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
yarn start npm start //Starts the development server yarn build //Bundles the app into static files for production yarn test //Starts the test runner yarn eject /* Removes Create React App scripts and preset configurations and copies build dependencies, configuration files, and scripts into the app directory. If you do this, you can't go back to using Create React App on your project! */ |
دریافت از طریق npm
در صورتی که نخواهیم هر بار از سرور درخواست دریافت فایل را داشته باشیم و همواره یک نسخه از آن را بر روی سیستم خود داشته باشیم بهتر است از روش npm استفاده کنید.ابتدا باید پکیج create-react-app را دانلود کرده سپس پروژه خود را نصب کنیم.
با استفاده از علامت g- بصورت global بر روی سیستم خود create-react-app را نصب کرده ایم.
نحوه نوشتن:
|
1 |
npm i -g create-react-app |
بعد از دانلود و نصب موفق آمیز اولین پروژه خود را با استفاده از دستور create-react-app ایجاد می کنیم.
در اینجا نام پروژه خود را برای نمونه reactapp قرار داده ام.
نحوه نوشتن:
|
1 |
create-react-app reactapp |
بعد از دانلود و ساخت پروژه جدید به پوشه پروژه ساخته شده جدید می رویم و از دستورات زیر جهت اجرا کردن پروژه استفاده می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
yarn start npm start //Starts the development server yarn build //Bundles the app into static files for production yarn test //Starts the test runner yarn eject /* Removes Create React App scripts and preset configurations and copies build dependencies, configuration files, and scripts into the app directory. If you do this, you can't go back to using Create React App on your project! */ |
