Learn React – راهنمای زبان آموزان پرمشغله ⚡️🔥🚀

Summarize this content to 400 words in Persian Lang
توجه: با این سریال تظاهر نمی کنم که بهترین یا دقیق ترین هستم. هدف من این است که زبان را قابل درک تر کنم و به افراد بیشتری اجازه یاد گرفتن آن را بدهم، به ویژه آنهایی که مشغول یا تازه کار هستند. بنابراین، بیایید همه چیز را به زبان ساده تجزیه کنیم و یادگیری را کمی سرگرم کننده تر کنیم! 😄

آیا زمان هایی را به خاطر می آورید که برای راه اندازی یک پروژه ساده زمان زیادی طول کشید؟ اگر به اندازه کافی بزرگ هستید (مثل من) مطمئناً به یاد دارید، آن روزهایی که پیکربندی همه چیز مانند حل یک مکعب روبیک بود – خسته کننده و وقت گیر. خوب، آن روزها خیلی گذشته است! با ابزارهای مدرنی مانند Create React App (CRA) و Vite، راه‌اندازی یک پروژه React با TypeScript اکنون سریع‌تر، آسان‌تر و بسیار سرگرم‌کننده‌تر است.

این آموزش بخشی از مجموعه‌ای از تکه‌های کوچک است که برای والدین پرمشغله، دانش‌آموزان، متخصصان یا هرکسی که برنامه‌ای پرمشغله دارد که می‌خواهد طراحی شده باشد (واقعاً به نظر می‌رسد که می‌دانم در مورد چه چیزی صحبت می‌کنم، نه؟) طراحی شده است. React و TypeScript را یاد بگیرید. هدف این است که مراحلی قابل هضم و عملی را به شما ارائه دهد که بتوانید بدون احساس خستگی در برنامه روزانه خود قرار دهید.

و هی، من آن را روشن نگه خواهم داشت! بالاخره چه کسی می گوید که یادگیری نمی تواند سرگرم کننده باشد؟

فهرست مطالب

چرا TypeScript با React؟
راه اندازی با Create React App
راه اندازی با Vite
کدام یک را باید انتخاب کنید؟
نتیجه گیری

1. چرا TypeScript با React؟

TypeScript مانند یک عینک قابل اعتماد برای کد شما است. ناگهان همه چیز واضح تر می شود و شما می توانید خطاهای احتمالی را قبل از تبدیل شدن به اشکال پیدا کنید. هنگامی که با React جفت می شود، کیفیت کد بهتر، ابزارهای پیشرفته و اعتماد به نفس بیشتری را هنگام ساخت برنامه های بزرگ ارائه می دهد. اما نترس! به لطف ابزارهایی مانند Create React App (CRA) و Vite، تنظیم TypeScript با React هرگز آسان‌تر نبوده است.

خواه شما یک حرفه ای پر مشغله باشید که فقط برای جلسات آموزشی 20 تا 30 دقیقه ای وقت دارید یا دانش آموزی که در پروژه های متعدد شعبده بازی می کند، این راهنما اینجاست تا به شما کمک کند تا با React و TypeScript راه اندازی کنید.

اما یک سری آموزش عالی بدون جو پدر خوب قدیمی چیست؟

چرا کامپوننت React از حالت خود جدا شد؟
دیگه نمیتونست این رابطه رو تحمل کنه!

2. راه اندازی با Create React App

Create React App چیست؟Create React App (CRA) یک راه رسمی و ساده برای راه اندازی پروژه های React است. بیشتر تنظیمات را برای شما انجام می دهد، بنابراین می توانید به جای تنظیم Webpack، Babel یا ابزارهای دیگر، روی نوشتن کد تمرکز کنید. آن را به عنوان یک دستگاه قهوه آماده در نظر بگیرید، فقط یک دکمه را فشار دهید و شما آماده هستید!

چگونه یک پروژه با CRA راه اندازی کنیم؟1. برنامه Create React را نصب کنید (بدون نیاز به نصب سراسری):ترمینال خود را باز کنید و این دستور را برای ایجاد یک پروژه React جدید با TypeScript اجرا کنید:npx create-react-app nik-is-great –template typescript

این دستور خواهد شد:

Create React App را دانلود و نصب کنید.
یک پوشه پروژه جدید به نام “nik-is-great” راه اندازی کنید.
پروژه را برای استفاده از TypeScript از قبل پیکربندی کنید.

