Unit-4

JSON Server with Reactjs

JSON Server and React JS are two powerful tools that can be used together to
create dynamic and interactive web applications. JSON Server is a lightweight
mock API server that provides a simple and efficient way to simulate a real API
backend, while React JS is a popular JavaScript library for building user interfaces.

What is JSON Server?

JSON Server is a Node.js package that allows you to create a RESTful API server
from a JSON file. It's a great tool for prototyping and testing web applications, as
it allows you to quickly create a fake API without having to set up a real backend.

How does JSON Server work with React JS?

React JS applications can communicate with JSON Server using HTTP requests.
You can use the fetch API or any other HTTP client library to make API calls to the
JSON server and retrieve or manipulate data.

Benefits of using JSON Server with React JS:

 Rapid prototyping: JSON Server allows you to quickly create a fake API,
which can be very helpful for prototyping and testing your React JS
application.

 Ease of use: JSON Server is very easy to set up and use. You don't need any
special configuration or coding knowledge to get started.

 Flexibility: JSON Server supports a variety of HTTP methods, including GET,

POST, PUT, and DELETE, which means you can use it to simulate a wide
range of API endpoints.

Example of using JSON Server with React JS:

Let's say you have a JSON file called db.json that contains data about a list of
users. You can use JSON Server to create a fake API server for this data by running
the following command in your terminal:

json-server db.json

This will start a JSON Server instance on port 3000. You can then make API calls to
this server from your React JS application. For example, to fetch all users from the
API, you would use the following code:
fetch('http://localhost:3000/users')

.then(response => response.json())

.then(data => console.log(data));

Networking concepts – Client and Server

In the context of web applications, a client is a program that runs on a user's
device and initiates requests for resources from a server. The server is a program
that runs on a remote computer and provides those resources.

For example, when you open a web browser and type in a URL, your browser is
acting as a client. It is sending a request to a server for the web page that
corresponds to that URL. The server receives the request, processes it, and sends
back the HTML code for the web page. The browser then renders the HTML code
and displays the web page to you.
In the case of JSON Server and React JS, the JSON Server is acting as the server,
and the React JS application is acting as the client. The JSON Server is providing
the React JS application with data, such as a list of users. The React JS application
is then using this data to render the user interface.
The React JS application is sending requests to the JSON Server for data, and the
JSON Server is responding to those requests with the requested data. This
exchange of information is what allows the React JS application to display a
dynamic and interactive user interface.

Process of creation of JSON file

Define the data structure: Determine the data you want to store in the JSON file.
Identify the entities and their attributes.
Create a JSON object: Start the JSON file with an object literal, enclosed in curly
braces {}. Inside the object, define key-value pairs, where the key is a string
representing the property name and the value is the corresponding data.
Separate each pair with a colon :.
Use appropriate data types: Values can be strings, numbers, booleans, arrays, or
nested objects. Enclose strings in quotation marks "" and use numeric literals for
numbers. Use true or false for booleans.
Save as a JSON file: Save the text file with the extension .json. This ensures that
the file is recognized as a JSON file.
Sample JSON file -
Setting Up Rest API Using JSON Server
Setting up a REST API using JSON Server is a straightforward process that involves
creating a JSON file to store data and running a JSON Server instance to expose
the data as an API. Here's a step-by-step guide:
 Install JSON Server: Ensure you have Node.js installed on your system.
Then, open a terminal window and navigate to the project directory where
you want to create the API. Install the JSON Server package using the
following command:
npm install json-server
 Create a JSON Database File: Create a JSON file, typically named db.json, to
store the data you want to expose through the API. Define the structure of
your data using JSON objects and key-value pairs. For example, if you're
creating an API for books, your db.json might look like this:
  Start the JSON Server: Open a terminal window and navigate to the project
directory containing the db.json file. Run the following command to start
the JSON Server instance:

json-server db.json

 This will start the JSON Server on port 3000 by default. You can verify that
the server is running by accessing http://localhost:3000 in your web
browser.

 Access the API Endpoints: Once the JSON Server is running, you can access
your API endpoints using standard HTTP methods (GET, POST, PUT,
DELETE) and the appropriate URL patterns. For example, to retrieve all
books from the API, you would send a GET request to
http://localhost:3000/books.

JavaScript Library Integration

JavaScript library integration refers to the process of incorporating
external JavaScript libraries into a web application or project. These
libraries provide pre-written code and functionalities that can enhance
the capabilities of a web application, saving developers time and effort.

Benefits of JavaScript Library Integration:

 Reduced Development Time: Libraries provide pre-built code,

