Home-theater-designers
React هي مكتبة JavaScript معروفة يمكنك استخدامها لإنشاء واجهات مستخدم لتطبيقات الويب المتنوعة. React قابل للتكيف ويمكنك دمجه مع تقنيات أخرى لإنشاء تطبيقات أكثر قوة وفعالية.
تعرف على كيفية دمج React مع تقنيات مختلفة وستحصل على فوائد من مصادر متعددة.
الكمبيوتر المحمول لن يتعرف على القرص الصلب الخارجياجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى
1. رد فعل + إعادة
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 يسمى بيت . يقوم Next.js بإنشاء صفحة HTML ثابتة بمحتوى هذا المكون عند عرضها على الخادم. عندما تتلقى الصفحة زيارة من العميل ، سيرسل HTML إلى العميل ويرطب المكون ، مما يمكنه من العمل كمكون React ديناميكي.
3. جلب البيانات باستخدام GraphQL
GraphQL هي لغة استعلام لواجهات برمجة التطبيقات تقدم بديلاً كفؤًا وقويًا وقابلًا للتكيف لـ 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 وظيفة من @ أبولو / العميل مكتبة لجلب المتهدمة من العملاء من واجهة برمجة GraphQL. ثم يتم عرض قائمة المستخدمين في واجهة المستخدم.
4. التصميم مع CSS-in-JS
CSS-in-JS هي طريقة تعتمد على JavaScript لتصميم مكونات 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;
هذا المثال ينشئ ملف زر على غرار المكون باستخدام على غرار وظيفة. وهي تحدد نغمة تجربة الزر ونغمة النص والتوسيد واكتساح الخط وبُعد النص والمؤشر.
يتم أيضًا تحديد حالة التمرير التي تغير لون الخلفية عندما يحوم المستخدم فوق الزر. يتم عرض الزر أخيرًا باستخدام مكون React.
5. التكامل مع D3 لتصور البيانات
D3 هي مكتبة JavaScript لمعالجة البيانات والتصور. يمكنك عمل تصورات قوية وتفاعلية للبيانات باستخدام 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;
يحدد هذا الرمز أ شريط الرسم البياني المكون الذي يقبل أ بيانات دعم في مقتطف الشفرة السابق. يستدعي ال استخدم ربط للإشارة إلى مكون 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;
في هذا المثال ، تقوم بتعريف ملف غرفة الدردشة المكون الذي يستخدم socket.io- العميل مكتبة للاتصال بخادم WebSocket. يمكنك استخدام ال useState ربط للتعامل مع المتهدمة من الرسائل واحترام المعلومات.
عند تلقي رسالة جديدة ، فإن useEffect الخطاف يسجل المستمع لتشغيل تحديث حدث الرسالة في قائمة الرسائل. لمسح وإرسال قيمة إدخال لرسالة الحدث ، يوجد ملف مقبض وظيفة.
بعد ذلك ، سيظهر على الشاشة النموذج الذي يحتوي على حقل وزر إدخال بالإضافة إلى قائمة الرسائل المحدثة.
مع كل إرسال نموذج ، يستدعي مقبض وظيفة لا مفر منها. لتسليم الرسالة إلى الخادم ، تستخدم هذه الطريقة مأخذ التوصيل.
7. التكامل مع React Native لتطوير الأجهزة المحمولة
React Local هو نظام لبناء تطبيقات عالمية محلية باستخدام React ، والتي تتصل لتعزيز التطبيقات المحمولة لمراحل iOS و Android.
باستخدام تكامل React Native مع React ، يمكنك استخدام التصميم المستند إلى المكونات ورمز React القابل لإعادة الاستخدام عبر الأنظمة الأساسية للجوّال والويب. هذا يقلل من دورات تطوير تطبيقات الهاتف المحمول والوقت اللازم للتسويق. يُعد React Native إطار عمل شائعًا لتطوير تطبيقات الأجهزة المحمولة الأصلية التي تستخدم مكتبة React.
إدخال البرمجة والمكتبات الحيوية ، مثل Node.js و استجابة CLI المحلية ، و Xcode أو بيئة تطوير أندرويد ، أمر أساسي للمصممين الذين يتعاملون مع iOS و Android بشكل منفصل. أخيرًا ، تتيح مكونات React Native البسيطة للمطورين إنشاء تطبيقات محمولة قوية وغنية بالميزات لمنصات iOS و Android.
ادمج React مع تقنيات أخرى
React هي مكتبة محبوبة وفعالة لبناء تطبيقات على الإنترنت. يُعد React خيارًا رائعًا لإنشاء واجهات مستخدم ، ولكنه يُستخدم أيضًا مع تقنيات أخرى لزيادة قدراته.
من خلال دمج React مع هذه التقنيات ، يمكن للمطورين إنشاء تطبيقات أكثر تعقيدًا وتقدماً توفر تجربة مستخدم أفضل. يغطي React ونظامه البيئي للأدوات والمكتبات كل ما هو ضروري لإنشاء موقع ويب أساسي أو تطبيق ويب معقد.