React - Expense Manager API

Quiz

First, create a new expense Rest API application by following instruction from Http Client Programming -> Expense Rest API Server and start the server. The expense server will be running at http://localhost:8000.

Create a skeleton application

Open a terminal and go to your workspace.

> cd /go/to/your/workspace

Next, create a new React application using Create React App tool.

> create-react-app react-expense-app

It will a create new folder react-expense-app with startup template code.

Next, go to expense-manager folder and install the necessary library.

cd react-expense-app 
npm install

The npm install will install the necessary library under node_modules folder.

Delete all files under src and public folder.

Next, create a folder, components under src to include our React components. The final structure of the application will be as follows:

|-- package-lock.json
|-- package.json
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |   |-- mycom.js
   |   |-- mycom.css

Let us create our root component, App, which will render the entire application.

Create a file, App.js under components folder and write a simple component to emit Hello World message.

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default App;

Next, create our main file, index.js under src folder and call our newly created component.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Next, create a html file, index.html (under public folder), which will be our entry point of the application.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense App</title>
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

Next, serve the application using npm command.

npm start

Next, open the browser and enter http://localhost:3000 in the address bar and press enter.

reactjs_example.htm

Print Page