Beyond React: 7 Paraan ng Pagsasama ng React sa Iba Pang Teknolohiya

Beyond React: 7 Paraan ng Pagsasama ng React sa Iba Pang Teknolohiya
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang React ay isang kilalang JavaScript library na magagamit mo upang gumawa ng mga UI para sa maraming nalalaman na web application. Ang React ay madaling ibagay at maaari mo itong pagsamahin sa iba pang mga teknolohiya upang makagawa ng mas mahusay at epektibong mga app.





Matutunan kung paano isama ang React sa iba't ibang teknolohiya at makakakuha ka ng mga benepisyo mula sa maraming source.



MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN

1. React + Redux

Ang Redux ay isang library ng pamamahala ng estado na ginagamit kasabay ng React. Pinapadali ng Redux ang sentralisadong pamamahala ng estado ng aplikasyon. Kapag gumagawa ng mga kumplikadong application na may maraming mga estado, gumagana nang maayos ang React at Redux nang magkasama.





Narito ang isang paglalarawan kung paano gamitin ang Redux sa 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;

Lumilikha ang halimbawang ito ng tindahan ng Redux na may paunang estado na 0 . Ang isang reducer function pagkatapos ay humahawak sa INCREMENT at DECREMENT mga operasyon. Ginagamit ng code ang useSelector at gamitin angDispatch hooks upang makuha ang patuloy na pagbibilang at ipadala ang mga aktibidad nang paisa-isa.



Panghuli, para gawing accessible ang store sa buong application, balutin ang counter component sa bahagi ng provider.

2. Pag-render sa Gilid ng Server Gamit ang Next.js

Ang Next.js ay isang development framework na nag-o-optimize ng bilis ng website at ITO mga taktika sa pamamagitan ng pagpapadala ng HTML sa mga kliyente at paggamit pag-render sa gilid ng server ng mga bahagi ng React .



Gumagana ang makapangyarihang toolset nito kasama ng React, na nagbibigay ng pambihirang pagganap at mataas na ranggo sa search engine.

 // 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;

Sa modelong ito, nailalarawan mo ang isang bahagi ng React na tinatawag Bahay . Ang Next.js ay gumagawa ng static na HTML page na may nilalaman ng component na ito kapag na-render ito sa server. Kapag nakatanggap ang page ng pagbisita mula sa client, ipapadala nito ang HTML sa client at i-hydrate ang component, na magpapagana dito na gumana bilang isang dynamic na React component.



3. Pagkuha ng Data Gamit ang GraphQL

Ang GraphQL ay isang wika ng query para sa mga API na nag-aalok ng isang mahusay, malakas, at madaling ibagay na alternatibo sa REST. Sa GraphQL, maaari kang makakuha ng data nang mas mabilis at mas mabilis na mai-update ang user interface.

Ito ay isang paglalarawan ng paraan ng paggamit ng GraphQL sa 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;

Tinatawag ng modelong ito ang useQuery function mula sa @apollo/kliyente library upang dalhin ang rundown ng mga kliyente mula sa interface ng GraphQL Programming. Ang listahan ng user ay ipapakita sa UI.

4. Pag-istilo Gamit ang CSS-in-JS

Ang CSS-in-JS ay isang JavaScript-based na pamamaraan para sa pag-istilo ng mga bahagi ng React. Ginagawa nitong mas simple ang pamamahala ng mga kumplikadong stylesheet at hinahayaan kang magsulat ng mga istilo sa isang modular at nakabatay sa sangkap na istilo.

Narito ang isang paglalarawan kung paano gamitin ang CSS-in-JS sa 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;

Ang halimbawang ito ay lumilikha ng isang naka-istilong pindutan sangkap gamit ang naka-istilo function. Tinutukoy nito ang tono ng karanasan ng button, tono ng text, cushioning, line sweep, dimensyon ng text, at cursor.

Tinukoy din ang isang estado ng hover na nagbabago sa kulay ng background kapag nag-hover ang user sa button. Ang pindutan ay sa wakas ay nai-render gamit ang isang bahagi ng React.

5. Pagsasama sa D3 para sa Data Visualization

