مهر کدر - آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

در این مقاله، ما یک پروژه ساده React ایجاد خواهیم کرد تا با مفاهیم اصلی React آشنا شویم. برای شروع، نصب Node.js و Create React App (که در مقاله قبلی معرفی شد) را انجام داده‌ایم. حالا می‌خواهیم یک پروژه React جدید ایجاد کنیم.

ایجاد پروژه

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


npx create-react-app my-first-react-app

در این دستور، my-first-react-app نام پروژه است. شما می‌توانید نام دلخواه خود را انتخاب کنید. Create React App سپس یک ساختار پروژه React ایجاد می‌کند و تمام فایل‌ها و پوشه‌های مورد نیاز را تولید می‌کند.

اجرای پروژه

پس از ایجاد پروژه، به پوشه پروژه خود بروید:


cd my-first-react-app

سپس پروژه را با دستور زیر اجرا کنید:


npm start

این دستور پروژه را در مرورگر شما باز می‌کند و از شما می‌خواهد تا آدرس http://localhost:3000 را در مرورگرتان باز کنید. شما یک پیام "Welcome to React" را در صفحه خواهید دید که نشان‌دهنده اجرای موفقیت‌آمیز پروژه React شماست.

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

حالا که پروژه React شما راه‌اندازی شده است، می‌توانیم یک کامپوننت ساده ایجاد کنیم. به پوشه src در پروژه خود بروید و یک پوشه به نام components ایجاد کنید. در این پوشه، یک فایل جدید با نام HelloWorld.js ایجاد کنید و محتوای زیر را به آن اضافه کنید:


import React from 'react';
import './App.css';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    < div className="App" >
      < HelloWorld / >
    < / div >
  );
}

export default App;

سپس به فایل src/App.js بروید و کد زیر را وارد کنید:


import React from 'react';
import './App.css';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    < div className="App" >
      < HelloWorld / >
    < / div >
  );
}

export default App;

نمایش کامپوننت در مرورگر

حالا که کامپوننت HelloWorld را ایجاد کرده‌ایم، می‌خواهیم آن را در مرورگر نمایش دهیم. می‌توانیم این کار را با وارد کردن کامپوننت App به src/index.js انجام دهیم. به فایل src/index.js بروید و کد زیر را وارد کنید:


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

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

پس از انجام این تغییرات، به مرورگر خود بروید و آدرس http://localhost:3000 را باز کنید. شما باید پیام "Hello, World!" را در صفحه خود ببینید.

تبریک! شما یک پروژه React ساده ایجاد کرده‌اید و یک کامپوننت اضافه کرده‌اید. این اولین گام بزرگ شما در توسعه با React است. در مقالات بعدی، به مفاهیم و عملکرد عمیق‌تر React خواهیم پرداخت.

پرسش و پاسخ

نظری یافت نشد

اطلاعات

0 رای

پرسش ها

درباره محراب

محراب حسن زاده

تیم ما در تلاش است تا مکانی برای ارائه بهترین آموزش های زبان برنامه نویسی جهت یادگیری شما دوستان عزیز ایجاد کند تا بتوانیم در این عرصه خدمتی به دنیای تکنولوژی و ترویج علم و دانش کرده باشیم