آموزش React: ساخت سایت های ساده و قشنگ با کمترین دردسر

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

چرا React؟

• کامپوننت های قابل استفاده مجدد: React به شما اجازه می دهد تا المان های UI را به صورت کامپوننت های کوچک و مستقل تعریف کنید و در صورت نیاز آن ها را بارها استفاده کنید.
• عملکرد بالا: React از DOM مجازی استفاده می کند که باعث افزایش سرعت و بهبود عملکرد وب سایت می شود.
• جامعه بزرگ و فعال: React یک جامعه بزرگ و فعال از توسعه دهندگان دارد که منابع آموزشی و کتابخانه های زیادی را در اختیار شما قرار می دهند.
• یادگیری آسان: با وجود پیچیدگی هایی که ممکن است در ابتدا به نظر برسد، React به نسبت فریم ورک های دیگر، یادگیری آسان تری دارد.

پیش نیازها

قبل از شروع این آموزش، بهتر است با مفاهیم زیر آشنا باشید:

• HTML
• CSS
• JavaScript (ES6+)

مراحل شروع به کار با React

1. نصب Node.js و npm: React بر پایه Node.js و npm کار می کند. ابتدا آن ها را از وب سایت رسمی شان دانلود و نصب کنید.
2. ایجاد یک پروژه جدید با Create React App: Create React App یک ابزار خط فرمان است که به شما کمک می کند یک پروژه React جدید را به سرعت ایجاد کنید. با استفاده از دستور زیر، یک پروژه جدید ایجاد کنید:

   npx create-react-app my-app

3. اجرای پروژه: بعد از ایجاد پروژه، به دایرکتوری پروژه بروید و با استفاده از دستور زیر، پروژه را اجرا کنید:

   cd my-app
    npm start

4. آشنایی با ساختار پروژه: پوشه `src` شامل کد اصلی پروژه شماست. فایل `App.js` کامپوننت اصلی برنامه شماست.

مفاهیم کلیدی در React

کامپوننت ها

کامپوننت ها بلوک های سازنده رابط کاربری React هستند. هر کامپوننت یک قطعه کد مستقل است که مسئول نمایش بخشی از رابط کاربری است. کامپوننت ها می توانند به صورت تو در تو استفاده شوند و یک ساختار درختی را تشکیل دهند.

JSX

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

State و Props

State اطلاعاتی است که در داخل یک کامپوننت نگهداری می شود و می تواند تغییر کند. Props اطلاعاتی است که از کامپوننت والد به کامپوننت فرزند منتقل می شود و نباید توسط کامپوننت فرزند تغییر کند.

Lifecycle Methods

Lifecycle methods توابعی هستند که در طول عمر یک کامپوننت React فراخوانی می شوند. این توابع به شما اجازه می دهند تا در مراحل مختلف عمر کامپوننت، مانند زمانی که کامپوننت ایجاد می شود، زمانی که به روزرسانی می شود و زمانی که از DOM حذف می شود، کد خود را اجرا کنید.

مثال عملی: ساخت یک شمارنده ساده

بیایید یک مثال ساده از ساخت یک شمارنده با React را بررسی کنیم:

import React, { useState } from 'react';

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

  return (
  <div style={{ textAlign: 'center', padding: '20px' }}>
  <h1 style={{ fontSize: '2em', marginBottom: '10px' }}>Counter</h1>
  <p style={{ fontSize: '1.2em', marginBottom: '20px' }}>Count: {count}</p>
  <button style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#4CAF50', color: 'white', border: 'none', cursor: 'pointer', marginRight: '10px' }} onClick={() => setCount(count + 1)}>Increment</button>
  <button style={{ padding: '10px 20px', fontSize: '1em', backgroundColor: '#f44336', color: 'white', border: 'none', cursor: 'pointer' }} onClick={() => setCount(count - 1)}>Decrement</button>
  </div>
  );
 }

 export default Counter;
 

این کد یک کامپوننت Counter ایجاد می کند که یک state به نام count دارد. این state مقدار شمارنده را نگهداری می کند. دو دکمه وجود دارد که با کلیک بر روی آن ها، مقدار شمارنده افزایش یا کاهش می یابد.

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

در React، روش های مختلفی برای استایل دهی به کامپوننت ها وجود دارد:

• استایل دهی درون خطی (Inline Styles): می توانید استایل ها را به صورت مستقیم در داخل تگ های JSX اعمال کنید.
• استفاده از فایل های CSS: می توانید استایل ها را در فایل های CSS جداگانه تعریف کنید و آن ها را به کامپوننت های خود وارد کنید.
• استفاده از CSS-in-JS: می توانید از کتابخانه های CSS-in-JS مانند Styled Components یا Emotion برای تعریف استایل ها در داخل کد JavaScript استفاده کنید.

مدیریت State با Redux

برای مدیریت state در برنامه های بزرگ React، می توانید از Redux استفاده کنید. Redux یک کتابخانه مدیریت state است که به شما کمک می کند state را به صورت متمرکز مدیریت کنید و از پیچیدگی های مدیریت state در برنامه های بزرگ جلوگیری کنید.

روتینگ با React Router

برای ایجاد صفحات مختلف در برنامه React خود، می توانید از React Router استفاده کنید. React Router یک کتابخانه روتینگ است که به شما کمک می کند صفحات مختلف را تعریف کنید و بین آن ها مسیریابی کنید.

سوالات متداول (FAQ)

**نیاز به کمک برای سئو سایتتون دارید؟ با ما تماس بگیرید! 09190994063 - 09376846692**