Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Expense Manager API.
Create a new expense Rest API application by following the guidelines from Http Client Programming -> Expense rest API Server and start the server. The expense server will be running at http://localhost:8000.
Create a new expense Rest API application by following the guidelines 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 create a new folder react-expense-app with startup template code.
Next, go to the expense-manager folder and install the necessary library.
Next, go to the expense-manager folder and install the necessary library.
cd react-expense-app npm install
The npm install installs the required 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 our application is as follows:
Delete all files under src and public folder.
Next, create a folder, components under src to include our React components. The final structure of our application is as follows:
|-- package-lock.json |-- package.json `-- public |-- index.html `-- src |-- index.js `-- components | |-- mycom.js | |-- mycom.css
Let's create our root component, App, which will render the entire application.
Create a file, App.js under component folder and write a simple component to emit Hello World message.
Create a file, App.js under component 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 built component.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
Next, create a html file, index.html beneath 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 making use of npm command.
npm start
Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.
READ: ReactJS | CLI Command
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about how to install necessary modules in ReactJS.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.