Component

Source: Dev.to

What is Component?

A component in React is an independent, reusable piece of user interface that controls a part of the application’s view. Components are usually written as JavaScript functions or classes that return JSX (HTML‑like syntax).

Types of Components

• Functional Components – Simple JavaScript functions that return JSX. These are mostly used in modern React.
• Class Components – ES6 classes that extend React.Component. They were used earlier to manage state and lifecycle methods.

What is XML?

XML (Extensible Markup Language) is a markup language used to store, transport, and organize data in a structured format. It uses tags to describe data and is both human‑readable and machine‑readable.

Where XML is Used

• Data exchange between systems
• Configuration files
• Web services (SOAP)
• Document storage

What is JSX?

JSX (JavaScript XML) is a syntax extension of JavaScript that allows developers to write HTML‑like code inside JavaScript. It is mainly used in React to describe the user interface.

Example

function Welcome() {
  return 
## Hello User
;
}

Why JSX is Used

• Makes UI code easier to read and write.
• Allows combining JavaScript and HTML together.
• Helps React create UI elements efficiently.

Difference between JS and JSX

JavaScript (JS) is a programming language used to add logic, functionality, and interactivity to web applications.

JavaScript (JS) Example

const element = document.createElement("h1");
element.innerText = "Hello User";

JSX (JavaScript XML) is a syntax extension of JavaScript used in React to write UI elements using HTML‑like syntax.

JSX Example

function App() {
  return 
## Hello World
;
}
export default App;