آموزش رایگان 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

آموزش رویدادهای پیشرفته در جاوا اسکریپت: بابلینگ، کپچرینگ و توقف پیش‌فرض - راهنمای جامع

مطالعه بیشتر
آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child
10م شهریور 1402

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

مطالعه بیشتر
آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)
15م مرداد 1404

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها
5م شهریور 1402

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

مطالعه بیشتر
آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر
5م شهریور 1402

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

مطالعه بیشتر
آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم
29م مهر 1403

آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم

مطالعه بیشتر
مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان
28م شهریور 1402

مفهوم متغیرها و انواع داده در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مطالعه بیشتر
چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی
2م شهریور 1403

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

مطالعه بیشتر
درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی
24م آذر 1404

درک Props و انتقال داده‌ها بین کامپوننت‌ها در Vue.js | آموزش کاربردی

مطالعه بیشتر
استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف
12م آبان 1403

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

مطالعه بیشتر
آموزش Emit در Vue.js | انتقال رویداد از کامپوننت فرزند به والد
28م آذر 1404

آموزش Emit در Vue.js | انتقال رویداد از کامپوننت فرزند به والد

مطالعه بیشتر
تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها
9م آبان 1403

تنظیم عرض و ارتفاع عناصر در CSS: استفاده از width، height، max و min برای کنترل دقیق اندازه‌ها

مطالعه بیشتر

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