JSX & Components
Building blocks of React applications
🧩 What are JSX & Components?
JSX is a syntax extension for JavaScript that looks like HTML. Components are reusable pieces of UI built with JSX. Together, they form the foundation of React, allowing you to create dynamic, interactive interfaces efficiently.
// Simple React Component
function Welcome() {
return <h1>Hello, React!</h1>;
}
Output:
Hello, React!
Key Concepts
JSX Syntax
Write HTML-like code in JavaScript
const element = <h1>Hello</h1>;Components
Reusable UI building blocks
function Button() {}Props
Pass data to components
<Button text="Click" />Composition
Combine components together
<App><Header /></App>🔹 What is JSX?
JSX stands for JavaScript XML. It allows you to write HTML-like syntax directly in JavaScript. JSX makes React code more readable and easier to write by combining markup with logic.
// JSX Example
const element = <h1>Welcome to React</h1>;
// JSX with JavaScript Expression
const name = 'Sarah';
const greeting = <h1>Hello, {name}!</h1>;
// JSX compiles to JavaScript
const element = React.createElement(
'h1',
null,
'Welcome to React'
);Output:
Welcome to React
Hello, Sarah!
🔹 Function Components
Function components are JavaScript functions that return JSX. They're the modern way to create React components, simple to write and easy to understand for beginners learning React.
// Simple Function Component
function Greeting() {
return <h2>Welcome to my app!</h2>;
}
// Arrow Function Component
const Greeting = () => {
return <h2>Welcome to my app!</h2>;
}
// Using the Component
function App() {
return (
<div>
<Greeting />
</div>
);
}Output:
Welcome to my app!
🔹 Components with Props
Props (properties) let you pass data to components, making them dynamic and reusable. Think of props like function parameters that customize how a component looks and behaves.
// Component with Props
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Using Props with Destructuring
function Welcome({name, age}) {
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
}
// Using the Component
<Welcome name="John" age={25} />Output:
Hello, John!
You are 25 years old.
🔹 Multiple Components
React applications are built by combining multiple components together. Each component handles a specific part of the UI, making your code organized, maintainable, and easy to test.
// Header Component
function Header() {
return <header><h1>My Website</h1></header>;
}
// Content Component
function Content() {
return <main><p>Welcome to my website!</p></main>;
}
// Footer Component
function Footer() {
return <footer><p>© 2025 My Website</p></footer>;
}
// App Component combining all
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}Output:
My Website
Welcome to my website!
🔹 Reusable Components
The power of components is reusability. Create a component once and use it multiple times with different props, reducing code duplication and making updates easier across your application.
// Reusable Button Component
function Button({text, color}) {
return (
<button style={{backgroundColor: color}}>
{text}
</button>
);
}
// Using the same component multiple times
function App() {
return (
<div>
<Button text="Save" color="green" />
<Button text="Delete" color="red" />
<Button text="Cancel" color="gray" />
</div>
);
}