-
Notifications
You must be signed in to change notification settings - Fork 0
/
Assignment1.js
83 lines (49 loc) · 1.77 KB
/
Assignment1.js
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React from "react";
import ReactDOM from "react-dom/client";
// Q: Create a Nested header Element using React.createElement(h1,h2,h3 inside a div with class "title")
const h1 = React.createElement('h1', {} ,"I am H1" )
const h2 = React.createElement('h2', {} ,"I am H2" )
const h3 = React.createElement('h3', {} ,"I am H3" )
const title = React.createElement("div", {className:"title"},[h1,h2,h3]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(title)
// Q: Create the same element using JSX
const jsxTitle = (
<div className="title">
<h1>I am H1 by using JSX</h1>
<h2>I am H2 by using JSX</h2>
<h3>I am H3 by using JSX</h3>
</div>
);
root.render(jsxTitle)
// Q: Create a functional component of the same with JSX
const Title = () => (
<div className="title">
<h1>I am H1 by using Functional Component</h1>
<h2>I am H2 by using Functional Component</h2>
<h3>I am H3 by using Functional Component</h3>
</div>
)
root.render(<Title/>)
// Q: Pass attribute into the tag in JSX
const Title2 = () => (
<div className="title" id="titlee">
<h1>I am H1 by using Functional Component</h1>
<h2>I am H2 by using Functional Component</h2>
<h3>I am H3 by using Functional Component</h3>
</div>
)
root.render(<Title2/>)
// Q: Composition of Component (Add a component inside another)
const AnotherComp = () => (
<h1>I am Another Component</h1>
)
const Comp = () => (
<div id="com">
{AnotherComp()}
<AnotherComp/>
<AnotherComp></AnotherComp>
<h2>I am second com</h2>
</div>
)
root.render(<Comp/>)