آموزش جامع React.js برای ساخت اپلیکیشن های تک صفحه ای (SPA)

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

فصل اول: مقدمه ای بر React.js

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

مزایای استفاده از React.js

• کامپوننت های قابل استفاده مجدد
• Virtual DOM برای بهبود عملکرد
• یادگیری آسان
• جامعه بزرگ و فعال
• ادغام آسان با سایر کتابخانه ها و فریم ورک ها

نصب و راه اندازی React.js

برای شروع کار با React.js، به Node.js و npm (Node Package Manager) نیاز دارید. پس از نصب این پیش نیازها، می توانید از Create React App برای ایجاد یک پروژه React جدید استفاده کنید. Create React App یک ابزار خط فرمان است که تمام تنظیمات لازم برای شروع توسعه یک برنامه React را انجام می دهد.

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

فصل دوم: کامپوننت ها در React.js

کامپوننت ها، قلب تپنده React.js هستند. هر کامپوننت یک قطعه مستقل از رابط کاربری است که می تواند شامل HTML، CSS و جاوااسکریپت باشد. React از دو نوع کامپوننت پشتیبانی می کند: کامپوننت های کلاس و کامپوننت های تابعی.

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

کامپوننت های کلاس، کامپوننت هایی هستند که با استفاده از کلاس های ES6 تعریف می شوند. این کامپوننت ها دارای state و lifecycle methods هستند که به شما امکان می دهند رفتار کامپوننت را کنترل کنید.

import React from 'react';

class MyComponent extends React.Component {
  render() {
  return (
  <div>
  <h1>Hello, World!</h1>
  </div>
  );
  }
}

export default MyComponent;

کامپوننت های تابعی

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

import React from 'react';

function MyComponent() {
  return (
  <div>
  <h1>Hello, World!</h1>
  </div>
  );
}

export default MyComponent;

فصل سوم: State و Props

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

State

State یک شی جاوااسکریپت است که داده های داخلی یک کامپوننت را ذخیره می کند. وقتی state یک کامپوننت تغییر می کند، React به طور خودکار رابط کاربری را دوباره رندر می کند.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
  count: 0
  };
  }

  render() {
  return (
  <div>
  <h1>Count: {this.state.count}</h1>
  <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
  </div>
  );
  }
}

export default MyComponent;

Props

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

import React from 'react';

function MyComponent(props) {
  return (
  <div>
  <h1>Hello, {props.name}!</h1>
  </div>
  );
}

export default MyComponent;

فصل چهارم: مدیریت رویدادها

React به شما امکان می دهد به رویدادهای مختلف HTML مانند کلیک، تغییر و ارسال فرم پاسخ دهید. برای مدیریت رویدادها، می توانید از attribute های رویداد در عناصر HTML استفاده کنید.

import React from 'react';

class MyComponent extends React.Component {
  handleClick() {
  alert('Button clicked!');
  }

  render() {
  return (
  <div>
  <button onClick={this.handleClick}>Click me</button>
  </div>
  );
  }
}

export default MyComponent;

فصل پنجم: لیست ها و کلیدها

برای نمایش لیست ها در React، باید از متد `map` برای تبدیل آرایه داده ها به آرایه ای از عناصر JSX استفاده کنید. همچنین، برای هر عنصر در لیست، باید یک کلید منحصر به فرد ارائه دهید. کلیدها به React کمک می کنند تا عناصر لیست را به طور کارآمد به روزرسانی کند.

import React from 'react';

function MyComponent() {
  const items = ['Apple', 'Banana', 'Orange'];

  return (
  <ul>
  {items.map((item, index) => (
  <li key={index}>{item}</li>
  ))}
  </ul>
  );
}

export default MyComponent;

فصل ششم: فرم ها

React به شما امکان می دهد فرم های پیچیده با کنترل دقیق بر روی ورودی کاربر ایجاد کنید. برای مدیریت فرم ها در React، معمولاً از state برای ذخیره مقادیر ورودی استفاده می شود و رویداد `onChange` برای به روزرسانی state در هنگام تغییر ورودی استفاده می شود.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
  name: ''
  };
  }

  handleChange(event) {
  this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
  alert('Name submitted: ' + this.state.name);
  event.preventDefault();
  }

  render() {
  return (
  <form onSubmit={this.handleSubmit.bind(this)}>
  <label>
  Name:
  <input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} />
  </label>
  <input type="submit" value="Submit" />
  </form>
  );
  }
}

export default MyComponent;

فصل هفتم: Routing در React.js

برای ایجاد اپلیکیشن های تک صفحه ای (SPA) با React.js، به یک کتابخانه routing نیاز دارید. React Router DOM یکی از محبوب ترین کتابخانه های routing برای React است. با استفاده از React Router DOM، می توانید مسیرهای مختلف را تعریف کنید و کامپوننت های مختلف را بر اساس URL نمایش دهید.

ابتدا React Router DOM را نصب کنید:

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
  <Router>
  <div>
  <nav>
  <ul>
  <li>
  <Link to="/">Home</Link>
  </li>
  <li>
  <Link to="/about">About</Link>
  </li>
  </ul>
  </nav>

  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  </div>
  </Router>
  );
}

export default App;

فصل هشتم: درخواست های HTTP (API)

برای تعامل با API ها و دریافت داده ها از سرور، می توانید از کتابخانه `fetch` یا `axios` استفاده کنید. این کتابخانه ها به شما امکان می دهند درخواست های HTTP مانند GET، POST، PUT و DELETE را به سرور ارسال کنید.

ابتدا `axios` را نصب کنید:

npm install axios

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
  axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
  setData(response.data);
  })
  .catch(error => {
  setError(error);
  })
  .finally(() => {
  setLoading(false);
  });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>No data</div>;

  return (
  <div>
  <h1>{data.title}</h1>
  <p>Completed: {data.completed ? 'Yes' : 'No'}</p>
  </div>
  );
}

export default App;

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

به دنبال یک تیم حرفه ای برای توسعه اپلیکیشن های React.js هستید؟

با ما تماس بگیرید تا بهترین راهکارها را برای کسب و کار شما ارائه دهیم:

09190994063 - 09376846692