آموزش ایجاد یک پروژه ساده 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;

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

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

export default App;

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')
);