Let's start building the application from top to bottom. The first two entries in the app are the index.html and index.js files. You can name them main.js or app.js or anything you want. I have a preference of naming index (starting with lowercase) as the first entry of any directory in my apps. That said, all React components should be capitalized when you import them; otherwise, React will thread them as HTML tags. To keep it intuitive, you can have the component names and their files' names capitalized.
In the index.html file, we can have our root DOM element:
<head>
<title>Shopping Cart</title>
</head>
<body>
<div id="root"></div>
</body>
We have a pretty simple HTML with only the <head> and <body> tags, and one <div> that will be the root of the parent top-level component, App.
In...
