نصب ری‌ اکت

قبلی

راه‌اندازی ری اکت

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

با استفاده از CDN، ری اکت را مستقیم از HTML اجرا کنید. (تست سریع)
با Node.js و npm ری اکت را نصب کنید. (روش استاندارد)

نکته: در ادامه با این روش‌ها آشنا می‌شویم.

ری اکت مستقیم از HTML

سریع‌ترین راه برای اجرای ری اکت، نوشتن آن داخل HTML است.

اول با اضافه کردن سه script زیر شروع کنید، دو خط ابتدایی به ما اجازه می‌دهند تا ری اکت را داخل فایل HTML اجرا کنیم، و سومین خط یعنی Babel به ما اجازه می‌دهد تا از نوع نوشتار JSX و ES6 در مرورگر‌های قدیمی استفاده کنیم.

نکته: در درس JSX ری اکت، بیشتر با نوع نوشتار JSX آشنا خواهید شد.

<head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

نکته: استفاده از این روش برای تست سریع موردی ندارد، ولی روش استاندار نصب ری اکت با استفاده از Node.js و npm است.

ابزارهای نصب ری اکت

برای نصب ری اکت می توانید از ابزارهای زیر استفاده کنید:

Vite
CRA یا Create React App

در ادامه یک پروژه ری اکتی را با هر دو روش ایجاد و اجرا می‌کنیم.

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

ولی برای استفاده از این ابزارها ابتدا باید Node.js را روی سیستم خود نصب کنید.

نصب Node.js

ری اکت به تنهایی نیازی به Node.js ندارد، اما برای نصب پکیج‌ها و اجرای ابزارهایی مثل Vite یا CRA، به Node.js نیاز داریم.

به سایت رسمی Node.js بروید و نسخه‌ی LTS (پایدار) رو دانلود کنید.

مراحل نصب بسیار ساده هستند. فقط کافیست چند بار روی دکمه Next کلیک کنید.

برای اطمینان از نصب Node.js، در کادر جستجوی ویندوز (سمت چپ پایین)، عبارت Terminal را تایپ کنید و اولین گزینه نمایش داده‌شده را باز کنید.

سپس، در ترمینال سیستم خود دستورات زیر را به ترتیب اجرا کنید.

node -v

npm -v

این دستورات باید نسخه‌ی نصب‌شده‌ی Node.js و npm (مدیریت پکیج‌های Node) را نشان دهد.

ایجاد پروژه ری‌اکتی با Vite

حالا که Node.js را نصب کردید، می‌توانید با Vite یک پروژه ری‌اکت ایجاد کنید. (پیشنهادی)

ابتدا با استفده از ترمینال، به پوشه‌ای که می‌خواهید پروژه در آن ایجاد شود بروید (با دستور cd). به عنوان مثال:

cd C:/projects/react

سپس دستور زیر را در ترمینال وارد کنید.

npm create vite@latest my-app

از بین گزینه‌های نمایش داده شده با استفاده از کلید‌های مکان‌نما (arrow keys) React را انتخاب کنید و کلید Enter را بزنید.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

در مرحله بعد متناسب به نیاز خود یکی از گزینه‌ها را انتخاب کنید.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

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

اجرای ری اکت

خب الان شما آماده‌اید که اولین پروژه ری‌اکتی خود را اجرا کنید.

در وهله اول، شما باید مسیر ترمینال را با استفاده از دستور زیر به پروژه خود تغییر دهید.

cd my-app

در ادامه دستور زیر را برای نصب وابستگی‌های پروژه (Dependencies) وارد کنید.

npm install

سپس با وارد کردن دستور زیر پروژه ری‌اکتی خود را برای توسعه اجرا کنید.

npm run dev

در ترمینال به شما یک آدرس نمایش داده می‌شود، با نگه داشتن کلید Ctrl و کلیک روی آن پنجره‌ی جدیدی در مرورگرتان باز می‌شود. در غیر این صورت آدرس زیر را در مرورگرتان وارد کنید.

localhost:5137

ایجاد پروژه ری‌اکتی با Create React App

علاوه بر Vite، می توانید با استفاده از CRA، یک اپلیکیشن ری‌اکتی بسازید.

ابتدا دستور زیر را در ترمینال وارد کنید.

npx create-react-app my-app

این دستور تمام پیش‌نیازهای شما، برای استفاده از ری‌اکت را نصب می‌کند.

نکته: npx (اجرا پکیج‌های Node) به همراه npm و Node.js در سیستم شما نصب می‌شود.

اجرای ری اکت

خب الان شما آماده‌اید که اولین پروژه ری‌اکتی خود را اجرا کنید.

در وهله اول، شما باید مسیر ترمینال را با استفاده از دستور زیر به پروژه خود تغییر دهید.

cd my-app

سپس با وارد کردن دستور زیر پروژه ری‌اکتی خود را برای توسعه اجرا کنید.

npm start

پنجره‌ی جدیدی داخل مرورگرتان باز خواهد شد، در غیر این صورت آدرس زیر را در مرورگرتان وارد کنید.

localhost:3000

فایل‌های مهم پروژه

index.html: فایل اصلی HTML که ری اکت داخل آن رندر می‌شود.
App.jsx: اولین کامپوننت ری اکت که داخل آن کدهای UI نوشته می‌شود.
main.jsx: نقطه‌ی شروع ری اکت که App.jsx را در مرورگر، نمایش می‌دهد.

ویرایش اپلیکیشن ری اکتی

خب حالا که پروژه خود را اجرا کردید، وقت ویرایش آن است.

داخل پوشه my-app، به دنبال پوشه‌ای به نام src بگردید. سپس داخل پوشه src فایلی با نام App.jsx را باز کنید، محتویات این فایل به شکل زیر خواهد بود.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

در بخش داخل return را تغییراتی ایجاد کنید (مثلا محتویات تگ h1) و فایل را ذخیره کنید.

نکته: تغییرات شما بدون رفرش کردن مرورگر اعمال می‌شود.

تمامی محتویات داخل تابع را با تگ <h1> زیر جایگزین کنید.

function App() {
  return (
    <h1>Hello World!</h1>
  )
}

export default App

توجه داشته باشید که:

import ها (واردات)
هوک useState()

را پاک کردیم.

نکته: در ادامه به بررسی هوک‌ها می‌پردازیم.

خلاصه درس

تمرین

مشاهده پاسخ

قبلی

توسعه دهندگان

نیما عراقی