ReactJS | Using Create React App tool

Hello folks! welcome back to a new edition of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will learn how to create an expense management application using Create React App tool.

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 expense-manager

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

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

cd expense-manager 
npm install

npm install will install the necessary library under node_modules folder.

Next, start the application.

npm start
Compiled successfully! 
You can now view react-cra-web-app in the browser. 

   Local:            http://localhost:3000 
   On Your Network:  http://192.168.56.1:3000
 
Note that the development build is not optimized. 
To create a production build, use npm run build.

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter. The development web server is going to serve our webpage as seen below -

Let us quickly analyse the structure of our React application.

READ: ReactJS | Using CDN

Files and folders

Following below is the content of the React application -

|-- README.md
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
|  |-- favicon.ico
|  |-- index.html
|  |-- logo192.png
|  |-- logo512.png
|  |-- manifest.json
|  `-- robots.txt
`-- src
   |-- App.css
   |-- App.js
   |-- App.test.js
   |-- index.css
   |-- index.js
   |-- logo.svg
   |-- reportWebVitals.js
   `-- setupTests.js

Here, the package.json is the main file that represents the project. It helps to configure the entire project and is made up of project name, project dependencies, and command to build and run the application.

{
   "name": "expense-manager",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "@testing-library/jest-dom": "^5.11.6",
      "@testing-library/react": "^11.2.2",
      "@testing-library/user-event": "^12.6.0",
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "4.0.1",
      "web-vitals": "^0.2.4"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": [
         "react-app",
         "react-app/jest"
      ]
   },
   "browserslist": {
      "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
      ],
      "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
      ]
   }
}

The package.json refers to the below React library in its dependency section -

• react and react-dom are the core react libraries that are used to develop web application.

• web-vitals are general libraries used in supporting application in various web browsers.

• react-scripts are core react scripts used to build and run application.

• @testing-library/jest-dom, @testing-library/react and @testing-library/user-event are testing library used to test the application after development.

• The public folder - contains core file, index.html and other web resources like images, robots, etc., index.html loads our react application and then renders it in user's browser.

• The src folder - contains the actual code of the application.

READ: ReactJS | Architecture

Source code of the application

In this section, we will check each and every source code document of the application.

• The index.js - The entry point of our application. It uses ReactDOM.render method to start the application. The code is as follows -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
      <App />
   </React.StrictMode>,
   document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Here,

React.StrictMode is built-in component that prevents unexpected bugs by analysing the component for unsafe lifecycle, unsafe API usage, depreciated API usage, etc. and then throwing the relevant warning.

• App is our first customized and root component of the application. Every other components will be rendered inside the App component.

The index.css - Used for styling of the entire application. Let's remove all styles and start with fresh code.

App.js - Root component of our application. Let us replace the existing JSX and display simple hello react message as seen below -

import './App.css'; 
function App() { 
   return ( 
      <h1>Hello React!</h1> 
   ); 
} 
export default App;

• App.css - This is used to style the App component. Let's remove all the styles and start with fresh code.

• App.test.js - Used for writing unit test function for our component.

• setupTests.js - Used for setting up the testing framework for our application.

• reportWebVitals.js - It is a generic web application startup code to support all the browsers.

• logo.svg - Logo in SVG format and can be loaded into our application via the import keyword. Let us remove it from the project.

READ: ReactJS | Installation

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about how to create a React application via customized code.

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.