نحوه ایجاد یک محیط واکنش محلی با Vite

شما برای یادگیری جاوا اسکریپت سخت کار کرده اید. آیا اکنون آماده شروع یادگیری React هستید؟ این مقاله نحوه ایجاد یک محیط محلی با استفاده از Vite را آموزش می دهد و یک رویکرد عملی برای تمرین React ارائه می دهد!

معرفی

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

در این مقاله، نحوه ایجاد یک محیط محلی را با استفاده از Vite، یک ابزار ساخت و سرور توسعه که سریع و کارآمد طراحی شده است، خواهید آموخت.

این مقاله شامل موارد زیر است:

• دستورالعمل های گام به گام در مورد نحوه ایجاد یک پروژه Vite
• حذف دیگ بخار پیش فرض
• ایجاد کامپوننت های ساده React
• اضافه کردن یک ظاهر طراحی اولیه CSS.
• استقرار پروژه با Netlify (اختیاری)

در پایان این آموزش، درک کاملی از ایجاد یک محیط React محلی با استفاده از Vite خواهید داشت!

وایت چیست؟

Vite یک ابزار ساخت و سرور توسعه است که سریع و کارآمد طراحی شده است. معمولاً برای توسعه برنامه های وب مدرن با چارچوب هایی مانند React، Vue و Svelte استفاده می شود.

Vite یک راه سریع و آسان برای ایجاد یک محیط توسعه محلی ارائه می دهد که به توسعه دهندگان اجازه می دهد کد خود را در یک محیط ایمن و کنترل شده آزمایش و آزمایش کنند.

با Vite، توسعه‌دهندگان می‌توانند از ویژگی‌هایی مانند جایگزینی ماژول داغ استفاده کنند که امکان توسعه سریع‌تر و چرخه‌های آزمایشی را فراهم می‌کند. به طور کلی، Vite ابزار قدرتمندی است که می تواند به توسعه دهندگان کمک کند تا گردش کار خود را ساده کرده و بهره وری خود را بهبود بخشند.

پیش نیازها

ما از ویرایشگر کد VS با Node.js و مدیر بسته نود نصب شده برای ایجاد محیط توسعه محلی استفاده خواهیم کرد.

خط فرمان (ترمینال bash)

سپس یک پروژه Vite با استفاده از خط فرمان ایجاد می کنیم و جاوا اسکریپت و React را انتخاب می کنیم.

(اختیاری) Netlify

در نهایت پروژه React را از خط فرمان در Netlify مستقر خواهیم کرد.

ایجاد یک پروژه Vite

در کد VS، با استفاده از ترمینال bash، دستور زیر را تایپ کنید:

npm create vite@latest

در صورت موفقیت آمیز بودن، از شما خواسته می شود که نام پروژه را نامگذاری کنید (نام پیش فرض vite-project است).

? Project name: vite-project

در مرحله بعد، از شما خواسته می شود تا با استفاده از کلیدهای جهت نما، چارچوبی را انتخاب کنید. با فشار دادن کلید enter برای ارسال، React را انتخاب می کنیم.

Select a framework:
     Vanilla
     Vue
     React
     Preact
     Lit
     Svelte
     Others

سپس از شما خواسته می شود که یک نوع را انتخاب کنید. جاوا اسکریپت را انتخاب می کنیم و کلید enter را برای ارسال فشار می دهیم.

Select a variant:
     JavaScript
     TypeScript
     JavaScript + SWC
     TypeScript + SWC

اکنون یک پروژه Scaffolding خواهید داشت و مسیر نمایش داده می شود (من C:\Users\larocca\vite-project است).

در نهایت از ما خواسته می شود که دایرکتوری خود را به پروژه خود تغییر دهیم و سپس npm install و npm run dev را اجرا کنیم.

Done. Now run:

     cd vite-project
     npm install
     npm run dev

پس از پیروی از این دستورالعمل ها، محیط توسعه React محلی شما تنظیم می شود!

با نگه داشتن نشانی محلی در ترمینال bash خود، از “ctrl + click” برای مشاهده پروژه استفاده کنید.

  VITE v4.1.4  ready in 495 ms

     ➜  Local:   http://127.0.0.1:5173/
     ➜  Network: use --host to expose
     ➜  press h to show help

برای ویرایش پروژه و شروع تمرین کدنویسی React، در ویرایشگر VS Code:

• فایل
• پوشه را باز کنید
• با استفاده از مسیر پروژه داربست ایجاد شده، پوشه پروژه خود را انتخاب کنید (مال من C:\Users\larocca\vite-project است)

در حال ویرایش پروژه

پس از باز کردن پوشه پروژه، باید فایل های زیر را مشاهده کنید:

ما با جایگزین کردن متن “Vite + React” با “Hello World!”

برای به روز رسانی به فایل زیر بروید:

