in JSX, javascript expression is in {}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/javascript"></script>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
const fName = "Angela";
const lName = "Yu";
const num = 7;
ReactDOM.render(
<div>
<h1>Hello {fName + " " + lName}!</h1>
<p>Your lucky number is {num}</p>
</div>,
document.getElementById("root")
);
another example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/javascript"></script>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
const name = "Angela";
const currentDate = new Date();
const year = currentDate.getFullYear();
ReactDOM.render(
<div>
<p>Created by {name}</p>
<p>Copyright {year}</p>
</div>,
document.getElementById("root")
);'프로그래밍 > Web' 카테고리의 다른 글
| React Components (0) | 2024.04.23 |
|---|---|
| Styling and Attributes in JSX (0) | 2024.04.22 |
| Introduction to JSX and Babel (0) | 2024.04.16 |
| Authentication Level 5 - OAuth: Implement "Sign In with Google" (0) | 2024.04.15 |
| Authentication Level 4 - Hide your Secrets with Environment Variables (0) | 2024.04.12 |