React.js Topics
Day 19:
- Introduction of React.js
- Integration of React into an HTML structure
- Including React from CDN Links
- Including React DOM from CDN Links
- JSX
Including React from CDN Links :
Including React DOM from CDN Links :
JSX:
ReactWithCDNLinks.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body id="root">
<script type="text/babel">
// let h1Tag = React.createElement(
// "h1",
// { id: 1, style: { color: "red" } },
// "Welcome to Hema coding school",
// [
// React.createElement(
// "p",
// null,
// "Your presence is very important to us"
// ),
// React.createElement("div", null, "However, guests are limited"),
// ]
// );
function reactReuse() {
let h2TagJSX = (
<h1 id="1" style={{ color: "blue" }}>
Welcome to Hema coding school
<p>Your presence is very important to us</p>
<div>However, guests are limited</div>
</h1>
);
return h2TagJSX;
}
function reactCall() {
let functionCall = (
<div>
{reactReuse()}
{reactReuse()}
{reactReuse()}
{reactReuse()}
</div>
);
ReactDOM.render(functionCall, document.getElementById("root"), () => {
alert("Rendered successfully");
});
}
reactCall();
</script>
</body>
</html>
Interview Questions:
1. What is the role of React.createElement in integrating React into an HTML structure?
2. Why might you choose to include React and React DOM from CDN links instead of installing them locally?
3. Explain how JSX gets transpiled into JavaScript and why this step is necessary.
4 .Walk through the process of rendering a React element into the DOM using ReactDOM.render
No comments:
Post a Comment