Writing more Complex Elements using JSX
We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:
index.html
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Application</title>
<!-- React Import -->
<script
src="https://unpkg.com/react@18/umd/react.production.min.js"
crossorigin >
</script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
crossorigin >
</script>
<!-- JSX Import -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let name = "Mouiz G";
let day = new Date().getDate();
let month = new Date().getMonth();
let year = new Date().getFullYear();
let heading = <h1>Welcome, {name}!</h1>;
let paragraph = (
<p>
The date is {day}/{month}/{year}.
</p>
);
let main = (
<div>
{heading}
{paragraph}
</div>
);
If you look at the above code, we have created the element main using two other elements, heading and paragraph.
We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 2
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
