index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</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
// var React = require("react");
// var ReactDom = require("react-dom");
import React from "react";
import ReactDom from "react-dom";
// ReactDom.render(What to show, Where to show it, cb);
// ReactDom.render(<h1>Hello World</h1>, document.getElementById("root"));
ReactDom.render(
<div>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</div>,
document.getElementById("root")
);
/*
var h1 = document.createElement("h1");
h1.innerHTML = "Hello World!";
document.getElementById("root").appendChild(h1);
*/
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
//Create a react app from scratch.
//It should display a h1 heading.
//It should display an unordered list (bullet points).
//It should contain 3 list elements.
import React from "react";
import ReactDom from "react-dom";
ReactDom.render(
<div>
<h1>To Do List</h1>
<ul>
<li>study</li>
<li>work</li>
<li>sleep</li>
</ul>
</div>,
document.getElementById("root")
);'프로그래밍 > Web' 카테고리의 다른 글
| Styling and Attributes in JSX (0) | 2024.04.22 |
|---|---|
| how to use javascript expression in JSX (0) | 2024.04.19 |
| 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 |
| Authentication Level 3 - Managing Cookies and Sessions (0) | 2024.04.11 |