In the last tutorial you installed all the tools we'll need to create a React app, and opened the source code of the template project in your code editor. Let's walk through each of the given files in the template project and see what they do.

The README.md file at the bottom has a brief description of this repository and how to use it. The .md extension stands for markdown, a common text editing syntax to format text. It is not code; markdown is to make text readable for humans.

In general you should use a README.md in a project to give an overview of what your project does, how to use it, and any other information you think would be useful for people interested in your code.

The package.json file records all the packages that this project depends on i.e. dependencies. It is what npm uses to manage versions of these dependencies which your project depends on and download them when other people try to run your app on their computers.

package-lock.json also tracks dependencies but in greater depth (dependencies of dependencies etc).

The .gitignore file specifies files and directories (folders) that should be ignored by the git version control system. We'll talk more about it later.

The public folder contains static assets like images, icons and html for your web app. The most important one is index.html.

This is the html file that will begin rendering your web app in a browser. Open this file and find the following tag:

<div id="root"></div>

This is called the "root" DOM node of your app which is where your React app will render. DOM stands for "Document Object Model" and keeps track of all the elements (e.g. <div></div>) that your HTML page wants to render in your browser.

Most of your time building a React app will be spent on files in the src folder (source code). Let's open this folder and go through the contents.

The src/assets/ folder contains some images, svg icons and dummy data that we'll use for this tutorial's project.

The src/styles/ folder contains some stylesheets (.css files) made for this project which we'll use to enhance the appearance of the components we'll be making. You won't need to understand the css to work through this tutorial series.

src/index.js creates a root ReactDOM node linked to the root DOM node we saw in public/index.html.

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

You won't need to understand the details behind ReactDOM and how it interacts with DOM; its whole purpose is to handle the transformation of React code to HTML elements so you don't have to. Just understand that this root node renders the App component, which is the one part of all this starter source code that we actually care about in this tutorial.

Notice how the App component is imported from the ./App. ./App is a pathname where . means "same directory as this file" and App refers to the file called App.jsx.

In the children we will start working in src/App.jsx on real React code!