آموزش ساده React: ساخت سایت های مدرن و جذاب

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

چرا React؟

React به دلایل زیر انتخاب بسیار خوبی برای ساخت وبسایت های مدرن است:

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

شروع کار با React

برای شروع کار با React، به Node.js و npm (یا yarn) نیاز دارید. اگر Node.js را نصب ندارید، می توانید آن را از وبسایت رسمی Node.js دانلود و نصب کنید.

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

برای ایجاد یک پروژه جدید React، می توانید از Create React App استفاده کنید. Create React App یک ابزار قدرتمند است که به شما کمک می کند یک پروژه React را به سرعت و به سادگی ایجاد کنید.

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

 npx create-react-app my-app
 cd my-app
 npm start
 

این دستور یک پروژه جدید با نام `my-app` ایجاد می کند، به دایرکتوری پروژه می رود و سرور توسعه را اجرا می کند. پس از اجرای این دستور، وبسایت شما در مرورگر به آدرس `http://localhost:3000` باز می شود.

ساختار پروژه React

پروژه ای که با Create React App ایجاد کرده اید، ساختار زیر را دارد:

• `node_modules/`: این دایرکتوری شامل تمام وابستگی های پروژه شما است.
• `public/`: این دایرکتوری شامل فایل های استاتیک مانند `index.html` است.
• `src/`: این دایرکتوری شامل کد منبع پروژه شما است.
• `package.json`: این فایل شامل اطلاعات مربوط به پروژه شما و وابستگی های آن است.

کامپوننت ها در React

در React، رابط کاربری از کامپوننت ها تشکیل شده است. هر کامپوننت یک بخش مستقل از رابط کاربری است که می تواند منطق و ظاهر خود را داشته باشد.

برای مثال، یک کامپوننت می تواند یک دکمه، یک فرم، یا یک لیست از آیتم ها باشد.

در دایرکتوری `src/`، فایل `App.js` را باز کنید. این فایل کامپوننت اصلی پروژه شما است.

محتوای این فایل را به صورت زیر تغییر دهید:

 import React from 'react';
 

 function App() {
  return (
  
  
سلام دنیا!
  
این یک کامپوننت React است.
  
  );
 }
 

 export default App;
 

این کد یک کامپوننت جدید با نام `App` ایجاد می کند که یک عنوان و یک پاراگراف را نمایش می دهد.

JSX

JSX یک افزونه نحوی برای جاوااسکریپت است که به شما اجازه می دهد HTML را در جاوااسکریپت بنویسید. JSX کد شما را خواناتر و قابل فهم تر می کند.

در مثال بالا، از JSX برای نوشتن HTML در کامپوننت `App` استفاده کرده ایم.

State و Props

State و Props دو مفهوم مهم در React هستند که برای مدیریت داده ها در کامپوننت ها استفاده می شوند.

State داده هایی هستند که توسط یک کامپوننت مدیریت می شوند و می توانند در طول زمان تغییر کنند.

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

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

یک کامپوننت جدید با نام `Counter` ایجاد کنید و کد زیر را در آن قرار دهید:

 import React, { useState } from 'react';
 

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

  return (
  
  
شمارنده: {count}
   setCount(count + 1)}>افزایش
  
  );
 }
 

 export default Counter;
 

این کامپوننت یک شمارنده ساده است که با کلیک بر روی دکمه "افزایش"، مقدار آن افزایش می یابد.

در این کامپوننت، از `useState` برای ایجاد یک state با نام `count` استفاده کرده ایم. `useState` یک hook است که به شما اجازه می دهد state را در کامپوننت های تابعی مدیریت کنید.

استفاده از Props

یک کامپوننت جدید با نام `Greeting` ایجاد کنید و کد زیر را در آن قرار دهید:

 import React from 'react';
 

 function Greeting(props) {
  return (
  
  
سلام، {props.name}!
  
  );
 }
 

 export default Greeting;
 

این کامپوننت یک نام را به عنوان prop دریافت می کند و یک پیام خوشامدگویی را نمایش می دهد.

برای استفاده از این کامپوننت در کامپوننت `App`، کد زیر را در فایل `App.js` قرار دهید:

 import React from 'react';
 import Greeting from './Greeting';
 

 function App() {
  return (
  
  
سلام دنیا!
  
  
  );
 }
 

 export default App;
 

در این کد، کامپوننت `Greeting` را با prop `name` برابر با "علی" فراخوانی کرده ایم.

رویدادها (Events)

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

برای مثال، می توانید یک تابع را به رویداد `onClick` یک دکمه متصل کنید تا وقتی کاربر روی دکمه کلیک می کند، آن تابع اجرا شود.

فرم ها (Forms)

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

استایل دهی (Styling)

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

• CSS Modules: CSS Modules به شما اجازه می دهند CSS را به صورت محلی در هر کامپوننت مدیریت کنید.
• Styled Components: Styled Components به شما اجازه می دهند CSS را در جاوااسکریپت بنویسید.
• Inline Styles: می توانید استایل ها را به صورت مستقیم در تگ های HTML اعمال کنید.

مسیر یابی (Routing)

برای ایجاد یک وبسایت چند صفحه ای با React، به یک کتابخانه مسیریابی نیاز دارید. React Router یکی از محبوب ترین کتابخانه های مسیریابی برای React است.

درخواست های HTTP

برای ارسال درخواست های HTTP به سرور، می توانید از کتابخانه هایی مانند `axios` یا `fetch` استفاده کنید.

مدیریت State با Redux

Redux یک کتابخانه مدیریت state است که به شما کمک می کند state را در برنامه های پیچیده React مدیریت کنید.

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

React چیست؟

React یک کتابخانه جاوااسکریپت برای ساخت رابط های کاربری است.

چرا باید از React استفاده کنم؟

React کامپوننت محور است، از Virtual DOM استفاده می کند، جامعه بزرگ و فعالی دارد، و از JSX پشتیبانی می کند.

چگونه می توانم React را یاد بگیرم؟

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

برای مشاوره در زمینه طراحی سایت و سئو با React و سایر تکنولوژی ها، با ما تماس بگیرید:

09190994063 - 09376846692