اکنون، آن را پیدا کنید <h1> عنصر (می توانید از find ctrl + f استفاده کنید)، و متن را جایگزین کنید و بگویید “Hello World!”

هنگامی که متن را جایگزین کردید، پروژه را ذخیره کنید (ctrl + s). اکنون تغییر خود را در مرورگر خواهید دید! همانطور که در کد خود تغییراتی ایجاد می کنید، هر بار که کار خود را ذخیره می کنید، به طور خودکار در مرورگر به روز می شود (شبیه به Live Server)

میانبرهای ترمینال Vite

در زیر لیستی از میانبرهای Vite وجود دارد که می توانید در ترمینال bash استفاده کنید. پس از خروج از برنامه، استفاده کنید برنامه npm را اجرا کنید تا دوباره راه اندازی شود

  Shortcuts
  press r to restart the server
  press u to show server url   
  press o to open in browser   
  press c to clear console     
  press q to quit

برداشتن صفحه دیگ پیش فرض

اکنون که محیط React محلی ما راه اندازی شده است، بیایید به دیگ بخار پیش فرض نگاه کنیم و ببینیم چه چیزی را می توانیم حذف کنیم.

App.css و index.css

تفاوت App.css و index.css چیست؟

در React، App.css فایلی است که در آن می‌توانید استایل‌هایی را برای یک مؤلفه برنامه خاص مانند سرصفحه یا پاورقی بنویسید.

از طرف دیگر، index.css برای سبک هایی استفاده می شود که بر کل برنامه تأثیر می گذارد، مانند رنگ پس زمینه یا اندازه فونت.

بنابراین، اگر می خواهید به یک جزء خاص استایل بدهید، می توانید از App.css استفاده کنید. اگر می خواهید به کل برنامه استایل بدهید، می توانید از index.css استفاده کنید.

هر دو فایل App.css و index.css را در نظر بگیرید یا حذف کنید.

سپس در index.css کد قالب بندی زیر را اضافه می کنیم:

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

App.jsx و main.jsx

در فایل App.jsx، مقداری از کدهای تابع App را حذف می کنیم.

فایل App.jsx اکنون باید به شکل زیر باشد:

import './App.css'

function App() {

  return (
    <div className="App">

    </div>
  )
}

export default App

اجزای واکنش نشان دهند

ما قصد داریم چند کامپوننت ساده React ایجاد کنیم. اجزای React که ما می سازیم توابع جاوا اسکریپت هستند که بلوک هایی از کد HTML را برمی گرداند.

سپس مؤلفه‌های React را که می‌سازیم به فایل main.jsx وارد می‌کنیم تا رندر شوند.

راه اندازی محیط React ما

پس از حذف دیگ بخار پیش فرض، یک پوشه اجزای داخل پوشه src ایجاد می کنیم.

ایجاد کامپوننت های ساده React

اکنون دو جزء ساده React، یک نوار ناوبری و یک بخش اصلی ایجاد می کنیم.

نحو ممکن است در ابتدا کمی عجیب به نظر برسد (برای من چنین شد)، اما مفهوم کد بسیار ساده است. ما صفحه وب سایت را به قطعات تقسیم می کنیم و کد HTML را در جاوا اسکریپت می نویسیم.

نوار ناوبری

ما یک فایل jsx جدید با عنوان “Navbar” در پوشه اجزا ایجاد می کنیم. سپس تابعی به نام Navbar می نویسیم که یک بلوک از کد HTML را دوباره تنظیم می کند. در نهایت، کد جاوا اسکریپت را برای گزارش عملکرد اضافه می کنیم.

export default function Navbar() {
    return (
            <nav>
                <div>My React website</div>
                <ul>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>Page 3</li>
                </ul>
            </nav>
    )
}

اصلی

به روشی مشابه تابع Navbar که نوشتیم، این کار را انجام خواهیم داد:

• ما یک فایل jsx جدید با عنوان “Main” در پوشه اجزا ایجاد می کنیم
• سپس تابعی به نام Main می نویسیم که یک بلوک از کد HTML را مجددا تنظیم می کند
• کد جاوا اسکریپت را برای گزارش عملکرد اضافه کنید

export default function Main() {
    return (
            <main>
                <h1>Let's practice some React!</h1>
                <h3>Paragraph 1</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores pariatur officiis magnam, optio reprehenderit labore culpa repudiandae voluptates, quos et assumenda placeat maxime non nam.</p>
                <h3>Paragraph 2</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores, sed accusantium nobis vero ut laborum.</p>
            </main>
    )
}

App.jsx

در فایل App.jsx، ابتدا کامپوننت‌های React را که با افزودن کد زیر به فایل ایجاد کرده‌ایم وارد می‌کنیم:

import './App.css'
import Navbar from './components/Navbar'
import Main from './components/Main'

عملکرد برنامه

