7 cách tích hợp phản ứng với các công nghệ khác
React là một thư viện JavaScript nổi tiếng mà bạn có thể sử dụng để tạo giao diện người dùng cho các ứng dụng web đa năng. React có thể thích ứng và bạn có thể kết hợp nó với các công nghệ khác để tạo ra các ứng dụng mạnh mẽ và hiệu quả hơn.
Tìm hiểu cách tích hợp React với nhiều công nghệ khác nhau và bạn sẽ thu được lợi ích từ nhiều nguồn.
Mục Lục
1. Phản ứng + Redux
Redux là một thư viện quản lý trạng thái được sử dụng cùng với React. Redux tạo điều kiện quản lý trạng thái ứng dụng tập trung. Khi xây dựng các ứng dụng phức tạp với nhiều trạng thái, React và Redux phối hợp tốt với nhau.
Dưới đây là minh họa về cách sử dụng Redux với 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;
Ví dụ này tạo một cửa hàng Redux với trạng thái ban đầu là 0. Một chức năng giảm tốc sau đó xử lý TĂNG Và GIẢM hoạt động. Mã này sử dụng sử dụngSelector Và sử dụngDispatch móc để có được số lượng đang diễn ra và gửi các hoạt động riêng lẻ.
Cuối cùng, để toàn bộ ứng dụng có thể truy cập cửa hàng, hãy bọc thành phần bộ đếm trong thành phần nhà cung cấp.
2. Kết xuất phía máy chủ với Next.js
Next.js là một khung phát triển giúp tối ưu hóa tốc độ trang web và SEO chiến thuật bằng cách truyền HTML tới máy khách và sử dụng kết xuất phía máy chủ của các thành phần React.
Bộ công cụ mạnh mẽ của nó hoạt động cùng với React, mang lại hiệu suất vượt trội và thứ hạng cao trên công cụ tìm kiếm.
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;
Trong mô hình này, bạn mô tả một thành phần React được gọi là Trang chủ. Next.js tạo một trang HTML tĩnh với nội dung của thành phần này khi nó hiển thị nó trên máy chủ. Khi trang nhận được lượt truy cập từ máy khách, nó sẽ gửi HTML đến máy khách và cấp nước cho thành phần, cho phép nó hoạt động như một thành phần React động.
3. Tìm nạp dữ liệu với GraphQL
GraphQL là ngôn ngữ truy vấn dành cho API cung cấp giải pháp thay thế hiệu quả, mạnh mẽ và dễ thích nghi cho REST. Với GraphQL, bạn có thể lấy dữ liệu nhanh hơn và cập nhật giao diện người dùng nhanh hơn.
Đây là hình minh họa cách sử dụng GraphQL với 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;
Mô hình này gọi là sử dụngTruy vấn chức năng từ @apollo/khách hàng thư viện để đưa danh sách khách hàng từ giao diện Lập trình GraphQL. Danh sách người dùng sau đó được hiển thị trong giao diện người dùng.
4. Tạo kiểu với CSS-in-JS
CSS-in-JS là một phương pháp dựa trên JavaScript để tạo kiểu cho các thành phần React. Nó giúp việc quản lý các biểu định kiểu phức tạp trở nên đơn giản hơn và cho phép bạn viết các kiểu theo kiểu mô-đun và dựa trên thành phần.
Đây là minh họa về cách sử dụng CSS-in-JS với 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;
Ví dụ này tạo ra một nút tạo kiểu thành phần sử dụng theo kiểu chức năng. Nó xác định âm trải nghiệm của nút, âm văn bản, đệm, quét dòng, kích thước văn bản và con trỏ.
Trạng thái di chuột làm thay đổi màu nền khi người dùng di chuột qua nút cũng được xác định. Nút cuối cùng được hiển thị bằng thành phần React.
5. Tích hợp với D3 để trực quan hóa dữ liệu
D3 là một thư viện JavaScript trực quan hóa và thao tác dữ liệu. Bạn có thể tạo trực quan hóa dữ liệu mạnh mẽ và tương tác bằng cách sử dụng React. Minh họa cách sử dụng D3 với React như sau:
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}>
{}
</svg>
);
}
export default BarChart;
Mã này định nghĩa một Biểu đồ cột thành phần chấp nhận một dữ liệu prop trong đoạn mã trước. Nó gọi sử dụngRef hook để tạo tham chiếu đến thành phần SVG sẽ sử dụng nó để vẽ đường viền.
Sau đó, nó hiển thị các thanh của biểu đồ và xác định tỷ lệ bằng hook useEffect(), ánh xạ các giá trị của dữ liệu tới tọa độ của màn hình.
6. Thêm chức năng thời gian thực với WebSockets
Việc triển khai WebSockets thiết lập một con đường hai chiều hoạt động đầy đủ cho phép giao tiếp liên tục giữa máy khách và máy chủ. Chúng cho phép React bổ sung tính hữu dụng liên tục cho các ứng dụng web, chẳng hạn như bảng thảo luận, cập nhật trực tiếp và cảnh báo.
Bạn sử dụng WebSockets theo cách sau với 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;
Trong ví dụ này, bạn định nghĩa một Phòng chat thành phần sử dụng socket.io-client thư viện để kết nối với máy chủ WebSocket. Bạn có thể dùng sử dụngState hook để xử lý danh sách các tin nhắn và giá trị thông tin.
Khi nhận được một tin nhắn mới, sử dụnghiệu ứng hook đăng ký một người nghe để kích hoạt cập nhật sự kiện tin nhắn vào danh sách tin nhắn. Để xóa và gửi giá trị đầu vào cho thông báo sự kiện, tồn tại một xử lýGửi chức năng.
Sau đó, cả biểu mẫu có trường nhập liệu và nút cũng như danh sách thông báo được cập nhật sẽ hiển thị trên màn hình.
Với mỗi lần gửi biểu mẫu, kêu gọi xử lýGửi chức năng là tất yếu. Để gửi tin nhắn đến máy chủ, phương thức này sử dụng socket.
7. Tích hợp với React Native để phát triển di động
React Local là một hệ thống để xây dựng các ứng dụng phổ quát cục bộ bằng cách sử dụng React, kết nối để quảng cáo các ứng dụng di động cho nền tảng iOS và Android.
Bằng cách tích hợp React Native với React, bạn có thể sử dụng thiết kế dựa trên thành phần và mã có thể tái sử dụng của React trên nền tảng web và di động. Điều này làm giảm chu kỳ phát triển ứng dụng di động và thời gian đưa ra thị trường. React Native là một framework phổ biến để phát triển các ứng dụng di động gốc sử dụng thư viện React.
Giới thiệu các chương trình và thư viện quan trọng, như Node.js, Trả lời CLI địa phươngVà Xcode hoặc Studio Android, là nền tảng cho các nhà thiết kế xử lý riêng iOS và Android. Cuối cùng, các thành phần React Native đơn giản cho phép các nhà phát triển tạo các ứng dụng di động mạnh mẽ và giàu tính năng cho nền tảng iOS và Android.
Kết hợp phản ứng với các công nghệ khác
React là một thư viện phổ biến và hiệu quả để xây dựng các ứng dụng trực tuyến. React là một lựa chọn tuyệt vời để tạo giao diện người dùng, nhưng nó cũng được sử dụng với các công nghệ khác để tăng khả năng của nó.
Bằng cách tích hợp React với các công nghệ này, các nhà phát triển có thể tạo ra các ứng dụng phức tạp và nâng cao hơn nhằm mang lại trải nghiệm người dùng tốt hơn. React và hệ sinh thái các công cụ và thư viện của nó bao gồm mọi thứ cần thiết để tạo một trang web cơ bản hoặc một ứng dụng web phức tạp.