Cách sử dụng React Lifecycle trong ReactJS cho người mới bắt đầu

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Duy Tien

1630652400

Cách Sử Dụng React Lifecycle Trong ReactJS Cho Người Mới Bắt đầu

#reactjs

Duy Tien

1630656000

Cách sử dụng React Lifecycle trong ReactJS cho người mới bắt đầu

#reactjs

Hoang Kim

1679182980

Sử dụng API RESTful trong React cho người mới bắt đầu

Trong hướng dẫn React này, chúng ta sẽ tìm hiểu về Cách sử dụng API RESTful trong React cho người mới bắt đầu. Hướng dẫn ngắn gọn này sẽ giúp bạn hiểu các khái niệm cần thiết để tích hợp API RESTful vào ứng dụng React.

React vẫn là một trong những framework giao diện người dùng phổ biến nhất hiện có vào năm 2022, vì vậy, biết các cách khác nhau để tích hợp API RESTful là một kỹ năng cần thiết đối với bất kỳ nhà phát triển giao diện người dùng nào.

Đối với hướng dẫn này, chúng tôi sẽ xây dựng một ứng dụng danh sách liên hệ đơn giản để hiển thị danh sách tên, email và khẩu hiệu của các liên hệ. Đây là những gì chúng ta sẽ làm:

Lấy một số dữ liệu từ một điểm cuối
Lưu dữ liệu ở trạng thái
Kết xuất dữ liệu đã nói

Đến cuối hướng dẫn này, bạn sẽ biết cách sử dụng API REST trong React bằng nhiều phương pháp.

điều kiện tiên quyết

Để làm theo, bạn cần những điều sau đây:

Kiến thức cơ bản về React (phiên bản > 16)
Hiểu cơ bản về API là gì
NPM được cài đặt trên máy tính của bạn

Thiết lập môi trường của chúng tôi

Có nhiều cách để bắt đầu một dự án React nhưng để đơn giản hóa mọi thứ, tôi đã thiết lập một mẫu đơn giản mà bạn có thể sao chép để bắt đầu.

Sao chép mẫu React đã tạo sẵn và thay đổi nó vào thư mục mới.

  git clone https://github.com/pusher/react-rest-api-tutorial.git
  cd react-rest-api-tutorial

2. Cài đặt tất cả các phụ thuộc.

  npm install

3. Khởi động ứng dụng.

  npm run dev

Đến bây giờ, bạn sẽ có một phiên bản của ứng dụng đang chạy trên máy cục bộ của mình trên cổng 5173 . Bản thân mẫu này khá đơn giản. Nó sử dụng Vite , một công cụ xây dựng nhằm cung cấp trải nghiệm phát triển nhanh và gọn gàng cho các dự án web.

Bạn có thể khám phá những cách khác để bắt đầu một dự án React mới.

Hãy dành chút thời gian để xem qua dự án và bạn sẽ thấy một loạt các tệp và thành phần được tạo sẵn.

Vì lợi ích của hướng dẫn này, các tệp duy nhất quan trọng là:

main.jsx — Điểm vào của ứng dụng.
App.jsx — Vùng chứa chính của ứng dụng. Giữ tất cả các thành phần khác.
Contact.jsx — Hiển thị chi tiết của một liên hệ.

Ngoài ra, chúng ta có thể tiếp tục thực sự sử dụng API REST và hiển thị một số dữ liệu dựa trên phản hồi.

Sử dụng API REST trong React

Nhắc lại nhanh, API REST là API ánh xạ tài nguyên tới điểm cuối. Tài nguyên, trong trường hợp này, có nghĩa là bất kỳ phần dữ liệu nào cần thiết để ứng dụng hoạt động. Ví dụ: một danh sách (các) tài nguyên danh bạ có thể được ánh xạ tới một /contactsđiểm cuối.

Để tìm hiểu thêm về API REST, IBM có một tài nguyên tốt về nó .