اکنون یک تابع App می نویسیم که نوار Navbar و اجزای اصلی را برمی گرداند. به نحو توجه کنید. مؤلفه ها در توابع به عنوان عناصر HTML با نام سفارشی با حروف بزرگ نوشته می شوند.

function App() {

  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  )
}

export default App

از آنجایی که App.jsx قبلاً «برنامه پیش‌فرض صادرات» را در پایین فایل دارد، می‌توانیم آن را از ابتدای عملکرد حذف کنیم.

main.jsx

کد boilerplate در فایل اصلی jsx از قبل شامل همه چیزهایی است که لازم است. این شامل تمام واردات ضروری است و سپس عملکرد برنامه ایجاد شده ما را به صفحه وب ارائه می کند.

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

صفحه وب رندر شده باید به شکل زیر باشد:

یک ظاهر طراحی اولیه CSS

حالا بیایید یک استایل اولیه CSS را اضافه کنیم.

ما قبلاً کد زیر را به index.css اضافه کردیم:

 body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

حالا بیایید استایل پایه CSS زیر را به فایل CSS App اضافه کنیم:

nav, nav ul {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

nav li {
  list-style-type:none;
  margin: 0 15px;
}

nav li:hover {
  color: lightgreen;
  cursor: pointer;
}

main {
  border: 1px solid red;
  padding: 0 15px;
}

پس از استایل CSS، صفحه وب رندر شده باید به شکل زیر باشد:

توجه داشته باشید: رنگ حاشیه قرمز برای اهداف عنصر HTML بصری اضافه شده است. با خیال راحت آنها را بازسازی یا حذف کنید.

تبریک می گویم!

شما اکنون با موفقیت یک محیط محلی را با استفاده از Vite برای تمرین کدنویسی React ایجاد کرده اید!

اجرای پروژه با استفاده از Netlify (اختیاری)

در وب‌سایت Vite، من از دستورالعمل‌های «استقرار راهنمای وب‌سایت ثابت» برای استقرار وب‌سایت React تمرینی خود با استفاده از Netlify استفاده کردم.

تنها در چند مرحله، می توانید وب سایت تمرینی خود را گسترش دهید:

Netlify

1. Netlify CLI را نصب کنید.
2. با استفاده از ntl init یک سایت جدید ایجاد کنید.
3. استقرار با استفاده از ntl deploy.

توجه داشته باشید: برای ساده تر، ما انتخاب می کنیم که سایت را به صورت دستی ایجاد و راه اندازی کنیم.

# Install the Netlify CLI
$ npm install -g netlify-cli

# Create a new site in Netlify
$ ntl init

خط فرمان شما باید شبیه به این باشد:

اکنون به ما گفته می شود که دستور ساخت خود را اجرا کنیم:

$ npm run build

اکنون می توانیم با اجرای ntl deploy پیش نمایش سایت خود را مشاهده کنیم.

توجه داشته باشید: dist را برای فهرست انتشار انتخاب کنید.

# Deploy to a unique preview URL
$ ntl deploy

هنگامی که استقرار شما فعال شد، پیش‌نمایش آن را با استفاده از “ctrl + click” در حالی که روی URL پیش‌نویس وب‌سایت قرار دارید، مشاهده کنید.

Netlify CLI یک URL پیش نمایش را برای بازرسی با شما به اشتراک می گذارد. هنگامی که برای تولید آماده شدید، از پرچم پرود استفاده کنید.

توجه داشته باشید: dist را برای فهرست انتشار انتخاب کنید.

# Deploy the site into production
$ ntl deploy --prod

سایت شما اکنون مستقر شده است! ترمینال شما باید شبیه تصویر زیر باشد. شما می توانید با استفاده از “ctrl + click” در حالی که ماوس را روی URL وب سایت نگه دارید، به وب سایت خود بروید.

نتیجه

ایجاد یک محیط React محلی با استفاده از Vite یک راه عملی برای به دست آوردن تجربه عملی با React و بهبود مهارت‌های خود است. با دنبال کردن دستورالعمل‌های گام به گام در این مقاله آموزشی، می‌توانید به راحتی یک پروژه Vite ایجاد کنید، صفحه پیش‌فرض را حذف کنید، اجزای ساده React ایجاد کنید و یک استایل اولیه CSS اضافه کنید.

این مقاله آموزشی همچنین دستورالعمل‌های اختیاری در مورد استقرار پروژه خود با استفاده از Netlify ارائه می‌کند و به شما امکان می‌دهد پیشرفت یادگیری خود را در React با دیگران به اشتراک بگذارید!

بیایید وصل شویم! من در لینکدین فعال هستم و توییتر.

آیا اکنون می توانید با استفاده از Vite یک محیط React محلی ایجاد کنید؟ آیا قبلاً یک محیط React محلی با استفاده از روش های دیگر ایجاد کرده اید؟ لطفا مقاله را به اشتراک بگذارید و نظر دهید!