Ang D3 ay isang pagmamanipula ng data at visualization na JavaScript library. Maaari kang gumawa ng mahusay at interactive na visualization ng data gamit ang React. Ang isang paglalarawan kung paano gamitin ang D3 sa React ay ang mga sumusunod:

 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;

Ang code na ito ay tumutukoy sa a Bar chart sangkap na tumatanggap ng a datos prop sa nakaraang code snippet. Tinatawag nito ang gumamit ngRef hook para gumawa ng reference sa SVG component na gagamit nito para gumuhit ng outline.

Pagkatapos nito, nire-render nito ang mga bar ng tsart at tinutukoy ang mga kaliskis gamit ang useEffect() hook , na nagmamapa ng mga halaga ng data sa mga coordinate ng screen.

6. Pagdaragdag ng Real-Time na Functionality Sa WebSockets

Ang pagpapatupad ng WebSockets ay nagtatatag ng ganap na gumaganang two-way na abenida na nagbibigay-daan sa patuloy na komunikasyon sa pagitan ng isang kliyente at server. Binibigyang-daan nila ang React na magdagdag ng tuluy-tuloy na pagiging kapaki-pakinabang sa mga web application, halimbawa, mga discussion board, live na update, at mga babala.

Gumagamit ka ng WebSockets sa sumusunod na paraan sa 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;

Sa halimbawang ito, tinukoy mo ang a Silid pang-usap sangkap na gumagamit ng socket.io-client library upang kumonekta sa isang WebSocket server. Maaari mong gamitin ang useState hook upang harapin ang rundown ng mga mensahe at ang pagpapahalaga sa impormasyon.

Sa pagtanggap ng bagong mensahe, ang gamitinEpekto Inirerehistro ng hook ang isang tagapakinig upang mag-trigger ng update sa kaganapan ng mensahe sa listahan ng mensahe. Upang i-clear at magpadala ng input value para sa mensahe ng kaganapan, mayroong isang hawakanIsumite function.

Kasunod nito, parehong lalabas sa screen ang form na may input field at button pati na rin ang na-update na listahan ng mensahe.

Sa bawat pagsusumite ng form, tumatawag sa hawakanIsumite function ay hindi maiiwasan. Upang maihatid ang mensahe sa server, ginagamit ng paraang ito ang socket.

7. Pagsasama sa React Native para sa Mobile Development

Ang React Local ay isang sistema para sa pagbuo ng mga lokal na unibersal na application gamit ang React, na kumokonekta upang i-promote ang mga portable na application para sa iOS at Android stages.

Gamit ang pagsasama ng React Native sa React, maaari mong gamitin ang disenyong nakabatay sa bahagi at magagamit muli na code ng React sa mga mobile at web platform. Binabawasan nito ang mga siklo ng pagbuo ng mobile app at oras sa merkado. Ang React Native ay isang sikat na framework para sa pagbuo ng mga native na mobile app na gumagamit ng React library.

Ipinapakilala ang mahahalagang programming at mga aklatan, tulad ng Node.js , Tumugon sa Lokal na CLI , at Xcode o Android Studio , ay mahalaga para sa mga designer na nakikipag-ugnayan sa iOS at Android nang hiwalay. Sa wakas, ang mga simpleng bahagi ng React Native ay nagbibigay-daan sa mga developer na lumikha ng matatag at mayaman sa tampok na mga mobile application para sa iOS at Android platform.

anong klaseng bulaklak ito

Pagsamahin ang React Sa Iba Pang Teknolohiya

Ang React ay isang paborito at epektibong library para sa pagbuo ng mga online na app. Ang React ay isang mahusay na opsyon para sa paglikha ng mga user interface, ngunit ginagamit din ito sa iba pang mga teknolohiya upang mapataas ang mga kakayahan nito.

Sa pamamagitan ng pagsasama ng React sa mga teknolohiyang ito, makakagawa ang mga developer ng mas masalimuot at advanced na app na nag-aalok ng mas magandang karanasan ng user. Ang React at ang ecosystem ng mga tool at library nito ay sumasaklaw sa lahat ng kailangan para gumawa ng pangunahing website o isang kumplikadong web application.