یک برنامه React جدید ایجاد کنید

برای داشتن تجربه بهتر کاربری و توسعه دهنده از یک ابزار دستی استفاده کنید.

در این صفحه چند راهنمای از ابزار های محبوب React توضیج داده شده است که کار های مانند :

• اسکلینگ (Scaling) بسیاری از فایل ها و components ها
• استفاده از کتابحانه های npm
• تشخص زود اشتباهات مشترک
• ویرایش زنده css و JS درزمان توسعه
• بهینه سازی خروجی برای خورجی نهایی

برای ابزار های که توصیه شده نیازی به پیکربندی برای شروع ندارید.

ممکن است شما به یک بزار دستی احتیاج نداشته باشید

اگر شما مشکلات ذکر شده بالا را تجربه نمی کنید یا با استفاده از ابزار های JavaScript هنوز احساس راحتی ندارید، React را به عنوان تگ ساده <script> در صفحه HTML ، اختیاری با JSX در نظربگیرید.

این ساده ترین راه برای کار با React در یک وب سایت است. همیشه می توانید یک ابزار بزرگتر اضافه کنید اگر فکر می کنید کمک کنده است!

ابزار های پیشنهادی | Recommended Toolchains

تیم React در درجه اول این راه حل ها را توصیه می کند:

• اگر در حال یادگیری React یا ایجاد یک برنامه تک صفحه ای(single-page app) جدید هستید، از React app استفاده کنید.
• اگر در حال ساخت وب سایت در سرور js هستید، Next.js را امتحان کنید.
• اگر در حال ایجاد یک وب سایت محتوا محور استاتیک هستید، Gatsby را امتحان کنید.
• اگردر حال ساخت یک component کتابخانه هستید و یا یکپارچه سازی کد های موجود، ابزارهای انعطاف پذیرتری را امتحان کنید.

ایجاد Create React App | React

Create React App یک محیط راحت برای یادگیری React است، بهترین راه برای شروع ساختن یک برنامه تک صفحه ای جدید در React است.

این محیط توسعه شما را تنظیم می کند تا از جدیدترین ویژگی های JavaScript استفاده کنید، یک تجربه خوب برای توسعه دهنده و برنامه شما را بهینه می کند. شما باید Node >= 8.10 و npm >= 5.6 روی سیستم خود داشته باشید. برای ایجاد یک پروژه ، اجرا کنید:

نکته

Npx در خط اول یک typo نیست – این یک package runner tool است که با npm 5.2+ ارائه می شود.

Create React App از منطق بک اند (backend logic) و پایگاه داده ها (databases) پشتیبانی نمی کند. این فقط برای ساخت فرات اند (frontend) است، بنابر این می توانید بک اندی (backend) که می خواهید استفاده کنید. در زیر این پوشش،   از Babel و Webpack استفاده می کند ، اما لازم نیست چیزی در مورد آنها بدانید.

هنگامی که آماده پایان کار هستید، دستور npm run build باعث ایجاد نسخه بهینه سازی (optimized) از برنامه شما در پوشه build خواهد شد اسفاده کنید. می توانید اطلاعات بیشتری را درباره Create React App از README و راهنمای کاربر کسب کنید.

Next.js

Next.js یک framework  محبوب و سبک برای برنامه های استاتیک و server‑rendered که با React  ساخته شده اند. این شامل routing solutions out طراحی شده و فرض کنید از Node.js به عنوان محیط سرور استفاده می کنید.

Next.js را از راهنمای رسمی آن بیاموزید.

Gatsby

Gatsby بهترین راه برای ایجاد وب سایت های استاتیک با React است. این امکان را به شما می دهد تا از React components استفاده کنید، اما HTML و CSS را از قبل ارائه شده برای تضمین سریعترین زمان بار ، خارج می کند.

Gatsby  را از راهنمای رسمی آن و یک gallery of starter kits  بیاموزید.

ابزار انعطاف پذیر تر | More Flexible Toolchains

مجموعه های ابزار زیر انعطاف پذیری و انتخاب بیشتری دارند. ما آنها را به کاربران با تجربه توصیه می کنیم:

• Neutrino کامباینی (combines) قدرت گرفته از webpack با سادگی از پیش تنظیم شده، و از تنظیمات از پیش تعیین شده ای برای برنامه React و React components ها استفاده می کند.
• Parcel سریع است، کتنفیگ صفر برنامه های تحت وب (web application bundle) که با React کار می کند.
• Razzle یک framework ارائه server-rendering است که نیازی به پیکربندی نیست، اما انعطاف بیشتری نسب به next.js دارد.

ایجاد یک زنجیره ابزار از ابتدا

یک JavaScript به طور معمول برای ساخت شامل موارد زیر است:

• یک پکیج منیجر، مانند Yarn یا npm. به شما امکان می دهد از مزیت های یک اکو سیستم گسترده third-party پکیج ها استفاده کنید، و به راحتی آنها را نصب یا بروز کنید.
• یک bundler، مانند webpack یا Parcel ، این امکان را به شما می دهد که کد modular بنویسید و باهم را در بسته های کوچک ( small packages) برای بهینه سازی زمان لود سایت استفاده کنید.
• یک compiler مانند Babel . این امکان را به شما می دهد تا کد های بروز JavaScript بنویسید که در مرورگر های قدیمی کارمی کند.

اگر ترجیح می دهید زنجیره ابزار JavaScript خود را تنظیم کنید، این راهنما را بررسی کنید که برخی از قابلیت های Create React App را دوباره ایجاد می کند.

فراموش نکنید که اطمینان حاصل کنید که زنجیره ابزار دستی شما برای تولید درست تنظیم شده باشد.

منبع این مطلب در سایت React js ما است .که مستندات رسمی React را ترجمه کردیم ارائه شده خوشحال میشیم نظرتو ن رو با به اشتراک بگذارید.