<div id="root">
<!-- Element 들어갈 부분 -->
</div>
const root = document.getElementById("root");
// Btn
function Btn(props) {
return <button style={{
backgroundColor:"tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10
}}>
{props.text}
</button>
}
// Btn2 : shortcut
function Btn2({text, big}) {
return <button style={{
backgroundColor:"green",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10,
fontSize: big ? 18 : 10
}}>
{text}
</button>
}
// App
function App() {
return (
<div>
<Btn text="Save changes" />
<Btn text="Continue" />
<Btn2 text="Save changes" big={true} />
<Btn2 text="Continue" big={false} />
</div>
);
}
ReactDOM.render(<App />, root);
View Compiled
This Pen doesn't use any external CSS resources.