Vaidikalaya
Privious Next

Create First App

In this chapter, we will learn how to create an app in ReactJs. So first we will create the app using npx and then we remove some unnecessaries files and folders from the react app which will make it easy to understand its working and code syntax. 

So follow the below steps and create a react app.

Step 1: Create an App using npx:

Open your terminal or (Visual Studio code) and run the following command to create a new React app using Create React App:

npx create-react-app my_app

This command sets up a new React project with a default folder structure and necessary configurations.

Step 2: Navigate to the Project:
cd my_app
Step 3: Run the App:

Start the development server by running:

npm start

This command launches the app in your default web browser. You can access it at http://localhost:3000/. The page will automatically reload if you make edits.

The following output will be displayed in the browser

Your app is ready. Now we will explore its directory structure and remove unnecessaries files and folders and write our first code in react.

This is the default directory structure.

Now delete all the unnecessaries files like:

Src directory: App.css, index.css, reportWebVitals.js, setupTests.js, App.test.js, logo.svg 

Public directory: favicon.ico, logo192.png, logo512.png, manifest.json, robots.txt

This is the fresh directory structure after deleting all unnecessaries.


Now understand and write pieces of code in these files.

index.html

The index.html file serves as the entry point for a React app. It's the first HTML file that a web browser loads when a user visits a React website or application.

This file contains a

element with an id attribute like "root" where React will inject and manage the dynamic content of the application.

<div id="root">div>

When the React application starts, it finds this specified element in the index.html file and injects the rendered React component tree into it.

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First App</title>
</head>
<body>
  id="root"></div>
</body>
</html>
index.js

The entry point for the application where ReactDOM or React Native is used to render the main component.

No need to more change this file. if you deleted the reportWebVitals.js file from src directory then only comment on removing the reportWebVitals() method and its imported file.

Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
//import reportWebVitals from './reportWebVitals';

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

//reportWebVitals();
App.js 

This is the first component of react app that represents the root of the application.

App.js
function App() {
  return (
    <div>
      <h1>Hello Vaidikalayans</h1>
    </div>
  );
}

export default App;
Output


Privious Next