- \n
- create-react-app <\/a><\/li>\n
- ReactJS<\/a><\/li>\n
- NodeJS<\/a><\/li>\n
- Express <\/a><\/li>\n
- Visual Studio Code IDE<\/a><\/li>\n
- concurrently<\/a><\/li>\n<\/ul>\n
create-react-app npm package from the folks at Facebook allows us to quickly generate a ReactJS application. We use it here to scaffold a starting point for our example. The latest ReactJS version is pulled down and used by create-react-app. ReactJS is a front end library and we use it here to show how to make API calls in a ReactJS application.<\/p>\n
I have used Express to create a rudimentary API for the purposes of our example in Nodejs. concurrently allows us to run multiple commands concurrently like our server API and client-side code here. Visual Studio Code IDE is my editor of choice for front end development although you are free to follow along in an editor of your choice.<\/p>\n
2. Project Structure<\/h2>\n
To generate our project we run the below command:<\/p>\n
>npx create-react-app my-app\n<\/pre>\n
The npx command downloads a temporary copy of a package and runs it with the parameters provided. And once the above command completes running we should have the following project structure ready.<\/p>\n
\n![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/Project-Structure-API-Calls.jpg\")
Project Structure<\/figcaption><\/figure>\n<\/div>\n 3. Server-side API<\/h2>\n
We will create a rudimentary API for use in our example. The API is backed by a sample dataset on which we will perform CRUD operations. The dataset represents a Cricket team of my favorite players. We will edit this list including add\/remove players and update player names calling the server-side API each time. The changes will not be persistent as we will not use a backing database store for the sake of keeping things simple. Our dataset looks like below:<\/p>\n
dataset.json<\/em><\/span><\/p>\n
[\n {\n \"name\": \"Sachin Tendulkar\"\n },\n {\n \"name\": \"Gautam Gambhir\"\n },\n {\n \"name\": \"Sourav Ganguly\"\n },\n {\n \"name\": \"Anil Kumble\"\n },\n {\n \"name\": \"Virendar Sehwag\"\n },\n {\n \"name\": \"Jasprit Bumrah\"\n },\n {\n \"name\": \"Viraat Kohli\"\n },\n {\n \"name\": \"Ravindra Jadeja\"\n },\n {\n \"name\": \"Javagal Shreenath\"\n },\n {\n \"name\": \"Kuldeep Yadav\"\n },\n {\n \"name\": \"Rahul Dravid\"\n },\n {\n \"name\": \"Venkatesh Prasad\"\n }\n]\n<\/pre>\nTo realize the Server-side API I have used Express and the code for the Server-side looks like below:
<\/div> <\/div><\/p>\nindex.js<\/em><\/span><\/p>\n
const express = require('express');\nconst app = express();\nconst bodyParser = require(\"body-parser\");\nconst api = require('.\/teamController');\nconst cors = require('cors');\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(cors());\napp.use('\/api', api());\n\nconst Port = process.env.PORT || 2019;\n\napp.listen(Port, () => {\n console.log(`Listening on ${Port}.`);\n});\n<\/pre>\nThe code for the team controller which handles the API request looks like below:<\/p>\n
teamController.js<\/em><\/span><\/p>\n
const router = require('express').Router();\nlet dataset = require('..\/dataset\/dataset.js');\nmodule.exports = () => {\n router.get('\/', (req, res) => {\n return res.json(dataset);\n });\n\n router.post('\/addPlayer', (req, res) => {\n dataset.push(req.body);\n return res.json({ success: \"success\" });\n });\n\n router.patch('\/updatePlayer\/:oldName\/:newName', (req, res) => {\n let player = dataset.map(p => p.name.toLowerCase() ===\n req.params.oldName.toLowerCase());\n player.name = req.params.newName;\n return res.json({ success: \"success\" });\n });\n\n router.delete('\/deletePlayer\/:name', (req, res) => {\n dataset = dataset.filter(p => p.name.toLowerCase() !==\n req.params.name.toLowerCase());\n return res.json({ success: \"success\" });\n });\n\n return router;\n};\n\n<\/pre>\nNow let’s move on to our client-side application and to making the actual calls to this API.<\/p>\n
4. Client-side API Calls<\/h2>\n
Going about client-side development, I have created three ReactJS components namely, TeamPage, PlayerList, and Player. The TeamPage component hosts our UI. Whereas the PlayerList renders an unordered list of Players from our team. Each player is further passed onto an instance of the Player component to be displayed. Furthermore, the API calls are made from the TeamPage Component with the other two components acting as dumb or not so smart ones.<\/p>\n
To make the actual API calls we use the fetch browser API. The code for each of the components discussed above looks like below.<\/p>\n
TeamPage.js<\/em><\/span><\/p>\n
import React, { useState, useEffect } from 'react';\nimport PlayerList from '.\/PlayerList';\nimport dataService from '..\/Services\/DataService';\n\nfunction TeamPage(props) {\n const [team, setTeam] = useState();\n useEffect(() => {\n dataService.getTeam()\n .then(resp => setTeam(resp))\n .catch(err => console.log(err));\n }, []);\n const deletePlayer = (name) => {\n dataService.deletePlayer(name)\n .then(r => {\n dataService.getTeam()\n .then(resp => setTeam(resp))\n .catch(err => console.log(err));\n })\n .catch(err => console.log(err));\n }\n const updatePlayer = (oldname, newname) => {\n dataService.updatePlayer(oldname, newname)\n .then(r => {\n dataService.getTeam()\n .then(resp => setTeam(resp))\n .catch(err => console.log(err));\n })\n .catch(err => console.log(err));\n }\n return <div style={{\n display: 'flex',\n flexDirection: 'column',\n height: '100vh',\n width: '100vw',\n justifyContent: 'center',\n alignItems: 'center'\n }}>\n\n <PlayerList team={team} updatePlayer={updatePlayer}\ndeletePlayer={deletePlayer} addPlayer={addPlayer} \/>\n <\/div>\n}\n\nexport default TeamPage;\n\n<\/pre>\nPlayerList.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\nimport Player from '.\/Player';\n\nfunction PlayerList(props) {\n const [newPlayer, setNewPlayer] = useState(\"\");\n const handleChange = ({ target }) => {\n setNewPlayer(target.value);\n }\n const handleClick = () => {\n if (!newPlayer) return;\n props.addPlayer(newPlayer);\n }\n return <>\n <input type=\"text\" value={newPlayer}\n onChange={handleChange} \/><button \nonClick={handleClick}>+<\/button>\n <ul>\n {props.team && props.team.map(p => <Player\n updatePlayer={props.updatePlayer}\n deletePlayer={props.deletePlayer}\n key={p.name} player={p} \/>)}\n <\/ul><\/>\n}\n\nexport default PlayerList;\n<\/pre>\nPlayer.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\n\nfunction Player(props) {\n const [editMode, setEditMode] = useState(false);\n const [playerName, setPlayerName] = \n useState(props.player.name);\n const handleChange = ({ target }) => {\n setPlayerName(target.value);\n }\n const saveChanges = ({ target }) => {\n props.updatePlayer(props.player.name, playerName);\n setEditMode(false);\n }\n const deletePlayer = () => {\n props.deletePlayer(playerName);\n }\n return <>\n {!editMode && <li>{playerName}<\/li>}\n {editMode && <><input value={playerName} onChange=\n{handleChange} \/><br \/><\/>}\n {!editMode && <><button onClick={() => \n{ setEditMode(true) }}>Edit<\/button><button onClick=\n{deletePlayer}>X<\/button><\/>}\n {editMode && <button onClick={saveChanges}>Save<\/button>}\n <\/>;\n}\n\nexport default Player;\n<\/pre>\nThe code for the dataService looks like below:<\/p>\n
DataService.js<\/em><\/span><\/p>\n
function getTeam() {\n return window.fetch('\/api')\n .then(r => r.json());\n}\n\nfunction addPlayer(player) {\n return window.fetch('\/api\/addPlayer', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(player)\n })\n .then(r => r.json());\n}\n\nfunction updatePlayer(oldname, newname) {\n return window.fetch(`\/api\/updatePlayer\/${oldname}\/${newname}`\n, \n{\n method: 'PATCH'\n })\n .then(r => r.json());\n}\n\nfunction deletePlayer(name) {\n return window.fetch(`\/api\/deletePlayer\/${name}`, {\n method: 'DELETE'\n })\n .then(r => r.json());\n}\n\nexport default {\n getTeam,\n updatePlayer,\n addPlayer,\n deletePlayer\n}\n<\/pre>\nNow let us see our application in action.<\/p>\n
5. Running the application<\/h2>\n
To run our application we need to run the following command<\/p>\n
\/my-app>npm start\n<\/pre>\n
This command as it is setup will launch both, our Server-side API as well as the ReactJS application using concurrently. The result should be as below:<\/p>\n
- ReactJS<\/a><\/li>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ReactJS-API-Calls-Output.jpg\")