scrimba
React Fundamentals - Components & Props
Code Organization with Import/Export
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Code Organization with Import/Export
AboutCommentsNotes
Code Organization with Import/Export
Expand for more info
index.js
run
preview
console
import React from 'react';
import ReactDOM from 'react-dom';

function EmojiButton(props) {
return (
<button>
<span role="img">{props.emoji}</span>
{props.label}
</button>
)
}

function Header() {
return (
<header>
<h1>PetLand</h1>
<nav>
<EmojiButton emoji="👤" label="Login" />
</nav>
</header>
)
}

function Card(props) {
return (
<div className="card">
<h2>{props.title}</h2>
{props.children}
</div>
)
}

function App() {
return (
<div>
<Header />
<main>
<Card title="Welcome to PetLand!">
<em>Find your dream pet</em>
</Card>
<Card title="What pets would you like to see?">
<div>
<EmojiButton emoji="😸" label="Cats" />
<EmojiButton emoji="🐕" label="Dogs" />
</div>
</Card>
</main>
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));
Console
/index.html
-11:40