React app with Koa JS

What is Koa JS

Koa.js is a minimal and flexible Node.js web application framework that offers a comprehensive range of functionality for web and mobile apps. It is an open source framework developed and maintained by the creators of Express.js

Step 1: Prepare our back-end with Koa JS

$ mkdir back-end
$ cd back-end
$ npm init
$ npm install koa
$ npm install nodemon

• init used to initialize the Node.js project
• koa used to install Koa JS to the project
• nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes in the directory are detected. (The below code shows how it is used in package.js)

Step 2: Create our back-end Koa app

index.js

When you run this application ($ npm run start), you can open http://localhost:3001 in your browser.

Step 3: Use router path to API requests and responses

To create router paths, you can create another JavaScript file and you need to install the koa routers to your application

$ npm install @koa/router

router.js

if you use the post method you can capture the request using ‘ctx.request.body’ or if you pass the parameter with the path you can capture the parameter using ‘ctx.params.id’

index.js

Under the index.js file, you need to import the router file and use it.

http://localhost:3001/api/v1/ in your browser.

Before going to the React app, we need to know some packages.

Our Koa app runs on port 3001. but our React app will run on another port. So, to communicate between different ports, you need to install koa cors to your Koa application.

$ npm install @koa/cors

Moreover, your koa app needs to process data sent through an HTTP request body. For that you need to install,

$ npm install koa-bodyparser

Step 4: Setup our front end React app

$ mkdir front-end
$ cd front-end
$ npm init
$ npm install react
$ npm install react-dom
$ npm install parcel --save-dev

• Parcel is a zero configuration build tool for the web.

Step 5: Create front end React app

Now you have to create index.html and index.jsx file

index.html

id=”root” is the element that we are going to render our components.

The above screenshot shows how to specify the index.jsx into the HTML file and root element

index.jsx

Using createRoot you can render components in to root element.

package.json

Under the script section, you can specify the parcel to execute index.html

Now, you can execute the react app using, $ npm run start

Step 6: Use router path with different components

First, you have to install react router to you react app.

$ npm install react-router-dom

In order to specify router path you have to create another JSX file (app.jsx).

app.jsx

Also, you need to modify index.jsx file.

index.jsx

Output

default path

/test path

Step 7: Connect backend with react app

$ npm i axios

Axios is a promise based HTTP client for the browser and it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations

Next, you have to create a js file to perform Axios request (service.js) and another JSX file (Users.jsx) to display data coming from the koa application.

service.js

Users.jsx

After that, you need to import the Users.jsx into the app.jsx

app.jsx

Output

Conclusion

We designed a web application with a little bit of effort that uses React for the front-end and Koa for the back-end. We learned how to combine React with Koa and how to handle APIs.