React Tutorial
Components and JSX
Create function components, return JSX and compose a page from small reusable UI units.
Concept
A React component is a JavaScript function that returns UI markup. Component names begin with a capital letter so React can distinguish them from lowercase HTML elements.
JSX is a syntax extension that keeps rendering markup near the JavaScript logic that produces it. JSX expressions use curly braces, and a component must return one parent element or a fragment.
Example
function Welcome() {
const learner = "Mango Learner";
return <h1>Hello, {learner}</h1>;
}
export default function App() {
return <Welcome />;
}
Type the example yourself and change at least one value. Small experiments reveal syntax and behavior faster than passive reading.
Practice Tasks
- Create a Profile component that returns a heading and paragraph.
- Render the same component twice inside App.
- Use a fragment to return two sibling elements.
Key Takeaways
- Components are reusable UI functions.
- Component names start with a capital letter.
- Curly braces embed JavaScript expressions in JSX.