Connecting the client (React) and server (Express) in a MERN stack

application involves setting up API calls from the client to the server, as
well as ensuring that the server is configured to handle those requests
:properly. Here’s a step-by-step guide to achieve this

Set Up the Server .1 ###

Create API Endpoints 1.1 ####

In your Express server, create API endpoints that your React app can call.
For example, if you have a `patients` resource, you might create a route
:like this

javascript```

routes/patients.js //

;const express = require('express')

;)(const router = express.Router

;const Patient = require('../models/Patient')

GET all patients //

{ >= router.get('/', async (req, res)

{ try

;)(const patients = await Patient.find

;res.json(patients)

{ catch (err) }

;res.status(500).json({ message: err.message })

}
;)}

POST a new patient //

 { >= router.post('/', async (req, res)

;const patient = new Patient(req.body)

{ try

;)(const savedPatient = await patient.save

;res.status(201).json(savedPatient)

{ catch (err) }

;res.status(400).json({ message: err.message })

}
;)}

;module.exports = router

```

Use the Routes in Your Server 1.2 ####

:In your `server.js`, make sure to use the routes

javascript```

;const patientsRoute = require('./routes/patients')

;app.use('/api/patients', patientsRoute)

```

Set Up the Client .2 ###

Install Axios 2.1 ####

If you haven't already, install Axios in your React app to make HTTP
:requests
 bash```

cd frontend

npm install axios

```

Create a Service for API Calls 2.2 ####

:Create a separate file for API calls, e.g., `api.js`, in your `src` directory

javascript```

src/api.js //

;'import axios from 'axios

;'const API_URL = 'http://localhost:5000/api/patients

{ >= )( export const getPatients = async

;const response = await axios.get(API_URL)

;return response.data

;}

{ >= export const createPatient = async (patientData)

;const response = await axios.post(API_URL, patientData)

;return response.data

;}
```

Use the API in a React Component 2.3 ####

You can now use the API calls in your React components. Here's an
:example component that fetches and displays patients

javascript```

src/components/PatientList.js //

;'import React, { useEffect, useState } from 'react

;'import { getPatients } from '../api

{ >= )( = const PatientList

;)][(const [patients, setPatients] = useState

{ >= )((useEffect

{ >= )( const fetchPatients = async

;)(const data = await getPatients

;setPatients(data)

;}
;)(fetchPatients

;)][ ,}

( return

>div<

>h1>Patient List</h1<

>ul<

( >= patients.map(patient{

li key={patient._id}>{patient.name} - {patient.age} - <

>{patient.gender}</li

}))
>ul/<

>div/<
 ;)
;}

;export default PatientList

```

CORS Configuration .3 ###

To allow your React app (running on a different port) to communicate with

:your Express server, you need to set up CORS in your Express app

javascript```

;const cors = require('cors')

;app.use(cors())

```

Make sure to customize CORS options if you want to restrict access to

.specific domains in production

Run Both Servers .4 ###

:Start the Express server** (in the `backend` directory)** -

bash```

node server.js

```

:Start the React app** (in the `frontend` directory)** -

bash```

npm start

```
 Test the Connection .5 ###

Open your browser and navigate to the React app (usually

`http://localhost:3000`). If everything is set up correctly, you should see
.the patient list fetched from the Express server

Conclusion ###

By following these steps, you can successfully connect your React client
with your Express server. This setup allows for smooth data exchange
between the two, forming the basis for your Hospital Management
Information System. As you develop further, consider implementing error
.handling and loading states for a better user experience