2. به دایرکتوری پروژه بروید:پس از اجرای دستور، به پوشه پروژه جدید خود بروید:cd nik-is-great

3. سرور توسعه را راه اندازی کنید:برای راه اندازی برنامه خود در مرورگر، کافی است تایپ کنید:npm start

برنامه شما در http://localhost:3000 پخش می شود و برای راک اند رول آماده می شود!

چرا CRA را انتخاب کنید؟

مبتدی دوستانه: راه اندازی آسان با حداقل تلاش.

از قبل برای شما پیکربندی شده است: CRA کار سخت راه اندازی Webpack، Babel و ابزارهای دیگر را انجام می دهد.

به طور گسترده پذیرفته شده است: اگر می خواهید به چیزی قابل اعتماد و مستند بچسبید یک گزینه عالی است.

با این حال، درست مانند آن دوستی که برای همیشه آماده می شود، CRA می تواند با پروژه های بزرگتر کمی کند عمل کند!

3. راه اندازی با Vite

وایت چیست؟Vite ابزاری مدرن و با کارایی بالا است که در مقایسه با سدان خانوادگی CRA مانند یک خودروی اسپورت سریع است. Vite از esbuild در زیر هود برای ساخت‌های توسعه سریع و از Rollup برای ساخت‌های تولید بهینه استفاده می‌کند. اگر برای سرعت و انعطاف پذیری ارزش قائل هستید، Vite راهی برای رفتن است.

چگونه با Vite یک پروژه راه اندازی کنیم؟1. Vite را با استفاده از npm نصب کنید:npm create vite@latest

Need to install the following packages:create-vite@6.0.1Ok to proceed? (y) y✔ Project name: … nik-is-great✔ Select a framework: › React✔ Select a variant: › TypeScript

2. به دایرکتوری پروژه بروید:پس از اجرای دستور، به پوشه پروژه جدید خود بروید:cd nik-is-great

3. وابستگی ها را نصب کنید:بعد، تمام وابستگی های مورد نیاز را نصب کنید:npm install

4. سرور توسعه را راه اندازی کنید:برای راه اندازی و راه اندازی سرور توسعه، تایپ کنید:npm run devبرنامه شما اکنون در http://localhost:5173 فعال خواهد شد!

چرا Vite را انتخاب کنید؟

عملکرد فوق العاده سریع: وقتی صحبت از زمان ساخت و تعویض ماژول داغ (HMR) به میان می آید، Vite می درخشد.

مدرن و مینیمالیستی: این یک راه اندازی ناب است که به شما کنترل بیشتری را با هزینه اضافی کمتر می دهد.

اکوسیستم در حال رشد: محبوبیت Vite در حال افزایش است، و این یک گزینه عالی برای توسعه وب مدرن است.

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

4. کدام یک را باید انتخاب کنید؟

بنابراین، کدام ابزار را باید انتخاب کنید؟ این واقعا به نیاز شما بستگی دارد!

اگر: Create React App را انتخاب کنید:

شما تازه شروع کرده اید و یک راه اندازی آسان و هدایت شده را ترجیح می دهید.
روی پروژه‌های کوچک‌تر کار می‌کنید یا به زمان‌های ساخت کندتر اهمیتی نمی‌دهید.

Vite را انتخاب کنید اگر:

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

هر دو عالی هستند، اما ممکن است یکی برای نیازهای خاص شما مناسب تر باشد!

5. نتیجه گیری

به لطف Create React App و Vite، راه‌اندازی React با TypeScript اکنون سریع‌تر و آسان‌تر از همیشه است. چه یک والدین پرمشغله باشید، چه دانش آموزی که سعی در یادگیری بین کلاس ها دارد، یا یک توسعه دهنده حرفه ای با برنامه ای فشرده، می توانید با حداقل تلاش شروع کنید.

به یاد داشته باشید: یادگیری لازم نیست طاقت فرسا باشد. کوچک شروع کنید، با سرعت خودتان یاد بگیرید و از این روند لذت ببرید!

بنابراین، منتظر چه چیزی هستید؟ ابزار خود را انتخاب کنید، مراحل را دنبال کنید و از امروز شروع به ساخت برنامه های React و TypeScript خود کنید. و منتظر آموزش های بیشتر در این مجموعه باشید!

Ps: اگر آن را تا اینجا دنبال کرده اید، می توانید مخزنی را که من با هر دو مثال تنظیم کرده ام پیدا کنید – https://github.com/nikdyankov/react-from-zero-to-hero/tree/main/lesson-1