Ngoài ra, điều đầu tiên chúng ta cần làm là xác định API nào chúng ta sẽ sử dụng.

Để tránh phải thiết lập toàn bộ máy chủ chỉ cho hướng dẫn này, chúng tôi sẽ sử dụng dữ liệu giả từ một API công khai, miễn phí được tạo cho mục đích này, JSONPlaceholder .

Nó hiển thị một loạt các điểm cuối phổ biến hữu ích và chúng tôi sẽ sử dụng /usersđiểm cuối trông giống như https://jsonplaceholder.typicode.com/users.

Bây giờ chúng ta đã có một điểm cuối, chúng ta phải xác định cách thực sự sử dụng nó trong ứng dụng React của mình. Có nhiều tùy chọn có sẵn để chọn khi thực hiện yêu cầu API trong ứng dụng React:

Tìm nạp/Axios – Tùy chọn đơn giản nhất là sử dụng API Tìm nạp hoặc sử dụng thư viện như Axios để thực hiện các yêu cầu API. Đây là những tùy chọn khá đơn giản mà không có bất kỳ chức năng nâng cao nào như bộ nhớ đệm, yêu cầu loại trừ , v.v.

Truy vấn SWR/React – Đối với các ứng dụng phức tạp yêu cầu giải pháp mạnh mẽ hơn, có lẽ nên sử dụng thư viện tìm nạp dữ liệu chính thức cung cấp nhiều chức năng hơn.

Chúng ta sẽ khám phá cả hai tùy chọn bên dưới.

Sử dụng Tìm nạp và Axios

Fetch API là một tiêu chuẩn web được triển khai trong tất cả các trình duyệt chính để cho phép thực hiện các yêu cầu mạng theo cách được tiêu chuẩn hóa.

Axios là thư viện của bên thứ ba có chức năng rất giống với Tìm nạp. Nó cung cấp một số cải tiến so với Tìm nạp, chẳng hạn như khả năng tương thích ngược tốt hơn, chuyển đổi dữ liệu hoặc khả năng chặn yêu cầu trước hoặc sau khi yêu cầu được thực hiện.

Vì những lý do được liệt kê ở trên, tôi sẽ sử dụng Axios trong hướng dẫn này nhưng trừ một số khác biệt nhỏ (ví dụ: Axios tự động tuần tự hóa phản hồi thành JSON), bạn sẽ có thể sử dụng Tìm nạp theo cách gần như chính ~~xác~~ .

Cài đặt thư viện Axios. Fetch không cần phải cài đặt vì nó đi kèm với mọi trình duyệt chính, trừ Internet Explorer.

npm install axios

2. Mở App.jsxtệp và nhập thư viện Axios cũng như một số hook React:

import { useState, useEffect } from 'react'
import axios from 'axios'
import Contact from './Contact'

// continues below (1)

3. Chúng ta cần lưu trữ phản hồi (hoặc lỗi, nếu có) từ việc gọi API ở trạng thái React. Khởi tạo hai biến trạng thái:

// continues from above (1)
function App() {
  const [contacts, setContacts] = useState([]);
  const [error, setError] = useState(null);

// continues below (2)

4. Chúng tôi cần truy vấn điểm cuối API REST khi App thành phần được gắn kết và để làm điều đó, chúng tôi sẽ sử dụng useEffecthook:

// continues from above (2)
  useEffect(() => {
    axios("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        setContacts(response.data);
        setError(null);
      })
      .catch(setError);

    /* Using Fetch
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((response) => {
        setContacts(response);
        setError(null);
      })
      .catch(setError);
    */
  }, []);

// continues below (3)

5. Cuối cùng, chúng ta có thể hiển thị dữ liệu được tìm nạp từ /usersđiểm cuối. Đầu tiên, chúng tôi kiểm tra xem có bất kỳ lỗi nào không trước khi kết xuất và sau đó lặp lại danh sách các liên hệ trong trạng thái. Đối với mỗi liên hệ, chúng tôi sẽ hiển thị một phiên bản của <Contact />thành phần:

