React js Setup and Project Structure Practice Questions with Solutions

Introduction

Setting up a React.js project is the first practical step toward building React applications. Before writing components, developers need a proper development environment and project structure. In this chapter, you will practice creating a React project, understanding important files and folders, running the development server, and identifying the role of files such as package.json, src, public, and main.jsx. These questions are designed to build your React fundamentals step by step. React js Setup and Project structure practice questions with solutions help to understand the concepts.

1. How do you create a new React.js project?

A React project can be created using modern tools such as Vite.

Run:

npm create vite@latest my-react-app

Then select:

Framework: React
Variant: JavaScript

After that, move into the project folder:

cd my-react-app

Install the required packages:

npm install

Start the development server:

npm run dev

You will receive a local URL where you can open your React application.

Answer: Use Vite to quickly create a modern React project.

2. What is Vite in React.js?

Vite is a modern development tool used to create and run frontend projects, including React applications.

It provides:

• Fast project setup
• Fast development server
• Modern JavaScript support
• Quick updates during development
• Production build support

For example:

npm create vite@latest my-app

This command creates a new project using Vite.

Answer: Vite is a fast and modern build tool commonly used for React development.

3. What is the purpose of the package.json file?

The package.json file contains important information about a JavaScript project.

It can include:

• Project name
• Version
• Scripts
• Dependencies
• Development dependencies

Example:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite"
  }
}

The scripts section allows you to run commands such as:

npm run dev

Answer: package.json manages project information, scripts, and dependencies.

4. What is the purpose of the src folder in a React project?

The src folder is where most of the application’s source code is stored.

It commonly contains files such as:

src/
├── App.jsx
├── main.jsx
├── index.css
└── assets/

React components, JavaScript logic, CSS files, and other application code are generally placed inside this folder.

For example:

function App() {
  return <h1>Hello React</h1>;
}

export default App;

Answer: The src folder contains the main source code of the React application.

5. What is the purpose of main.jsx?

main.jsx is commonly used as the entry point of a Vite React application.

It connects the React application to the HTML page.

Example:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Here:

document.getElementById('root')

selects the HTML element where the React application will be rendered.

Answer: main.jsx starts the React application and renders the root component.

6. What is App.jsx in a React project?

App.jsx commonly contains the main application component.

Example:

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <p>Welcome to React.js</p>
    </div>
  );
}

export default App;

The App component is then imported into main.jsx.

import App from './App.jsx';

Answer: App.jsx commonly contains the main component of the React application.

7. What is the public folder used for?

The public folder is commonly used for static files that need to be served directly.

For example:

public/
└── logo.png

A public asset can be referenced using a root-relative path:

<img src="/logo.png" alt="Logo" />

The exact default files can vary depending on the React project setup.

Answer: The public folder is used for static assets that are served directly without being processed through the application source code.

8. How do you start a React development server?

After creating a React project and installing its dependencies, use:

npm run dev

For example:

cd my-react-app
npm install
npm run dev

Vite will start the development server and show a local address, commonly similar to:

http://localhost:5173/

Open that address in your browser.

Answer: npm run dev starts the React development server in a typical Vite project.

9. Identify the important files and folders in a React project

Consider this project structure:

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
└── vite.config.js

Now identify their purposes:

Answer: Understanding these files helps you navigate and manage a React project correctly.

10. Create and run a simple React project from scratch

Let’s combine the concepts from this chapter.

Step 1: Create the project

npm create vite@latest my-react-app

Choose:

React
JavaScript

Step 2: Enter the project

cd my-react-app

Step 3: Install dependencies

npm install

Step 4: Start the project

npm run dev

Step 5: Update App.jsx

function App() {
  return (
    <div>
      <h1>My First React App</h1>
      <p>I am learning React.js.</p>
    </div>
  );
}

export default App;

The browser will display:

My First React App
I am learning React.js.

Basic project flow

index.html
     ↓
main.jsx
     ↓
App.jsx
     ↓
React Components

Answer: A React application starts from the HTML document, React is mounted through main.jsx, and the App component becomes the main part of the user interface.

Key Takeaways

• Vite provides a fast way to create a React project.
• npm install installs the project’s required dependencies.
• npm run dev starts the development server in a typical Vite project.
• The src folder contains the main application source code.
• App.jsx commonly contains the main application component.
• main.jsx is commonly the entry point that renders the React application.
• package.json contains project information, scripts, and dependencies.
• The public folder is commonly used for static public assets.
• Understanding project structure makes React development easier.
• A good project structure helps keep React applications organized.

FAQs

1. Is Vite required to learn React.js?

No. React can be used with different development tools. However, Vite is a popular modern choice for creating React projects.

2. What command creates a React project with Vite?

You can use:

npm create vite@latest my-react-app

Then select React as the framework.

3. What command starts a Vite React project?

Use:

npm run dev

4. What is the difference between App.jsx and main.jsx?

App.jsx commonly contains the main application component, while main.jsx is responsible for starting the React application and rendering the component into the HTML page.

5. What is the src folder in React?

The src folder contains the main source code of the React application, including components, JavaScript files, CSS, and assets.

6. Why is package.json important in React?

It stores project information, dependencies, and scripts used to manage and run the project.

7. Can I create React projects without Vite?

Yes. React can be set up using other tools and frameworks. Vite is simply one commonly used option for creating a React application.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar