آماده سازی محیط توسعه ReactJS – آموزش ReactJs

آماده سازی محیط توسعه ReactJS

در این بخش نحوه آماده سازی محیط توسعه ReactJS را بررسی خواهیم کرد. برای این کار ابتدا باید NodeJS را بر روی سیستم خود نصب کنید.

نصب NodeJS

اگر قبلا آن را بر روی سیستم خود نصب کرده اید نیاز نیست این مرحله را انجام دهید. برای بررسی نصب بودن NodeJs در خط فرمان دستور زیر را وارد کنید:

node -v

اگر نود نصب شده باشد، نسخه آن چاپ خواهد شد.

به منظور نصب NodeJS ابتدا به سایت آن بروید، سپس از بخش دانلود آن را دانلود کنید و فایل نصب کننده را اجرا کنید تا بر روی سیستم شما نصب شود.

نصب ReactJS

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

• نصب با دستور create-react-app
• نصب با استفاده از webpack و babel

نصب با دستور create-react-app

این روش نصب خیلی ساده تر از روش webpack است. برای نصب ReactJS با استفاده از این روش، مراحل زیر را دنبال کنید.

مرحله اول : ایجاد پروژه با create-react-app

مانند نمونه زیر به دسکتاپ خود رفته و با دستور create-react-app یک برنامه جدید ایجاد کنید:

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

دستور فوق یک فولدر جدید با نام my-app در دسکتاپ شما ایجاد و سپس فایل مورد نیاز را به آن اضافه می کند.

مرحله دوم : حذف فایل ها

مانند نمونه زیر به فولدر ایجاد شده بروید و فایل های موجود در فولدر src را حذف کنید:

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

مرحله سوم : اضافه کردن فایل ها

دو فایل جدید با نام های index.css و index.js در همان فولدر ایجاد کنید. مانند نمونه زیر:

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

سپس محتوای زیر را به فایل index.js اضافه کنید:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

مرحله آخر : اجرای پروژه

در آخر با استفاده از دستور start برنامه ایجاد شده را اجرا کنید. مانند نمونه زیر:

npm start

نوشته آماده سازی محیط توسعه ReactJS – آموزش ReactJs اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.