Beyond React: 7 דרכים לשילוב React עם טכנולוגיות אחרות

קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

React היא ספריית JavaScript ידועה שבה אתה יכול להשתמש כדי ליצור ממשקי משתמש עבור יישומי אינטרנט מגוונים. 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 ו השתמש בשיגור ווים כדי לקבל את הספירה השוטפת ולשלוח את הפעילויות בנפרד.

לבסוף, כדי להנגיש את החנות לכל האפליקציה, עטפו את רכיב הדלפק ברכיב הספק.

כיצד לשפר גרפיקה במחשב נייד

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 היא שפת שאילתה עבור ממשקי 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. לאחר מכן, רשימת המשתמשים מוצגת בממשק המשתמש.

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;

קוד זה מגדיר את א טבלת עמודות רכיב המקבל א נתונים prop בקטע הקוד הקודם. זה קורא ל useRef hook כדי ליצור הפניה לרכיב SVG שישתמש בו כדי לצייר את המתאר.

לאחר מכן, הוא מציג את הפסים של התרשים ומגדיר את קנה המידה עם ה- הוק של useEffect(). , הממפה את ערכי הנתונים לקואורדינטות של המסך.

האם כדאי לקנות PS4 בשנת 2020

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-client ספריה כדי להתחבר לשרת WebSocket. אתה יכול להשתמש ב useState וו להתמודד עם התקציר של הודעות והערכה למידע.

עם קבלת הודעה חדשה, ה useEffect hook רושם מאזין כדי להפעיל עדכון אירוע הודעה לרשימת ההודעות. כדי לנקות ולשלוח ערך קלט עבור הודעת האירוע, קיים א handleSubmit פוּנקצִיָה.

לאחר מכן, הן הטופס עם שדה וכפתור קלט, כמו גם רשימת ההודעות המעודכנת יופיעו על המסך.

עם כל הגשת טופס, קורא ל handleSubmit הפונקציה היא בלתי נמנעת. כדי להעביר את ההודעה לשרת, שיטה זו עושה שימוש בשקע.

7. שילוב עם React Native לפיתוח נייד

React Local היא מערכת לבניית אפליקציות אוניברסליות מקומיות באמצעות React, המתחברות לקידום אפליקציות ניידות לשלבי iOS ואנדרואיד.

באמצעות השילוב של React Native עם React, אתה יכול להשתמש בעיצוב מבוסס רכיבים ובקוד לשימוש חוזר של React על פני פלטפורמות ניידות ואינטרנט. זה מקטין את מחזורי הפיתוח של האפליקציה לנייד ואת זמן היציאה לשוק. React Native היא מסגרת פופולרית לפיתוח אפליקציות מקוריות לנייד שעושה שימוש בספריית React.

הצגת תכנות וספריות חיוניות, כמו Node.js , השב ל-CLI מקומי , ו Xcode אוֹ אנדרואיד סטודיו , הוא בסיסי עבור מעצבים העוסקים ב-iOS וב-Android בנפרד. לבסוף, רכיבים פשוטים של React Native מאפשרים למפתחים ליצור יישומים ניידים חזקים ועתירי תכונות עבור פלטפורמות iOS ואנדרואיד.

כיצד אוכל לגבות את הסימניות שלי בכרום

שלב את React עם טכנולוגיות אחרות

React היא ספרייה אהובה ויעילה לבניית אפליקציות מקוונות. React היא אפשרות מצוינת ליצירת ממשקי משתמש, אך היא משמשת גם עם טכנולוגיות אחרות כדי להגדיל את היכולות שלה.

על ידי שילוב של React עם טכנולוגיות אלו, מפתחים יכולים ליצור אפליקציות מורכבות ומתקדמות יותר המציעות חווית משתמש טובה יותר. React והמערכת האקולוגית של הכלים והספריות שלה מכסים את כל הדרוש ליצירת אתר אינטרנט בסיסי או יישום אינטרנט מורכב.