React - Hello World And Files/Folders Structure

In this article, we are going to create a Hello world application and discuss React files and folder structure.

This is the fourth article of React series,

1. Introduction, Advantages and Disadvantages 
2. How to Install React 
3. Introduction To Package.json file

We are going to cover

1. Create First React Application
2. Understand Files and Folder structure

Create First React application

I assume that you have a ready setup to start with the project. If not please read the “How to Install React” article first and then resume.

• Create a folder
• File - Open folder - Select newly created folder in step 1.

• Click on Terminal tab – New terminal.
• Execute npx create-react-app first-react-app command

“first-react-app” is the name of the application.

Please note react application naming condition,

1. the name should not be in lower case
2. the name should be less than 214 characters
3. Hyphens and underscores can be used.

You will get the error “* name can no longer contain capital letters” if the name is in upper case.

Once the above command executes successfully. Execute the below commands,

cd first-react-app
npm start

Output

Your first default application is created and loaded in the browser. We will change some code to implement the Hello world application which will discuss and implement during files and folder structure introduction.

Now we will learn about the files/folder of the project before starting with any code changes.

Files/ Folder Structure

It is very important to have a better understanding of files and folders that reside in the react project.

Once the project is successfully created using the “npx create-react-app <name>” command. We can see the below files and folder in react project.

Package.json

We already discuss the package.json file in the article. In simple words, we can say,

Package.json = Metadata associated with project + All Dependencies with version + scripts.

Package-lock.json 

This file is automatically generated. This file makes sure of the consistency of installation and dependencies. It contains an exact version of dependencies, subsequence dependencies, and a sequence of installation.

Node_modules

This folder contains all modules and dependencies that are installed. It will be generated when you execute the below commands.

Npm start
Create-react-app 

Public 

This folder contains an index.html file. As react us single page application, index.html file is responsible for UI. It means we have only a single Html file in the entire application.

This file has a root div element which will be used on the index.js file.

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

src

 This is the source folder in which you will work most. This folder has components, JSON file, js file, and CSS files.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

In the above code, the App component will be load in the root div element of the index.html file using RectDOM.Render method.

App.js

This is the default component called the Application component. We will change the code like below to write our first hello world application.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        Hello World
      </header>
    </div>
  );
}

export default App;

App.css

CSS file relates to the App component.

Here we have created a simple Hello world react application and also learn important files and folders to start with react. I hope you enjoy this article and find it useful.