Beyond React: 7 روش برای ادغام React با سایر فناوری ها

یکی از نقاط قوت React این است که چگونه با دیگران خوب بازی می کند. برخی از بهترین ابزارها را برای ادغام با چارچوب کشف کنید.

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

یاد بگیرید که چگونه React را با فناوری های مختلف ادغام کنید و از چندین منبع سود خواهید برد.

1. React + Redux

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

در اینجا تصویری از نحوه استفاده از Redux با React آورده شده است:

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
 query GetUsers {
   users {
     id
     name
   }
 }
;
function Users() {
 const { loading, error, data } = useQuery(GET_USERS);
 if (loading) return <p>Loading...</p>;
 if (error) return <p>Error :(</p>;
 return (
store = createStore(reducer);
function Counter() {
 const count = useSelector(state => state.count);
 const dispatch = useDispatch();
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
     <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
   </div>
 );
}
function App() {
 return (
   <Provider store={store}>
     <Counter />
   </Provider>
 );
}
export default App;

این مثال یک ذخیره‌سازی Redux با حالت اولیه 0 ایجاد می‌کند. یک تابع کاهنده سپس عملیات افزایش و کاهش را مدیریت می‌کند. این کد از قلاب‌های useSelector و useDispatch برای دریافت تعداد مداوم و ارسال فعالیت‌ها به صورت جداگانه استفاده می‌کند.

در نهایت، برای دسترسی به فروشگاه برای کل برنامه، مولفه شمارنده را در جزء ارائه دهنده قرار دهید.

2. رندر سمت سرور با Next.js

Next.js یک چارچوب توسعه است که سرعت وب سایت و تاکتیک های سئو را با انتقال HTML به مشتریان و استفاده از رندر سمت سرور اجزای React بهینه می کند.

مجموعه ابزار قدرتمند آن در کنار React کار می کند و عملکرد استثنایی و رتبه بالایی در موتورهای جستجو ارائه می دهد.

// pages/index.js
import React from 'react';
function Home() {
 return (
   <div>
     <h1>Hello, World!</h1>
     <p>This is a server-rendered React component.</p>
   </div>
 );
}
export default Home;

در این مدل، یک جزء React به نام Home را مشخص می‌کنید. Next.js یک صفحه HTML ثابت با محتوای این مؤلفه زمانی که آن را بر روی سرور رندر می کند، می سازد. هنگامی که صفحه بازدیدی از مشتری دریافت می کند، HTML را برای مشتری ارسال می کند و مؤلفه را هیدراته می کند و آن را قادر می سازد به عنوان یک مؤلفه React پویا عمل کند.

3. واکشی داده ها با GraphQL

GraphQL یک زبان پرس و جو برای API ها است که جایگزینی ماهر، قوی و سازگار برای REST ارائه می دهد. با GraphQL، می توانید داده ها را سریعتر دریافت کنید و رابط کاربری را سریعتر به روز کنید.

این یک تصویر از روش استفاده از GraphQL با React است:

import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
 query GetUsers {
   users {
     id
     name
   }
 }
;
function Users() {
 const { loading, error, data } = useQuery(GET_USERS);
 if (loading) return <p>Loading...</p>;
 if (error) return <p>Error :(</p>;
 return (
   <ul>
     {data.users.map(user => (
       <li key={user.id}>{user.name}</li>
     ))}
   </ul>
 );
}
function App() {
 return (
   <div>
     <h1>Users</h1>
     <Users />
   </div>
 );
}
export default App;

این مدل تابع useQuery را از کتابخانه @apollo/client فراخوانی می کند تا خلاصه کلاینت ها را از رابط برنامه نویسی GraphQL بیاورد. سپس لیست کاربران در UI نمایش داده می شود.

4. یک ظاهر طراحی با CSS-in-JS

CSS-in-JS یک روش مبتنی بر جاوا اسکریپت برای استایل دادن به اجزای React است. مدیریت شیوه نامه های پیچیده را ساده تر می کند و به شما امکان می دهد استایل ها را به سبک مدولار و مبتنی بر مؤلفه بنویسید.

در اینجا تصویری از نحوه استفاده از CSS-in-JS با React آورده شده است:

import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
 background-color: #007bff;
 color: #fff;
 padding: 10px 20px;
 border-radius: 5px;
 font-size: 16px;
 cursor: pointer;
 &:hover {
   background-color: #0069d9;
 }
;
function App() {
 return (
   <div>
     <Button>Click me!</Button>
   </div>
 );
}
export default App;

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

حالت شناور که رنگ پس‌زمینه را زمانی که کاربر روی دکمه قرار می‌گیرد تغییر می‌دهد نیز تعریف می‌شود. این دکمه در نهایت با استفاده از یک جزء React ارائه می شود.

5. یکپارچه سازی با D3 برای تجسم داده ها

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

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
function BarChart({ data }) {
 const ref = useRef();
 useEffect(() => {
   const svg = d3.select(ref.current);
   const width = svg.attr('width');
   const height = svg.attr('height');
   const x = d3.scaleBand()
     .domain(data.map((d) => d.label))
     .range([0, width])
     .padding(0.5);
   const y = d3.scaleLinear()
     .domain([0, d3.max(data, (d) => d.value)])
     .range([height, 0]);
   svg.selectAll('rect')
     .data(data)
     .enter()
     .append('rect')
     .attr('x', (d) => x(d.label))
     .attr('y', (d) => y(d.value))
     .attr('width', x.bandwidth())
     .attr('height', (d) => height - y(d.value))
     .attr('fill', '#007bff');
 }, [data]);
 return (
   <svg ref={ref} width={400} height={400}>
     {/* axes go here */}
   </svg>
 );
}
export default BarChart;

این کد یک مؤلفه BarChart را تعریف می کند که در قطعه کد قبلی یک منبع داده را می پذیرد. قلاب useRef را فرا می خواند تا به مولفه SVG ارجاع دهد که از آن برای ترسیم طرح کلی استفاده می کند.

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

6. افزودن قابلیت بلادرنگ با WebSockets

پیاده سازی WebSockets یک راه دو طرفه کاملاً عملیاتی ایجاد می کند که ارتباط مستمر بین مشتری و سرور را امکان پذیر می کند. آن‌ها React را قادر می‌سازند تا سودمندی مداوم را به برنامه‌های کاربردی وب، به عنوان مثال، تابلوهای بحث، به‌روزرسانی‌های زنده و هشدارها اضافه کند.

شما از WebSockets به روش زیر با React استفاده می کنید:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
function ChatRoom() {
 const [messages, setMessages] = useState([]);
 const [inputValue, setInputValue] = useState('');
 const socket = io('http://localhost:3001');
 useEffect(() => {
   socket.on('message', (message) => {
     setMessages([...messages, message]);
   });
 }, [messages, socket]);
 const handleSubmit = (e) => {
   e.preventDefault();
   socket.emit('message', inputValue);
   setInputValue('');
 };
 return (
   <div>
     <ul>
       {messages.map((message, i) => (
         <li key={i}>{message}</li>
       ))}
     </ul>
     <form onSubmit={handleSubmit}>
       <input
         type="text"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
       <button type="submit">Send</button>
     </form>
   </div>
 );
}
export default ChatRoom;

در این مثال، یک جزء ChatRoom را تعریف می کنید که از کتابخانه socket.io-client برای اتصال به سرور WebSocket استفاده می کند. می توانید از قلاب useState برای مقابله با خلاصه پیام ها و احترام به اطلاعات استفاده کنید.

پس از دریافت یک پیام جدید، قلاب useEffect شنونده را ثبت می کند تا یک به روز رسانی رویداد پیام را در لیست پیام آغاز کند. برای پاک کردن و ارسال یک مقدار ورودی برای پیام رویداد، یک تابع handleSubmit وجود دارد.

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

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

7. ادغام با React Native برای توسعه موبایل

React Local سیستمی برای ساخت برنامه های جهانی محلی با استفاده از React است که برای ارتقای برنامه های قابل حمل برای مراحل iOS و Android به هم متصل می شوند.

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

معرفی برنامه نویسی و کتابخانه های حیاتی، مانند Node.js، Respond Local CLI، و Xcode یا Android Studio، برای طراحانی که به طور جداگانه با iOS و Android سروکار دارند، اساسی است. در نهایت، کامپوننت‌های ساده React Native، توسعه‌دهندگان را قادر می‌سازد تا برنامه‌های تلفن همراه قوی و غنی را برای پلتفرم‌های iOS و Android ایجاد کنند.

React را با سایر فناوری ها ترکیب کنید

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

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

منبع مقاله