// continues from above (3)

  if (error) return <p>An error occurred</p>

  return (
    <div className="App">
      {contacts.map(({ id, name, email, company }) => (
        <Contact
          key={id}
          name={name}
          email={email}
          tagline={company.catchPhrase}
        />
      ))}
    </div>
  );
}

export default App;

Tóm lại, đây là những gì chúng tôi đã làm:

Đã cài đặt Axiosthư viện.
Đã nhập nó vào App.jsxtệp của chúng tôi cũng như hook useStatevà useEffectReact.
Khi thành phần được gắn kết, chúng tôi đã tạo một yêu cầu mạng để https://jsonplaceholder.typicode.com/userstìm nạp danh sách mọi người và lưu phản hồi ở trạng thái.
Kiểm tra lỗi trước khi hiển thị danh sách những người trong trạng thái. Nếu có lỗi, chúng tôi sẽ hiển thị thông báo lỗi.
Mặt khác, chúng tôi lặp qua danh sách những người trong trạng thái và hiển thị một <Contact />thành phần cho từng người trong số họ.

Kiểm tra ảnh chụp nhanh về cách mã của bạn sẽ xem xét vào thời điểm này.

Sử dụng SWR

Tùy chọn tiếp theo, SWR , là một thư viện mạnh mẽ hơn, cung cấp rất nhiều tính năng cho các trường hợp sử dụng nâng cao hơn. Nó tích hợp độc đáo với React Suspense, cung cấp các tính năng phân trang tích hợp và tự động lưu trữ dữ liệu vào bộ đệm, cùng với một loạt các tính năng hữu ích khác.

LƯU Ý: Hướng dẫn này sử dụng phiên bản 1.3 của SWR.

Việc sử dụng nó tương đối đơn giản như chúng ta sẽ thấy ngay sau đây.

Cài đặt thư viện SWR như vậy —

npm install swr

2. Nhập useSWRmóc tùy chỉnh cho phép chúng tôi quản lý các yêu cầu API của mình —

import useSWR from 'swr'
import Contact from './Contact'

// continues below (1)

3. SWR yêu cầu chúng tôi tạo chức năng “trình tìm nạp” trợ giúp sẽ truy vấn điểm cuối cho chúng tôi. Chúng tôi sẽ sử dụng Tìm nạp trong chức năng này nhưng theo tài liệu SWR , bạn cũng có thể sử dụng Axios hoặc thư viện GraphQL:

// continues from above (1)

const fetcher = (...args) => fetch(...args).then((res) => res.json());

// continues below (2)

4. Bây giờ chúng ta đã thiết lập hệ thống ống nước, chúng ta có thể tiếp tục và sử dụng API.

// continues from above (2)

function App() {
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/users",
    fetcher
  );

// continues below (3)

5. Kết xuất dữ liệu từ điểm cuối khi có sẵn.

// continues from above (3)

  if (error) return <p>An error occurred</p>;
  if (!data) return <p>Loading</p>;

  return (
    <div className="App">
      {data.map(({ id, name, email, company }) => (
        <Contact
          key={id}
          name={name}
          email={email}
          tagline={company.catchPhrase}
        />
      ))}
    </div>
  );
}

export default App;

Như bạn có thể thấy, sử dụng SWR rất đơn giản nhờ useSWRmóc được thiết kế rất tốt. Có một số điểm khác biệt đáng chú ý so với phương pháp Tìm nạp/Axios ở trên, đáng chú ý là:

SWR cung cấp móc tùy chỉnh, useSWRvì vậy chúng tôi không phải mang vào useStatevàuseEffect
Xử lý lỗi và trạng thái tải được xử lý cho chúng tôi

Để khám phá các khả năng khác của chúng, hãy xem tài liệu SWR.

