نصب ری‌ اکت

قبلی

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

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

با استفاده از 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، در ترمینال سیستم خود دستورات زیر را به ترتیب اجرا کنید.

node -v

npm -v

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

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

اگر Node.js در سیستم شما نصب شده است، می توانید با استفاده از Vite، یک اپلیکیشن ری‌اکتی بسازید. (روش پیشنهادی)

دستور زیر را با استفاده از ترمینال (سیستم یا ویرایشگر کد) در پوشه (directory) مورد نظر اجرا کنید.

npm create vite@latest my-app

از بین گزینه‌های نمایش داده شده React را انتخاب کنید.

در مرحله بعد متناسب به نیاز خود یکی از گزینه‌ها را انتخاب کنید. (در این مجموعه آموزشی از JavaScript استفاده می‌شود)

اجرای ری اکت

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

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

cd my-app

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

npm install

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

npm run dev

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

localhost:5137

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

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

دستور زیر را با استفاده از ترمینال (سیستم یا ویرایشگر کد) در پوشه (directory) مورد نظر اجرا کنید.

npx create-react-app my-app

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

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

اجرای ری اکت

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

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

cd my-app

در صورتی که پروژه خود را با Create React 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

بخش HTML را تغییر دهید و فایل را ذخیره کنید.

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

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

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

export default App

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

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

را پاک کردیم.

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

خلاصه درس

تمرین

مشاهده پاسخ

قبلی

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

نیما عراقی