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

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

1. React + Redux

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

להלן המחשה כיצד להשתמש ב- Redux עם React:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { createStore } מ'redux';
יְבוּא { ספק } מ'react-redux';
const initialState = { לספור: 0 };
פוּנקצִיָהמפחית(state = initialState, פעולה) {
החלף (סוג פעולה) {
מקרה'תוֹסֶפֶת':
לַחֲזוֹר { לספור: state.count + 1 };
מקרה'ירידה':
לַחֲזוֹר { לספור: state.count - 1 };
בְּרִירַת מֶחדָל:
לַחֲזוֹר מדינה;
 }
}
constיְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { useQuery, gql } מ'@apollo/client';
const GET_USERS = gql





instagram viewer

`
 שאילתה GetUsers {
 משתמשים {
 תְעוּדַת זֶהוּת
 שֵׁם
 }
 }
;
פוּנקצִיָהמשתמשים() {
const { loading, error, data } = useQuery (GET_USERS);
אם (טוען) לַחֲזוֹר<ע>טוען...ע>;
אם (שְׁגִיאָה) לַחֲזוֹר<ע>שגיאה :(ע>;
לַחֲזוֹר (
store = createStore (מפחית);
פוּנקצִיָהדֶלְפֵּק() {
const count = useSelector(מדינה => state.count);
const dispatch = useDispatch();
לַחֲזוֹר (


ספירה: {count}</p>
 לְשַׁגֵר({ סוּג: 'תוֹסֶפֶת' })}>+</button>
 לְשַׁגֵר({ סוּג: 'ירידה' })}>-</button>
 </div>
 );
}
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


 </Provider>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

דוגמה זו יוצרת חנות Redux עם מצב התחלתי של 0. לאחר מכן פונקציית מפחית מטפלת ב תוֹסֶפֶת ו ירידה פעולות. הקוד משתמש ב- useSelector ו השתמש בשיגור ווים כדי לקבל את הספירה השוטפת ולשלוח את הפעילויות בנפרד.

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

2. עיבוד בצד השרת עם Next.js

Next.js היא מסגרת פיתוח המייעלת את מהירות האתר ו SEO טקטיקות על ידי העברת HTML ללקוחות ושימוש עיבוד בצד השרת של רכיבי React.

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

// pages/index.js
יְבוּא לְהָגִיב מ'לְהָגִיב';
פוּנקצִיָהבית() {
לַחֲזוֹר (


שלום, עולם!</h1>


זהו רכיב React המעובד על ידי שרת.</p>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל בית;

במודל זה, אתה מאפיין רכיב React שנקרא בית. Next.js יוצר דף HTML סטטי עם התוכן של רכיב זה כאשר הוא מעבד אותו בשרת. כאשר הדף יקבל ביקור מהלקוח, הוא ישלח את ה-HTML ללקוח ויטנן את הרכיב, מה שיאפשר לו לתפקד כרכיב React דינמי.

3. שליפת נתונים עם GraphQL

GraphQL היא שפת שאילתה עבור ממשקי API המציעה אלטרנטיבה מיומנת, חזקה וניתנת להתאמה ל-REST. עם GraphQL, אתה יכול לקבל נתונים מהר יותר ולעדכן את ממשק המשתמש מהר יותר.

זוהי המחשה של הדרך להשתמש ב-GraphQL עם React:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { useQuery, gql } מ'@apollo/client';
const GET_USERS = gql`
 שאילתה GetUsers {
 משתמשים {
 תְעוּדַת זֶהוּת
 שֵׁם
 }
 }
