In the Prerequisites chapter, we have seen that in order to build a reactjs application, we need to have Node.js installed in our system.

So make sure that you have installed Node.js and follow the next step: How to install and setup ReactJs App.

Installation and setup

React has a feature that you can install your react app by using create-react-app

Installation method 1

Open your terminal in the directory you would like to create your application. Then run this command:

npx create-react-app my-react-app

In place of the “my-react-app” in this command line, you can replace and write the name of your app.

Then you can move the my-react-app directory by using this command:

cd my-react-app .

Installation method 2

There is an another way to create your react app directly without specifying its name in the command line, like this:

npx create-react-app .

In this case, first go to your directory and create a new folder with the name of your app. Then enter that folder and open your terminal and run the above command.

React App naming criteria

When creating your React App and specifying its name, you must follow this criteria: you should keep all the letters small & there should be no spaces in it. You can use hyphen (-) instead of space.

File structure

After successfully completing the React app installation, we get the default folder structure of React.

It’s something looks like this:

Let’s understand the whole folder structure of our React App here.

my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── ...other static assets like (Images, txt & json files, etc.)
├── src/
│ ├── index.js
│ ├── App.js
│ ├── index.css
│ ├── App.css
│ ├── components/
│ │ ├── Component1.js
│ │ └── Component2.js
│ ├── assets/
│ │ └── ...other assets like images, fonts, etc.
│ └── ...other application files
├── package.json
├── package-lock.json
├── .gitignore
└── ...other configuration files

node_modules: This folder is automatically generated. It contains project dependencies. You don’t need to edit this folder, it is managed by npm.
public: This folder contains static files/assets like images, logos, robots.txt, other json files, and the main index.html for the application. Here the index.html file loads our react app and renders it on the browser.
src: The src folder is known as the source folder. It contains the main source code of the react app.
index.js: Inside the src folder there is an index.js file. This is the entry point of the React app, where the root component (App.js) is rendered into the DOM.
App.js: This is the root component of the React app.

Index.css: This CSS file is used to set default style of overall layout like default font styles, margins, paddings, etc. You can create CSS variables here.
App.css: This CSS file is used for our root component App.js.

components: You can create a components folder inside the src folder. Here we will create reusable react components, which we use throughout the React App. We will discuss this in detail in the React Components chapter.
package.json: This is the configuration and dependencies file. This file contains important metadata about the project, including its name, version, dependencies, scripts, and more.
package-lock.json: It’s automatically generated by npm for package version consistency. You don’t need to edit anything in this file.
.gitignore: Specifies files and directories that should be ignored by Git version control.
README.md: Project documentation, providing an overview of the project and instructions on how to run it.

Run the React App

It’s time to run our React Application. So you can run the app by invoking the start script configured in the package.json file.

Use this command:

npm start

Compiled successfully!

You can now view my-react-app in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.143.226:3000

Note that the development build is not optimized. To create a production build, use npm run build.

webpack compiled successfully

 

Then it will start the application in the local system and a new browser window will automatically pop up with http://localhost:3000/

If the browser does not pop up automatically, then open your favorite browser and go to http://localhost:3000/

Output in browser:

Customize the code

Now you have your React app running, you can start customizing it:

The main source of customization will be in the src/App.js file. You can edit this file to create and customize React components and their behavior.

Firstly when you navigate the src/App.js file it looks like:

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

function App() { return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org" target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

Anything you change here will be rendered on the HTML page.

I have changed the code. I have removed the unnecessary part and only added a <h1>
element.

Make sure you have saved the file after changes!

ProTips: You can also Turn Auto save afterdelay in VScode Editor, so that you don’t need to manually save the file after any changes.

import './App.css';

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

export default App;

After making changes the output looks like this:

You can create new components in separate files within the src directory and import them into App.js

The src/App.css file allows you to add custom CSS styles for your components.

You can modify the public/index.html file to add or change the page title, add meta tags, or link to external stylesheets, etc.