ادغام API های REST در React: یک راهنمای جامع

Summarize this content to 400 words in Persian Lang
در حوزه توسعه وب، ادغام داده های خارجی در برنامه های React شما یک کار رایج و حیاتی است. REST API (رابط برنامه نویسی برنامه انتقال وضعیت نمایندگی) یک راه استاندارد برای تعامل با داده های سمت سرور ارائه می دهد. در این راهنمای گام به گام، نحوه استفاده یکپارچه از API های REST در برنامه های React خود را بررسی خواهیم کرد و به شما امکان می دهد تا تجربه های وب پویا و مبتنی بر داده بسازید.

مرحله 1: راه اندازی React Application

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

Node.js و npm را نصب کنید

قبل از ایجاد یک برنامه React، مطمئن شوید که Node.js و npm (Node Package Manager) را روی دستگاه خود نصب کرده اید. می توانید آنها را از وب سایت رسمی Node.js دانلود و نصب کنید.

برنامه Create React را نصب کنید

ترمینال یا خط فرمان خود را باز کنید و دستور زیر را برای نصب Create React App به صورت سراسری اجرا کنید:

npm install -g create-react-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک React App جدید ایجاد کنید

پس از نصب، از Create React App برای شروع یک پروژه جدید استفاده کنید. «my-react-app» را با نام پروژه دلخواه خود جایگزین کنید:

npx create-react-app my-react-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به فهرست پروژه خود بروید

به دایرکتوری پروژه جدید ایجاد شده بروید:

cd my-react-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرور توسعه را راه اندازی کنید

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

npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

کاوش در ساختار پروژه

به ساختار پروژه ایجاد شده توسط Create React App نگاهی بیندازید. دایرکتوری های کلیدی عبارتند از:

src: حاوی کد منبع برنامه شما است.

public: دارایی های عمومی مانند فایل ها و تصاویر HTML را نگه می دارد.

node_modules: شامل تمام وابستگی های مورد نیاز برای پروژه شما می باشد.

مرحله 2: ایجاد اولین کامپوننت

حرکت به src دایرکتوری را باز کنید App.js فایل برای ایجاد اولین مؤلفه React خود، محتوای فایل را تغییر دهید:

// src/App.js
import React from ‘react’;

function App() {
return (
<div>
<h1>Welcome to My React Apph1>
div>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: مصرف API های REST در React

برای استفاده از REST API در برنامه React خود، می توانید از داخلی استفاده کنید fetch تابع یا یک کتابخانه محبوب مانند Axios. در این مثال، نحوه استفاده از آن را نشان خواهیم داد fetch تابعی برای درخواست GET به یک REST API.

بیایید یک کامپوننت جدید به نام ایجاد کنیم DataFetcher در src دایرکتوری:

// src/DataFetcher.js
import React, { useState, useEffect } from ‘react’;

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

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(‘https://api.example.com/data’);
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
setError(‘Error fetching data: ‘ + error.message);
} finally {
setLoading(false);
}
};

fetchData();
}, []);

if (loading) {
return <div>Loading…div>;
}

if (error) {
return <div>{error}div>;
}

return (
<div>
<h2>Fetched Datah2>
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}li>
))}
ul>
div>
);
};

export default DataFetcher;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: استفاده از مؤلفه DataFetcher

حالا که ما خودمان را داریم DataFetcher کامپوننت آماده است، باید آن را در اصلی خود بگنجانیم App جزء اصلاح کنید App.js به شرح زیر:

// src/App.js
import React from ‘react’;
import DataFetcher from ‘./DataFetcher’;

function App() {
return (
<div>
<h1>Welcome to My React Apph1>
<DataFetcher />
div>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5: رسیدگی به خطاها و وضعیت های بارگیری

در مثال قبلی، ما قبلاً حالت‌های مدیریت خطا و بارگذاری اولیه را گنجانده‌ایم. با این حال، مهم است که اطمینان حاصل شود که کاربران در طول عملیات واکشی داده ها بازخورد معنی داری دریافت می کنند. در اینجا نحوه مدیریت این حالت ها آمده است:

حالت بارگیری: نمایش یک پیام در حال بارگیری در حین واکشی داده ها.

حالت خطا: در صورت وجود مشکل در واکشی داده ها، بازخورد ارائه دهید.

وضعیت موفقیت: داده های واکشی شده را پس از بازیابی موفقیت آمیز ارائه دهید.

مرحله 6: افزایش تجربه کاربر با CSS

برای بهبود تجربه کاربری، می توانید چند سبک CSS اساسی اضافه کنید. یک فایل CSS جدید با نام ایجاد کنید App.css در src دایرکتوری:

/* src/App.css */
body {
font-family: Arial, sans-serif;
}

h1 {
color: #333;
}

ul {
list-style-type: none;
}

li {
background-color: #f9f9f9;
margin: 5px;
padding: 10px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس این فایل CSS را در خود وارد کنید App.js:

// src/App.js
import ‘./App.css’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

در این راهنمای جامع، نحوه ادغام یکپارچه API های REST در برنامه های React خود را بررسی کرده ایم. با دنبال کردن این مراحل، می‌توانید داده‌ها را از APIهای خارجی واکشی کنید، آن‌ها را در مؤلفه‌های خود نمایش دهید و وضعیت‌های بارگذاری و خطاها را به طور مؤثر مدیریت کنید.

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

کد نویسی مبارک!

نقل قول ها:[1] https://www.freecodecamp.org/news/how-work-with-restful-apis-in-react-simplified-steps-and-practical-examples/

npm install -g create-react-app

npx create-react-app my-react-app

cd my-react-app

npm start

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

function App() {
  return (
    <div>
      <h1>Welcome to My React Apph1>
    div>
  );
}

export default App;

// src/DataFetcher.js
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError('Error fetching data: ' + error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...div>;
  }

  if (error) {
    return <div>{error}div>;
  }

  return (
    <div>
      <h2>Fetched Datah2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}li>
        ))}
      ul>
    div>
  );
};

export default DataFetcher;

// src/App.js
import React from 'react';
import DataFetcher from './DataFetcher';

function App() {
  return (
    <div>
      <h1>Welcome to My React Apph1>
      <DataFetcher />
    div>
  );
}

export default App;

/* src/App.css */
body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
}

li {
  background-color: #f9f9f9;
  margin: 5px;
  padding: 10px;
}

// src/App.js
import './App.css';