;
פוּנקצִיָהמשתמשים() {
const { loading, error, data } = useQuery (GET_USERS);
אם (טוען) לַחֲזוֹר<ע>טוען...ע>;
אם (שְׁגִיאָה) לַחֲזוֹר<ע>שגיאה :(ע>;
לַחֲזוֹר (


 {data.users.map(מִשׁתַמֵשׁ => (
{user.name}</li>
 ))}
 </ul>
 );
}
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


משתמשים</h1>

 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

מודל זה קורא את useQuery פונקציה מה @apollo/client ספרייה כדי להביא את הסקירה של לקוחות מממשק התכנות GraphQL. לאחר מכן, רשימת המשתמשים מוצגת בממשק המשתמש.

4. סטיילינג עם CSS-in-JS

CSS-in-JS היא שיטה מבוססת JavaScript לעיצוב רכיבי React. זה מקל על ניהול גיליונות סגנונות מורכבים ומאפשר לך לכתוב סגנונות בסגנון מודולרי ומבוסס רכיבים.

להלן המחשה כיצד להשתמש ב-CSS-in-JS עם React:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא מְנוּסָח מ'רכיבים מעוצבים';
const כפתור = styled.button`
 צבע רקע: #007bff;
 צבע: #fff;
 ריפוד: 10פיקסלים 20px;
 רדיוס הגבול: 5px;
 גודל גופן: 16px;
 סמן: מצביע;
 &:hover {
 צבע רקע: #0069d9;
 }
;
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


לחץ עליי!</Button>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

דוגמה זו יוצרת א כפתור מעוצב רכיב באמצעות מְנוּסָח פוּנקצִיָה. הוא מגדיר את גוון החוויה של הכפתור, גוון הטקסט, הריפוד, ריפוד השורות, ממד הטקסט והסמן.

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

5. שילוב עם D3 להדמיית נתונים

D3 היא ספריית JavaScript למניפולציה והדמיה של נתונים. אתה יכול ליצור הדמיות נתונים עוצמתיות ואינטראקטיביות באמצעות React. המחשה של אופן השימוש ב-D3 עם React היא כדלקמן:

יְבוּא תגובה, { useRef, useEffect } מ'לְהָגִיב';
יְבוּא * כפי ש ד3 מ'd3';
פוּנקצִיָהטבלת עמודות({ נתונים }) {
const ref = useRef();
 useEffect(() => {
const svg = d3.select (ref.current);
const width = svg.attr('רוֹחַב');
const גובה = svg.attr('גוֹבַה');
const x = d3.scaleBand()
 .domain (data.map((ד) => d.label))
 .טווח([0, רוחב])
 .padding(0.5);
const y = d3.scaleLinear()
 .תְחוּם([0, d3.max (נתונים, (d) => d.value)])
 ‎.range([height, 0]);
 svg.selectAll('נכון')
 ‎.data (נתונים)
 .להיכנס()
 .לְצַרֵף('נכון')
 .attr('איקס', (ד) => x (d.label))
 .attr('י', (ד) => y (d.value))
 .attr('רוֹחַב', x.bandwidth())
 .attr('גוֹבַה', (ד) => גובה - y (d.value))
 .attr('למלא', '#007bff');
 }, [נתונים]);
לַחֲזוֹר (
400}>
 {/* צירים הולכים לכאן */}
 </svg>
 );
}
יְצוּאבְּרִירַת מֶחדָל טבלת עמודות;

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

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

6. הוספת פונקציונליות בזמן אמת עם WebSockets

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

אתה משתמש ב-WebSockets בצורה הבאה עם React:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא io מ'socket.io-client';
פוּנקצִיָהחדר צ'אט() {
const [messages, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
const שקע = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('הוֹדָעָה', (הודעה) => {
 setMessages([...הודעות, הודעה]);
 });
 }, [הודעות, שקע]);
const handleSubmit = (ה) => {
 e.preventDefault();
 socket.emit('הוֹדָעָה', inputValue);
 setInputValue('');
 };
לַחֲזוֹר (




 {messages.map((הודעה, אני) => (
{הודעה}</li>
 ))}
 </ul>


 סוג="טֶקסט"
 value={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"שלח">שלח</button>
 </form>
 </div>
 );
}
יְצוּאבְּרִירַת מֶחדָל חדר צ'אט;

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