The src/index.js is the main file of our project. In it we import all the components that are going to be used to build our app. This includes other JavaScript modules and CSS (src/index.css).

In this file we usually import modules from the src/App.js file, and use them to build components and insert them into the HTML file:

import App from './App';

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

In the public/index.html file we can find the actual HTML file that is going to be used to build our application. This file is where all out components will be inserted to.

The src/App.js file is a special file that acts as the root of all the rest of components that we are going to create:

The rest of components will be under the src/components/ directory.

Workflow for creating components

1. We create a component and export it:

src/components/ExpenseItem.js

function ExpenseItem() {
    return <h2>Expense item</h2>
}

export default ExpenseItem;

1. We import the component insto our root component, and we use it as a custom HTML element:

src/App.js

import ExpenseItem from './components/ExpenseItem';

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>This is also visible! 😅</p>
      <ExpenseItem></ExpenseItem>
    </div>
  );
}

export default App;

<aside> 💡 It's very important to use a starting capital letter on our component's HTML element name because thanks to this React will detect that this element is actually a component.

</aside>

<aside> 💡 Our component must return only one HTML root element.

</aside>