What is Components in React

1. What is Components in React ?

• A react, Components are the independent and reusable building block Used to create user interfaces(UI). They Function similarly to JavaScript functions but operate in isolation To return JSX (JavaScript XML), which describes what should appear on The screen. You build small parts Separately then combine them to create a full website or app.

Examples:

• Button
• Navbar
• Card
• Footer
• Product Box
• Login From

Each of these can be a separate React component.

Simple Example
Normal HTML like:
<button>welcome!</button>

React Component

function Button() {
  return <button>Welcome!</button>;
}

export default Button;

-Button is the component name
-Component names must start with CAPITAL letters
-Component must return one parent element
-It's return UI using JSX
-You can reuse it anywhere

Types of Components

There are two primary ways to define a components in React

1. Functional Component (Most Common)
2. Class Component (Old Method)

2. What is React Folder Structure ?

• A React folder structure is they way files and folders are organized inside the React project.

If you create a project using Vite

npm create vite@latest

You'll get somethings like this :

Important Folders & Files

1. node_modules/

Contains:

• Installed packages
• React library
• Dependencies

Example:

-React
-React DOM
-Vite packages

If you Never edit this folder manually.

2. public/

Stores static files:

• Images
• Fonts
• Videos
• Icons

3. src/ (Most Important)

This is where most contains React code is written.

Usually contains :

• Components
• Hooks
• pages
• CSS
• API calls

4. assets/

It's stores projects assets.

• Images
• Icons
• Videos

5. styles

CSS files.

• Navbar.css
• home.css
• globle.css

6. App.jsx

Main component.

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

export default App;

This is control application UI.

7. main.jsx

Entry point of the app.

8. index.html

Main HTML file.

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

React renders insides this root div.

8. package.json

Project information and dependencies.

contains:

• Scripts
• Packages
• Versions