آموزش رایگان React.js

نصب Node.js و Create React App: شروع پروژه‌های React.js به‌صورت آسان

28م شهریور 1402 محراب حسن زاده
نصب Node.js و Create React App: شروع پروژه‌های React.js به‌صورت آسان

React یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای توسعه وب است و برای شروع توسعه با React، ابتدا باید محیط توسعه خود را تنظیم کنید. در این مقاله، ما به شما نحوه نصب دو ابزار اساسی برای شروع توسعه React یعنی Node.js و Create React App را آموزش می‌دهیم.

 

نصب Node.js

 

Node.js یک محیط اجرایی جاوااسکریپت سمت سرور است که به شما امکان اجرای کدهای جاوااسکریپت خود را در سمت سرور می‌دهد. برای نصب Node.js، مراحل زیر را دنبال کنید:

 

الف) دریافت نصب‌کننده Node.js:

 

به وب‌سایت Node.js مراجعه کنید و نصب‌کننده مناسب برای سیستم عامل خود (Windows، macOS، یا Linux) را دانلود کنید.

 

ب) نصب Node.js:

 

نصب‌کننده را اجرا کنید و دستورالعمل‌های نصب را دنبال کنید. در این مرحله، Node.js و npm (مدیر بسته‌های Node.js) نصب می‌شوند.

 

ج) بررسی نصب:

 

پس از نصب، با اجرای دستور node -v در ترمینال یا خط فرمان، نسخه نصب شده از Node.js را بررسی کنید. به عنوان مثال:


node -v

 

همچنین با اجرای دستور npm -v نسخه npm را بررسی کنید:

 


npm -v

 

نصب Create React App

 

Create React App یک ابزار اسکریپتی است که توسط تیم React ایجاد شده است و به شما اجازه می‌دهد به سرعت یک پروژه React تازه راه‌اندازی کنید بدون نیاز به تنظیمات پیچیده. برای نصب Create React App، مراحل زیر را انجام دهید:

 

الف) نصب Create React App به صورت گلوبال:

 

با استفاده از npm، دستور زیر را اجرا کنید تا Create React App به صورت گلوبال نصب شود:


npm install -g create-react-app

 

ب) ایجاد یک پروژه React جدید:

 

اکنون شما می‌توانید با استفاده از Create React App یک پروژه جدید React ایجاد کنید. به ترمینال یا خط فرمان بروید و دستور زیر را اجرا کنید:


npx create-react-app my-react-app

 

این دستور یک پروژه React با نام my-react-app ایجاد می‌کند.

 

 

اجرای پروژه React

 

پس از ایجاد پروژه React، به پوشه پروژه خود بروید:


cd my-react-app

 

سپس پروژه را با دستور زیر اجرا کنید:

 


npm start

 

این دستور پروژه را در مرورگر شما باز می‌کند و شما می‌توانید از آن برای توسعه و آزمایش اپلیکیشن‌تان استفاده کنید.

 

حالا شما با محیط توسعه React آشنا شده‌اید و می‌توانید شروع به توسعه وب‌اپلیکیشن‌های React کنید. در مقالات بعدی، به عمیق‌تر آموزش React خواهیم پرداخت.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش
2م شهریور 1403

آموزش کامل کار با آرایه‌ها و اشیاء در جاوا اسکریپت: ایجاد، دستکاری و پیمایش

مطالعه بیشتر
معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی
28م شهریور 1402

معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی

مطالعه بیشتر
آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)
14م خرداد 1405

آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)

مطالعه بیشتر
آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها
1م آبان 1403

آموزش ارتباط با سرور و ارسال درخواست‌های HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثال‌ها

مطالعه بیشتر
آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب
12م آبان 1403

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

مطالعه بیشتر
استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل
16م آبان 1403

استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

مطالعه بیشتر
آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا
10م شهریور 1402

آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا

مطالعه بیشتر
آموزش کار با رویدادهای فرم و اعتبارسنجی فرم‌ها در جاوا اسکریپت: راهنمای جامع
3م آبان 1403

آموزش کار با رویدادهای فرم و اعتبارسنجی فرم‌ها در جاوا اسکریپت: راهنمای جامع

مطالعه بیشتر
آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)
4م تیر 1405

آموزش کامل حلقه foreach در PHP برای پیمایش آرایه‌ها (به زبان ساده)

مطالعه بیشتر
آموزش کامل عملگرهای منطقی در PHP (همراه با تفاوت‌های کلیدی)
3م تیر 1405

آموزش کامل عملگرهای منطقی در PHP (همراه با تفاوت‌های کلیدی)

مطالعه بیشتر
آموزش Directive‌ های Vue.js | استفاده از v-model، v-bind و v-show با مثال
23م آذر 1404

آموزش Directive‌ های Vue.js | استفاده از v-model، v-bind و v-show با مثال

مطالعه بیشتر
استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع
9م آبان 1403

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

مطالعه بیشتر

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