-

Welcome to the PRODOS frontend application using the React
   
   );
   }
}
export default App;
Let’s edit the mail application file, that is, main.js and add the following script code inside this file:

---

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App.js’;
ReactDOM.render(, document.getElementById(‘prodos-app’));
In the preceding file, we have imported some files that are needed in our React application. You can import other files as per your requirements in
the application.
Finally, let’s add the following script to the.babelrc file before running the application:
{
   “presets”:[“env”, “react”]
}
Let’s run the React application by executing the following command in PowerShell.
PS F:\personal data\book\Full-stack-development-spring-boot-2-react\prodos
react
app> npm start
This will open the web browser and you can navigate to http://localhost:8383/ as shown in the following screenshot:
Figure 7.9: Running the React application
We have created and installed the React application using webpack and babel. We have another simple and easy option to create a React
application. Let’s see how to create the React application using the create-react-app command in the next section.
Using the create-react-app command
In this section, we will create a React application using Facebook’s create-react-app ( https://github.com/facebook/create-react-app ). We need to
follow the given steps to create a React application using the create-react-app command:
1.  Install the create-react-app starter using the following command:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> npm install -g create-react-app
1.  Open PowerShell and run the following command:
PS F:\personal data\book\Full-stack-development-spring-boot-2-react> create-react-app prodos-front-app
The preceding command installs the create-react-app starter and this starter will be used to develop the React application. The following
screenshot displays the output after running the application:

---

Figure 7.10: Creating a React application using the create-react-app command
The preceding screenshot displays some important commands to help you build and run the React application.
1.  Go inside the application folder using following command:
cd prodos
front
app
1.  Start the React application using the following command:
npm start
Now, the application is running and it will open in the browser as shown in the following screenshot:
Figure 7.11: Running react application

---

The preceding screenshot displays the default page created by the create-react-app command. Let us modify the default generated file of our
React application.
Open the generated React application using the VS Code editor by selecting File | Open folder. You can see the following application structure in
the VS Code:
Figure 7.12: Open React PRODOS application in VS Code
Now, open the App.js file from the src folder in the code editor and edit the code as shown in the following code:
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
class App extends Component {
   render() {
   return (
   
   
   
   
   Edit 
src/App.js
 and save to reload.
   
   Welcome to PRODOS application with React
   
   

---

   );
   }
}
export default App;
Now, let’s refresh the browser. You should be able to immediately see the changes made in the App.js file as shown in the following screenshot:
Figure 7.13: Modifying the home page of the generated React application
Now, let’s change the logo of our React application. To do this, just add the logo.jpg file to the src folder of the application and make changes to
the App.js file accordingly as shown in the following code snippet:
import React, { Component } from ‘react’;
import logo from ‘./logo.jpg’;
import ‘./App.css’;
class App extends Component {
   render() {
   return (
   
   
   
   Welcome to PRODOS application with React
   
   
   );
   }

---

}
export default App;
These changes are automatically reflected in the browser as shown in the following screenshot:
Figure 7.14: Changed logo and styles of the React application
Conclusion
In this chapter, we discussed how to set up the environment for the React application. We also configured other supporting tools such as the VS
Code editor for the React application development.
We installed Node.js for running the React application. We created the React application for our PRODOS front-end application and also created
the front-end application using webpack and babel. We also used the create-react-app starter kit to create our first React JS application.
Finally, we run the React application and modified it. Here, we only created the React application and application structure. In the next chapter, we
will discuss some more details about the React components.
In the next Chapter 8: Creating ReactJS Components , we will discuss how to create React components and JSX.
Questions
What is React?
What are advantages of using React?
What are limitations of using React?
How is React useful as a front-end technology?
What is Node.js?
How to create a React front-end application?
Chapter 8
Creating React JS Components
In the previous chapter, we set up the React JS environment of the front-end application development. We installed Node.js and the VS code
editor. In this chapter, we will discuss how to create React JS components and how to manage the React JS component lifecycle. We will also see
how to use props and state in components.
JSX is used by React for templating. In this chapter, we will cover the following topics and create the examples:
React JSX
o JSX and styling

---

o Adding JavaScript expressions
o Using custom attributes tags
React components
o Data flow in React components
o Event flow in React components
Creating React components for our front-end application
o Using multiple React components
o Using properties (props) in React components
o Using state in React components
o Creating Header and Footer components to the Prodos front-end application
Handling lists with React
Handling events with React
Handling forms with React
o Using input text fields in form with React components
The React component lifecycle
Let us discuss each topic in detail.
React JSX
JSX is another way of writing the JavaScript code. JSX means JavaScript and XML tags. It is used to declare the UI component in your React
application. JSX is not mandatory to use with your React application but it provides a lot of benefits as the following:
It makes development easier and faster to write templates because JSX looks like a regular HTML.
JSX provides a very clean way to declare your UI component.
JSX is also type-safe because its code is compiled with JavaScript. And most of the errors can be caught at the compilation time.
JSX has faster rendering.
The JSX code gets created in the UI component and this code is transpiled and converted to small and lightweight objects and these objects are
used to represent UI elements for your front-end application. Let’s take a look at the following code, that is, a JSX code:
import React from ‘react’;
class ProdosApp extends React.Component {
   render() {
   return (