開發REST並串連React

2022/07/11 (增加連結)

React + REST

• React連接REST API (吳濟聰老師的教材與範例)

• Spring Rest Controller (吳濟聰老師的教材與範例)

• REACT + Spring Rest (吳濟聰老師的教材與範例)

• Webapp with Create React App and Spring Boot

  • 新版的react，proxy設定與上面文章說的，有點不一樣 (請參考:Proxying API Requests in Development 或 https://coursework.vschool.io/setting-up-a-full-stack-react-application/)

• Spring Data REST

  • React.js and Spring Data REST

  • Use React and Spring Boot to Build a Simple CRUD App

• Spring Boot + Spring Security + JWT + MySQL + React Full Stack Polling app - Part 4

• Hooks in react-spring, a tutorial

• Overview of Proxy Servers, CORS, and How We Use Them in React

Spring

• 使用Axios來存取Spring REST

  • Rendering RESTful service with React

    • 都在localhost:8080上執行，有些內容要調整，詳參 react & REST

  • How to Setup Spring-Boot with ReactJS and Webpack

    • React在localhost:3000上執行

    • Spring Boot在localhost:8080上執行

  • How and Why You Should Use React Query

    • The useQuery hook

    • The useMutation hook

    • The queryCache utility

• fetch

  • Spring / React tutorial

  • Bootiful Development with Spring Boot and React

• client

  • React.js and Spring Data REST

• Spring and React.js: the easy way

  • spring & react 在同一專案

• How to combine a UI with a backend

Axios

• Using Axios with React

  • 簡單的解釋如何使用Axios

  • Step 1 — Adding Axios to the Project

  • Step 2 — Making a GET Request

  • Step 3 — Making a POST Request

  • Step 4 — Making a DELETE Request

  • Step 5 — Using a Base Instance in Axios

  • Step 6 — Using async and await

• What is Axios and how to use it with React

  • Axios basic APIs

  • Making it work with React

    • Using async/await

    • Configuring Axios

• Async/await

  • How to use async/await with axios in React — The Best Way

  • How to fetch data with React Hooks?

    • Axios, async/await, hooks

  • Axios in React.Js

    • with async/await

  • Using Axios with React

    • Axios is promise-based and thus we can take advantage of async and await for more readable asynchronous code. We can also intercept and cancel requests, and there’s built-in client side protection against cross site request forgery.

  • Axios in React — Bring Your Data to the Front

    • with Async-Await

• Fetching API Data with React Hooks, HOC or Render Prop

• Creating a reusable React Query component for your REST API

• Build a Contact Form With React Hooks And PHP

• How To Use Axios in an Optimized and Scalable Way With React : Instance, verbs, timeouts, and more

• Axios Mocking with ReactJS : Learn how to use the Axios Mocking Adapter to setup your in-memory Mock API for React

• 3 Ways to Enhance Axios.js in Your Project : retry, jsonp, and auto cancelation.

Axios & Fetch

• Things You Should Know When Fetching Data for React Components

  • The Fetch-API

  • Axios

  • Data Fetching in Higher-order Components

  • Data Fetching in Render-props

  • Data Fetching with React Hooks

  • Concurrent Mode and Suspense

• Axios vs Fetch — Which To Use in 2019:

  • Why are we still using axios in 2019?

    • Less boilerplate

    • Error handling

    • Missing features

    • Alternative libraries

• Fetch vs Axios http request

  • 利用fetch去存取REST vs. Axios的http request

  • 本文推薦使用Axios的http request

• HTTP Requests Compared: Why Axios Is Better Than Node-Fetch

  • Axios Performs Automatic Transformations Of JSON Data.

  • Axios Is More Secure, Featuring Built In Cross Site Forgery (XSRF) Protection

  • Axios Has Better Error Handling

  • Axios Has Interceptors

  • Axios Has The Ability To Monitor POST Request Progress

  • Axios Has A Wider Range Of Supported Browsers

Fetch

• Integrating REST API in ReactJS with fetch & useEffect

• Fetching, Fetched, and Fetch Error Is Not Enough

• Different Methods for Data Fetching in React : 6 Approaches To Fetching Data In React

• Cancelling Fetch Requests in React Applications : Using useEffect, useRef and TypeScript

React Query / useQuery

• How To Make Better Queries With React Query

• An Overview of React Query

• 7 Tips for Using React Query in Large Projects

• useQuery Instead of Fetch While Calling an API

• React-Query: You Might Not Need State Management

• React Query vs SWR

• Three ways to handle data fetching logic in React projects!

  • The React Query Way

    • The simplest way of doing the complex stuff.

• Maintainable Queries and Mutations with React Query

• React Query: Fetch data magically

SWR

• Why You Should Use useSWR Instead of useState When Calling APIs

  • Prefetching Data

  • Error Handling

• Why You Should Be Storing Remote Data in a Cache (and Not in State)

  • swr and react-query

• SWR — React Hooks for Remote Data Fetching

  • SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

• Suspense For Data Fetching with useSWR : Use it today with SWR and TypeScript

• Dependent and Conditional Data Fetching With useSWR

• How to Reduce HTTP Calls From 15 Lines to 2 Lines Using React SWR

AbortController

• Using React to understand Abort Controllers : browsers support an API called AbortController, which is typically used to cancel ongoing fetch requests

• React: Stop checking if your component is mounted : For simple use cases that are using the Fetch API, you should use the AbortController API to cancel your queries.