Introduction

This tutorial is designed to explore a range of patterns for executing network requests in React applications. Although the focus is on React, the principles and challenges discussed are relevant to other frontend libraries and frameworks.

Starting with a basic user profile, the tutorial progressively introduces more complex scenarios. These scenarios are intended to illuminate common problems and solutions encountered in large-scale applications, with a primary aim of demystifying the often-overlooked performance pitfalls in frontend development.

While React serves as the primary example, the patterns and strategies discussed are broadly applicable across various frontend technologies. They offer universal insights that can be valuable in diverse development contexts.

The tutorial assumes you have a foundational understanding of React, including familiarity with JSX and common hooks such as useState and useEffect.

Key learning outcomes of this tutorial include:

• Gaining a deep understanding of the challenges inherent in network programming and why it can be difficult to get right.
• Unraveling and demystifying the most commonly misunderstood yet widely used patterns.
• Exploring ways to make asynchronous service calls more manageable and less error-prone.
• Investigating alternative approaches for enhancing user experience.
• Learning how to apply different strategies in both frontend and backend development.
• Looking ahead to the future of server-side work and its implications for frontend development.

This tutorial aims to equip you with the knowledge and tools to navigate the complexities of network requests in React and other frontend frameworks, enhancing both your understanding and practical skills.

The page we're going to build is a Home page in an imaginary social media website. It doesn't do much but showing a user their home page when then log in.

Setting up the environment

We're going to use vite as the scaffolding tool to generate the structure of the application, use the following command to create a React with TypeScript enabled.

npm create vite@latest react-network-advanced -- --template react-ts
cd react-network-advanced

Let's clean up the generated template file, open up the src/App.tsx, and put the following code:

function App() {
  return (
      <div className="max-w-3xl m-auto my-4 text-slate-800">
        <h1 className="text-4xl py-4 mb-4 tracking-wider font-bold">Profile</h1>
      </div>
  );
}
 
export default App;

We are going to use Tailwind Css for styling in this tutorial.

To install Tailwind, go to the react-network-advanced folder we created above, and execute the following command in Terminal (if you're on Mac OS)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

And then you will need to config Tailwind to allow it scan index.html and all tsx files under src folder.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Lastly, you will need to use @tailwind directives in src/index.css to actually enable it:

@tailwind base;
@tailwind components;
@tailwind utilities;

I prefer to make the background a bit gray, so I'll add the following line in src/index.css

body {
  background-color: #fefefe;
}

With these changes in place, let's launch the application now in command line:

npm run dev

It by default will launch your React application on "http://localhost:5173/", And in your browser, you should be able to see the text Profile

Setting up the backend service

We are going to call some API endpoints in the course of the tutorial, I have published them into a Github repo, go ahead and clone the repo to your local (assume it's in folder: mock-server-network-react-tutorial.

Run the following command to launch the mock server:

cd mock-server-network-react-tutorial
yarn start

You would be able to see something like this in your console:

yarn run v1.22.19
$ node index.js
Mock server listening at http://localhost:1573

And if you try to access the one of the following API endpoint:

curl http://localhost:1573/users/u1

Or if you prefer, you could use jq to format the output, which is a bit easier to read (curl http://localhost:1573/users/u1 | jq .). And you should be able to see response like the following:

{
  "id": "u1",
  "name": "Juntao Qiu",
  "bio": "Developer, Educator, Author",
  "interests": [
    "Technology",
    "Outdoors",
    "Travel"
  ]
}