راه اندازی واکنش در ماشین محلی شما

با ظهور کتابخانه ها و فریم ورک ها، از جمله React، ساختن برنامه های کاربردی فرانت اند آماده هرگز آسان تر نبوده است.
React یک کتابخانه محبوب و پرکاربرد جاوا اسکریپت است که برای ایجاد رابط های وب سایت یا UI استفاده می شود.
React یک انتخاب عالی برای توسعه اپلیکیشن‌های تک صفحه‌ای (SPA) است، زیرا می‌تواند یک برنامه کامل را در یک صفحه بارگذاری کند و تجربه کاربر را افزایش دهد. ایجاد رابط های کاربری تعاملی را ساده می کند و به توسعه دهندگان این امکان را می دهد تا به راحتی عناصری مانند دکمه ها، فرم ها و نمایش داده ها را بسازند.
عملکرد React با ویژگی‌هایی مانند Virtual DOM و بهینه‌سازی‌های مختلف افزایش می‌یابد و از اجرای کارآمد برنامه‌ها اطمینان می‌دهد. همچنین، React بر قابلیت استفاده مجدد تاکید دارد. کامپوننت ها را می توان در بخش های مختلف یک برنامه مورد استفاده قرار داد، که در نهایت باعث صرفه جویی در زمان و تلاش در طول فرآیند توسعه می شود.

## پیش نیاز

• دانش اولیه فناوری های توسعه وب مانند HTML، CSS، جاوا اسکریپت
• یک ویرایشگر کد و یک مرورگر وب: یک ویرایشگر کد مانند VS Code به شما امکان می دهد کد خود را به راحتی بنویسید و مدیریت کنید در حالی که یک مرورگر وب به شما امکان می دهد برنامه خود را در هاست محلی در زمان واقعی مشاهده کنید.
• Node.js و Npm (Node Package Manager): اینها ابزارهایی برای مدیریت کتابخانه های کد خارجی هستند.

## در حال نصب Node.js و npm
اگر Node.js و npm روی دستگاه شما نصب نشده باشند، نمی‌توانید از React استفاده کنید، زیرا برای عملکرد به بخش‌های کوچک‌تری از کد (بسته‌ها) متکی است. npm به شما کمک می کند این بسته ها را به راحتی نصب، به روز رسانی و مدیریت کنید. Node.js محیطی را برای کار این ابزارها فراهم می کند. در اینجا یک راهنمای گام به گام در مورد نحوه نصب Node.js و npm آورده شده است.

• در مرورگر وب خود، ترجیحاً Chrome یا Edge، به وب سایت رسمی Node.js بروید. https://nodejs.org/
• در وب سایت رسمی Node.js، 2 گزینه دانلود وجود دارد. LTS (پشتیبانی طولانی مدت) و نسخه فعلی با ویژگی های جدید. بهتر است Node.js را با پشتیبانی طولانی مدت دانلود کنید.
• هنگامی که نصب کننده دانلود شد، می توانید با موفقیت آن را طبق دستورالعمل های قبلی نصب کننده اجرا کنید. نکته: گزینه “ADD TO PATH” را در زمانی که ظاهر می شود علامت بزنید تا به شما امکان می دهد Node.js را در ترمینال یا خط فرمان خود اجرا کنید.
• برای تأیید اینکه Node و npm را در دستگاه خود نصب کرده اید، می توانید دستورات زیر را در ترمینال یا خط مشترک خود تایپ کنید.
  node -v & npm -v: این دستورات به شما می گوید که آیا node و npm را نصب کرده اید و چه نسخه ای را نصب کرده اید و چیزی شبیه به این است.

ایجاد یک React Application جدید به صورت محلی با Vite

Vite یک ابزار ساخت است که برای آسان‌تر و سریع‌تر کردن توسعه به‌ویژه برای چارچوب‌های جاوا اسکریپت مانند React، Vue و Svelte طراحی شده است. و غیره برخلاف Create React App (CRA)، Vite از چندین فریمورک پشتیبانی می‌کند و راه بسیار سریع‌تر و کارآمدتری برای بسته‌بندی کد شما برای مرورگر ارائه می‌دهد.
اکنون که Node.js و npm را نصب کرده اید، از Vite برای راه اندازی محیط کاری خود استفاده می کنیم.

• در وب سایت رسمی Vite (https://vite.dev/guide/)، کمی به پایین بروید و لیستی از دستورات برای داربست کردن اولین پروژه Vite خود را مشاهده خواهید کرد.
• در ترمینال خود، دستور ارائه شده در وب سایت را همانطور که در زیر مشاهده می کنید تایپ کنید.

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

• بسته به اینکه ترجیح می دهید از آن استفاده کنید، یک نوع را انتخاب کنید که می تواند جاوا اسکریپت یا TypeScript باشد.

• پروژه شما اکنون داربست شده است و مجموعه جدیدی از دستورات برای اجرا در ترمینال برای شما ارائه شده است:

1. سی دی [Project Name]: این دستور دایرکتوری را به پوشه پروژه ای که ایجاد کرده اید تغییر می دهد.
2. npm install: این دستور بسته های npm مورد نیاز را نصب می کند.
3. npm run dev: این دستور به شما این امکان را می دهد که برنامه خود را به صورت بلادرنگ در هاست محلی خود با استفاده از یک پیوند مشاهده کنید. اگر از کد ویژوال استودیو (VSCode) استفاده می کنید، برای دقت بهتر، توصیه می شود این دستور را در ترمینال VSCode اجرا کنید.

• پس از نصب بسته های npm، می توانید با استفاده از دستور، پوشه خود را مستقیماً در VSCode باز کنید کد . در ترمینال شما

اکنون می توانید از دستور استفاده کنید npm run dev تا برنامه خود را در مرورگر وب خود اجرا کنید. این به شما این امکان را می دهد که تغییراتی را که در پایگاه کد خود ایجاد می کنید در زمان واقعی مشاهده کنید.
اگر در حال خواندن این مطلب هستید، احتمالاً تازه با React شروع کرده اید. همراه با این راهنما، ممکن است بخواهید دوره React توسط Bob Ziroll و FreeCodeCamp در Scrimba را بررسی کنید. https://scrimba.com/learn-react-c0e.