-
Notifications
You must be signed in to change notification settings - Fork 0
/
1.1.tsx
107 lines (93 loc) · 6.36 KB
/
1.1.tsx
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
// - `export default` should be used in importing and exporting
// - React components are functions, but the name of it should start with a capital letter
// - Non-one-liner markup should be enclosed with parentheses on return
/* - React sees <section> as HTML tag because it starts with lowercase, React sees <Profile> as a
component because it starts with uppercase. */
/* - Components are regular JavaScript functions, so you can keep multiple components in the same file.
This is convenient when components are relatively small or tightly related to each other.
If this file gets crowded, you can always move a component to a separate file. */
// - Never nest a definition of a component into each other
/* Components all the way down
- Your React application begins at a “root” component.
- If you use the framework Next.js, the root component is defined in pages/index.js
- Components are a handy way to organize UI code and markup, even if some of them are only used once.
- React-based frameworks take this a step further. Instead of using an empty HTML file and letting
React “take over” managing the page with JavaScript, they also generate the HTML automatically
from your React components. This allows your app to show some content before the JavaScript code loads.
*/
/********** Challenge 1 of 4: Export the component *********/
/* //
function Profile() { //
return ( //
<img //
src="https://i.imgur.com/lICfvbD.jpg" //
alt="Aklilu Lemma" //
/> //
); //
} //
*/ //
//
export default function Profile() { //
return ( //
<img //
src="https://i.imgur.com/lICfvbD.jpg" //
alt="Aklilu Lemma" //
/> //
); //
} //
/////////////////////////////////////////////////////////////
/********** Challenge 2 of 4: Fix the return statement *****************************/
/* //
export default function Profile() { //
return //
<img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; //
} //
*/ //
//
export default function Profile() { //
return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; //
} //
/////////////////////////////////////////////////////////////////////////////////////
/********** Challenge 3 of 4: Spot the mistake ***************/
/* //
function profile() { //
return ( //
<img //
src="https://i.imgur.com/QIrZWGIs.jpg" //
alt="Alan L. Hart" //
/> //
); //
} //
//
export default function Gallery() { //
return ( //
<section> //
<h1>Amazing scientists</h1> //
<profile /> //
<profile /> //
<profile /> //
</section> //
); //
} //
*/ //
//
function Profile() { //
return ( //
<img //
src="https://i.imgur.com/QIrZWGIs.jpg" //
alt="Alan L. Hart" //
/> //
); //
} //
//
export default function Gallery() { //
return ( //
<section> //
<h1>Amazing scientists</h1> //
<Profile /> //
<Profile /> //
<Profile /> //
</section> //
); //
} //
////////////////////////////////////////////////////////////////