If you wish to add react into an existing app refer

Note that with the above steps, we have created a new React app. If you wish to add React
into an existing app, refer to steps here: -
app.html .
Lab Exercise 1: Understand the Project File Structure
Step 1 : The HTML file loaded after you launched the app using “npm start” is index.html
under myreactapp/public/ , together with image and configuration files. In index.html , a
<div> element with id “ root ” is created as follows, in which React elements will be rendered:
<div id="root"></div>
Step 2 : The JavaScript files to render React elements are located under myreactapp/src/ .
Find index.js and App.js in this directory and open them in a text editor.
Step 3 : In index.js , it first loads React and ReactDOM modules:
import React from 'react';
import ReactDOM from 'react-dom';
and css file:

import './index.css';
and exported components from other JavaScript files ( App.js and registerServiceWorker.js ):
import App from './App';
import registerServiceWorker from './registerServiceWorker';
index.js mainly renders the App component in the ' root ' <div> element (in index.html ).
registerServiceWorker() is used in production environment to register a service worker to
serve assets from local cache (i.e., to allow the app to load faster on subsequent visits in
production environment — see ).
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Step 4: In App.js , it creates a class component App :
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
The component returns a <div> element of class “App”, and the styling rules on this class
(given in App.css ) are applied to this <div> element. Note that the class attribute becomes
className in React. The <div> element contains a <header> element of class "App-header"
and a <p> element of class "App-intro". Within the header, there is an <img> element and a
<h1> element. All these elements render the page view in Fig. 6.
At last, App.js exposes the App component to other modules using the following statement:
export default App;
Lab Exercise 2: Create our Web Page Using React
We are going to modify index.js and App.js to create the page as shown in Figures 1-5.
Step 1 : In index.js , replace the content by the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import CommodityPage from './App';

).