My React Journey: Day 19

Practice with JSON APIs and Mock Servers

Working with json-server is a great way to simulate a backend server and practice API interactions like GET, POST, PUT, PATCH, and DELETE.

What is json-server?

• A tool that allows you to quickly create a mock server to work with a JSON database.
• Ideal for prototyping and testing APIs without needing a fully functional backend.

Setup and Installation

1. Prerequisite: Node.js

• Ensure Node.js is installed on your system. Verify using:

node -v
npm -v

2. Install json-server

• Install globally using npm:

npm install -g json-server@0.17.4

How to Use json-server

1. Start the Server
Create a db.json file in your working directory with some initial data. Example:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

• Start the server and watch for changes in the db.json file:

json-server --watch db.json

• By default, the server will run at http://localhost:3000.

2. Explore Endpoints
The server automatically creates RESTful endpoints for each collection in db.json:

• GET /posts → Fetch all posts
• GET /posts/1 → Fetch post with ID 1
• POST /posts → Add a new post
• PUT /posts/1 → Replace the entire post with ID 1
• PATCH /posts/1 → Update specific fields in the post with ID 1
• DELETE /posts/1 → Delete the post with ID 1

Using Postman

Postman is a tool for making HTTP requests to test APIs. Here’s how to perform each operation with Postman:

1. GET (Fetch Data)

• Request Type: GET
• URL: http://localhost:3000/posts
• Fetches the list of posts.

2. POST (Add New Data)

• Request Type: POST
• URL: http://localhost:3000/posts
• Headers: Content-Type: application/json
• Body (JSON):

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}

• Adds a new post to the posts collection.

3. PUT (Replace Entire Resource)

• Request Type: PUT
• URL: http://localhost:3000/posts/2
• Headers: Content-Type: application/json

• Body (JSON):
  {
  "title": "Updated Title"
  }

• Result: Replaces the entire resource with the provided data.

Before:

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

After:

{
  "title": "Updated Title"
}

4. PATCH (Update Specific Fields)

• Request Type: PATCH
• URL: http://localhost:3000/posts/1
• Headers: Content-Type: application/json
• Body (JSON):

node -v
npm -v

Result: Updates only the specified field in the resource.

Before:

npm install -g json-server@0.17.4

After:

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

5. DELETE (Remove Data)

• Request Type: DELETE
• URL: http://localhost:3000/posts/1
• Deletes the post with ID 1.

Key Differences Between PUT and PATCH

PUT

• Replaces the entire resource.
• Omits any fields not included in the body.

PATCH

• Updates only specified fields.
• Retains fields not mentioned in the body.

Conclusion

What I Learned:

• Installed and used json-server to create a mock API server.
• Practiced basic API operations: GET, POST, PUT, PATCH, DELETE.
• Understood the difference between PUT and PATCH.

Day 19 Crushed.

The above is the detailed content of My React Journey: Day 19. For more information, please follow other related articles on the PHP Chinese website!