React components are the building blocks of your application. Let’s create your first component and understand how JSX works.
Creating a Component
A React component is a JavaScript function that returns JSX. Here’s a complete example:
const firstName = "angels";
const lastName = "mejia";
const juegos = ["forrnite", "gd", "metro"];
const isActive = false;
const address = {
zipCode: "ABC-123",
country: "abasolo",
};
export function MyAwesomeApp() {
return (
<div data-testid="div-app">
<h1 data-testid="firts-namee">{firstName}</h1>
<h3>{lastName}</h3>
<p className="miClaseFavorita">{juegos.join(",")}</p>
<h1>{isActive ? "activoxnds" : ":,vv"}</h1>
<p
style={{
backgroundColor: "red",
borderRadius: 10,
padding: 10,
}}
>
{JSON.stringify(address)}
</p>
</div>
);
}
Key Concepts
Component Structure
Export the function
Use export function to make your component available to other files.
Return JSX
Components must return JSX elements wrapped in a single parent element.
Use curly braces for JavaScript
Any JavaScript expression can be embedded in JSX using {}.
Displaying Variables
You can display any JavaScript variable inside JSX:
const firstName = "angels";
// In JSX:
<h1>{firstName}</h1>
Variables in JSX are enclosed in curly braces {}. This tells React to evaluate the JavaScript expression.
Arrays in JSX
To display arrays, you typically need to convert them to a string:
const juegos = ["forrnite", "gd", "metro"];
// Join array elements with a comma:
<p>{juegos.join(",")}</p>
Conditional Rendering
Use ternary operators to display different content based on conditions:
const isActive = false;
<h1>{isActive ? "activoxnds" : ":,vv"}</h1>
Displaying Objects
Objects cannot be directly rendered. Use JSON.stringify() to display them:
const address = {
zipCode: "ABC-123",
country: "abasolo",
};
<p>{JSON.stringify(address)}</p>
For production apps, create separate elements for each object property instead of using JSON.stringify().
Styling Components
You can style components in two ways:
CSS Classes
Use className instead of class:
<p className="miClaseFavorita">{juegos.join(",")}</p>
Inline Styles
Pass a JavaScript object to the style prop:
<p
style={{
backgroundColor: "red",
borderRadius: 10,
padding: 10,
}}
>
{JSON.stringify(address)}
</p>
CSS property names use camelCase in JSX: backgroundColor instead of background-color.
Testing Attributes
Add data-testid attributes to make your components easier to test:
<div data-testid="div-app">
<h1 data-testid="firts-namee">{firstName}</h1>
</div>
Using data-testid attributes helps you write more reliable tests that won’t break when you change CSS classes.