Kiểm tra ảnh chụp nhanh về mã của bạn sẽ trông như thế nào vào thời điểm này.

Sử dụng truy vấn phản ứng

Tùy chọn cuối cùng mà chúng ta sẽ khám phá là React Query . Nó nhằm mục đích trở thành một cách tìm nạp/cập nhật dữ liệu trong React. Và kết quả là, đi kèm với rất nhiều tính năng hữu ích như truy vấn song song, tạm dừng truy vấn, thử lại tự động, v.v.

LƯU Ý: Hướng dẫn này sử dụng phiên bản 4 của React Query.

Sử dụng nó phức tạp hơn một chút so với các tùy chọn ở trên nhưng rất may là vẫn tương đối đơn giản.

Cài đặt thư viện React Query

npm i @tanstack/react-query

2. Chúng tôi phải bao bọc ứng dụng trong một “QueryClientProvider” để có thể truy vấn các điểm cuối từ bất kỳ thành phần nào. Mở src/main.jsxtệp và bọc Appthành phần như sau:

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import App from "./App";

import "./index.css";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

3. Với QueryClientProvider được thiết lập, giờ đây chúng ta có thể truy vấn các điểm cuối trong Appthành phần của mình. Mở src/App.jsxtệp và nhập useQueryhook tùy chỉnh:

import { useQuery } from '@tanstack/react-query'
import Contact from "./Contact";

// continues below (1)

4. Cũng giống như với SWR, chúng tôi cần một phương pháp “trình tìm nạp” sẽ ~~thực sự~~ đưa ra yêu cầu cho chúng tôi. Một lần nữa, chúng tôi sẽ sử dụng Tìm nạp nhưng vui lòng thay thế bằng Axios hoặc bất kỳ thư viện tìm nạp dữ liệu nào khác:

// continues from above (1)

const fetcher = () =>
  fetch("https://jsonplaceholder.typicode.com/users").then((res) =>res.json())

// continues below (2)

5. Sau khi thiết lập trình tìm nạp, giờ đây chúng ta có thể tiếp tục và sử dụng điểm cuối:

// continues from above (2)

function App() {
  const { isLoading, error, data } = useQuery(["contacts"], fetcher);

// continues below (3)

Lưu ý rằng đối số đầu tiên mà chúng ta chuyển đến useQuerylà một mảng chứa "``contacts``". Đây là mã định danh duy nhất cho yêu cầu này để React Query biết cách phân biệt nó với các yêu cầu khác. Điều này cần thiết cho một số tính năng nâng cao hơn như lưu vào bộ nhớ đệm, tạm dừng yêu cầu, v.v.

6. Cuối cùng, chúng ta có thể kết xuất dữ liệu của mình từ điểm cuối:

// continues from above (3)

  if (isLoading) return <p>Loading</p>;
  if (error) return <p>An error occurred</p>;

  return (
    <div className="App">
      {data.map(({ id, name, email, company }) => (
        <Contact
          key={id}
          name={name}
          email={email}
          tagline={company.catchPhrase}
        />
      ))}
    </div>
  );
}

export default App;

Để khám phá các khả năng khác của chúng, hãy xem Tài liệu truy vấn phản ứng .

Kiểm tra ảnh chụp nhanh về cách mã của bạn sẽ xem xét vào thời điểm này.

Phần kết luận

Chúng ta đã khám phá bốn cách sử dụng API trong React. Đây chỉ là tảng băng chìm vì có rất nhiều điều cần xem xét khi tìm nạp dữ liệu trong ứng dụng giao diện người dùng.

Bạn có thể thực hiện điều này hơn nữa bằng cách triển khai trạng thái tải thích hợp, xử lý lỗi tốt hơn, lưu trữ dữ liệu vào bộ đệm, v.v.

Nguồn bài viết gốc tại: https://pusher.com

#react #react-native

Duy Tien

1630641600