eliminating the need to write everything from scratch. This
significantly reduces development time and allows developers to
focus on more complex aspects of the application.

 Enhanced Functionality: Libraries offer a wide range of features

that can be easily incorporated into a web application, expanding
its capabilities and providing a richer user experience.

 Code Reusability: Libraries promote code reusability, as they can

be used across multiple projects, reducing the need to reinvent
the wheel for common functionalities.

 Community Support: Many popular JavaScript libraries have

active communities of developers who provide support,
contribute to bug fixes, and share knowledge.

Common Methods for JavaScript Library Integration:

 CDN (Content Delivery Network): CDNs host library files on

geographically distributed servers, ensuring fast delivery to users
worldwide. Developers can include a CDN link in their HTML code
to load the library.
  Package Managers: Package managers, such as npm (Node
Package Manager) and yarn, facilitate the installation and
management of JavaScript libraries. They provide a centralized
location for libraries and their dependencies.

 Build Tools: Build tools, like Webpack and Gulp, streamline the
process of integrating libraries into a web application. They can
handle tasks like minification, concatenation, and dependency
management.

OR
Steps to Integrate JSON Server with ReactJS:

1. Install JSON Server:

Ensure you have Node.js installed on your system. Then, install JSON Server globally using the following command:

npm install -g json-server

2. Create a JSON Data File:

Create a JSON file (e.g., data.json) in your project directory. This file will contain the mock data that JSON Server
will serve as an API. For example, a JSON file for a list of users might look like this:

JSON

"id": 1,

"name": "John Doe",

"email": "[email protected]"

},

"id": 2,

"name": "Jane Doe",

 "email": "[email protected]"

Use code with caution. Learn more

3. Start JSON Server:

Open a terminal window and navigate to your project directory. Then, start JSON Server using the following
command:

json-server data.json --port 8000

This will start JSON Server on port 8000, making the mock data in data.json accessible through an API.

4. Integrate JSON Server API in ReactJS:

In your ReactJS application, install the axios library for making HTTP requests. Then, use axios to fetch data from
the JSON Server API. For example, to fetch the list of users from the API:

import axios from 'axios';

const fetchUsers = () => {

axios.get('http://localhost:8000/users')

.then(response => {

const users = response.data;

// Use the fetched users data

})

.catch(error => {

console.error(error);

});

};

This code snippet fetches the data from the /users endpoint of the JSON Server API running on localhost port 8000.
The fetched data is then stored in the users variable.

By integrating JSON Server with ReactJS, developers can efficiently develop and test their React components
without relying on a full-fledged backend server setup. JSON Server provides a convenient way to simulate API
interactions and data management, making it a valuable tool for front-end development.
Making Request with Fetch
Making requests with Fetch in a JSON Server and ReactJS application involves
utilizing the Fetch API to communicate with the JSON Server and retrieve or
manipulate data. Here's a step-by-step guide:

Install Fetch API (if not already installed): If you haven't already, install the Fetch
API in your React JS project using npm or yarn. This can be done with the
following command:

npm install cross-fetch

Import Fetch API: Import the Fetch API into your React JS component where you
want to make requests. This can be done using the following import statement:

import fetch from 'cross-fetch';

Define the API URL: Determine the URL of the JSON Server endpoint you want to
call. This URL typically includes the server address, port, and endpoint path. For
example, if your JSON Server is running on localhost port 3000 and you want to
fetch all books from the API, the URL would be:

const url = 'http://localhost:3000/books';

Create the Fetch Request: Use the Fetch API to create a request object. This
involves specifying the URL of the endpoint and the HTTP method (GET, POST,
PUT, DELETE) for the request. For example, to make a GET request to the books
endpoint, you would use the following code:
const requestOptions = {

method: 'GET',

headers: {

'Content-Type': 'application/json',

'Accept': 'application/json'
 }

};

Use code with caution. Learn more

Make the Fetch Request: Use the Fetch API's fetch() method to send the request
to the JSON Server. This method takes the URL and request options as
parameters. The fetch() method returns a promise that resolves to a response
object.
fetch(url, requestOptions)

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

Handle the Response: Once the response is received, you can handle the data
returned by the JSON Server. This typically involves parsing the JSON data and
updating your React JS components accordingly.
fetch(url, requestOptions)

.then(response => response.json())

.then(data => {

// Update React JS components based on the data

})

.catch(error => console.error(error));

By following these steps, you can effectively make requests to your JSON Server
using Fetch in your React JS application, enabling you to retrieve or manipulate
data from your mock API server and build dynamic and interactive web
applications.