react components
React puts interactivity first
Traditional html pages put html first and sprinkle in js as a secondary interactivity
React flips this concept - a React component is a JavaScript function that you can sprinkle with markup
Export
1
2
3
export default function Profile() {
return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />;
}
Return statements
Return statements can be written all on one line, as in this component:
1
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
if your markup isn’t all on the same line as the return keyword, you must wrap it in a pair of parentheses:
1
2
3
4
5
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
nest components
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Profile() {
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
import components
import the Movie component from the components folder
1
import Movie from "./components/Movie.js"
This post is licensed under CC BY 4.0 by the author.