شروع با React: اولین کامپوننتت رو بساز

گر الان داری تو دنیای برنامه‌نویسی فرانت‌اند (Frontend) گام بر میداری، حتما اسم React رو شنیدی. این کتابخونه قدرتمند جاوااسکریپتی حالا یه استاندارد شده تو ساخت وب‌اپلیکیشن‌های پویا و تعاملی. ولی ممکنه برات یه کمی ترسناک باشه و فکر کنی شروع کردنش سخته. ولی من الان میخوام بهت نشون بدم که شروع با React چقدر ساده و جذابه و چطور میتونی تو چند دقیقه اولین کامپوننتت رو بسازی.

React چیه؟

React یه کتابخونه جاوااسکریپتی هست که توسط فیسبوک ساخته شده و برای ساخت UI (رابط کاربری) وب استفاده میشه. یعنی وقتی یه سایت داره اطلاعات زیادی نمایش میده و کاربر باهاش تعامل داره، React کمک میکنه که این تعامل به خوبی مدیریت بشه و کد ما تمیز و قابل توسعه بمونه.

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

چرا React؟

• کامپوننت‌محور: تو React، هر چیزی یه کامپوننته — مثل یه دکمه، یه فرم، یه منو. این کار باعث میشه کد قابل استفاده مجدد و تمیز بمونه.
• سرعت بالا: React از Virtual DOM استفاده میکنه که فقط تغییرات لازم رو تو صفحه به‌روز میکنه، نه کل صفحه.
• جامعه بزرگ: چون React خیلی محبوبه، منابع زیادی وجود داره و همیشه میتونی کمک بگیری.
• استخدام: شرکت‌های زیادی از React استفاده میکنن و داشتن این مهارت تو رزومه خیلی کمک‌کننده ست.

چه چیزهایی باید بلد باشی قبل از شروع با React؟

قبل از اینکه بیای وارد دنیای React بشی، بهتره چندتا چیز پایه رو بلد باشی:

• جاوااسکریپت ES6+: چون React از آخرین ویژگی‌های جاوااسکریپت استفاده میکنه، مثل arrow function، destructuring، template literals و ...
• HTML و CSS: اینا پایه هر وب‌سایتی هستن و تو React هم همین‌ها رو استفاده میکنی.
• Node.js و NPM: اینها بهت کمک میکنن که محیط توسعه React رو راه‌اندازی کنی.

نصب React

اولین قدم برای کار با React، راه‌اندازی محیط توسعه هست. برای شروع سریع، میتونی از create-react-app استفاده کنی که یه ابزار رسمی برای ساخت پروژه‌های React هست.

# نصب create-react-app
npx create-react-app my-first-app

# وارد کردن پوشه پروژه
cd my-first-app

# اجرا کردن سرور توسعه
npm start

بعد از اجرای این دستورها، یه پروژه React کاملاً کاربردی روی مرورگرت باز میشه و میتونی شروع به کار کنی.

آشنایی با ساختار پروژه

وقتی یه پروژه React با create-react-app میسازی، یه ساختار پوشه‌ای خاصی داری. مهم‌ترین فایل‌ها:

• index.html: این فایل اصلی هست که React توی اون رندر میشه.
• index.js: این فایل نقطه شروع کد جاوااسکریپتی هست.
• App.js: کامپوننت اصلی پروژه که نمایش داده میشه.
• App.css: استایل عمومی پروژه.
• package.json: شامل تمام وابستگی‌ها و تنظیمات پروژه.

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

خب حالا که محیط رو راه انداختی، وقت اینه که اولین کامپوننتت رو بسازی. تو React، همه چیز یه کامپوننته. یه کامپوننت یه تابع هست که یه المان JSX (مثل HTML) برمی‌گردونه.

// MyComponent.js
import React from 'react';

function MyComponent() {
  return (
    

سلام دنیا!

این اولین کامپوننت من با React هست 🎉

); } export default MyComponent;

حالا این کامپوننت رو توی App.js فرامی‌خونیم و استفاده می‌کنیم:

// App.js
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    

); } export default App;

JSX چیه؟

تو کد بالا متوجه شدی که داریم از چیزی مثل HTML توی جاوااسکریپت استفاده میکنیم. به این سینتکس JSX میگن. JSX یه افزونه‌ای هست که بهمون اجازه میده که المان‌های HTML رو توی جاوااسکریپت بنویسیم و React اونا رو به‌درستی رندر میکنه.

const element = 

سلام دوست من!

;

نکته: JSX الزامی نیست. میشه بدونش هم کار کرد، ولی خیلی راحت‌تره که از JSX استفاده کنیم.

متغیرها و props در React

تو کامپوننت‌ها میتونی از متغیرها استفاده کنی و مقادیر مختلفی رو بهشون بدی. این کار با props انجام میشه. Props یعنی "properties"، یا همون ویژگی‌هایی که به کامپوننت می‌دیم.

// Greeting.js
function Greeting(props) {
  return 

سلام {props.name}!

; }

و تو کامپوننت والد:

خروجی:

سلام علی!
سلام سارا!

حالت (State) در React

حالت یه کامپوننت هست که میتونه تغییر کنه و باعث بشه صفحه دوباره رندر بشه. مثلاً یه دکمه که وقتی کلیک میکنی، تعدادش یکی اضافه میشه.

import React, { useState } from 'react';

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

  return (
    

نتیجه‌گیری

خب حالا که اولین کامپوننتت رو ساختی، متوجه شدی که React چقدر ساده و قدرتمنده. با کمی دانش پایه جاوااسکریپت و HTML/CSS، میتونی شروع کنی به ساخت رابط‌های تعاملی و حرفه‌ای. مهم اینه که نترسی و شروع کنی. هر کسی یه زمانی شروع کرده، حتی خیلی از حرفه‌ای‌ها هم الان دارن یاد میگیرن. پس همین الان یه پروژه جدید بساز و اولین کامپوننتت رو تست کن.

با تشکر از خوندنت! 😊 اگر دوست داشتی بیشتر یاد بگیری، منتظر مقاله بعدی "React Router و مدیریت مسیرها" باش!