JSX
HTMLライクな記述方法
import React from 'react'; // ReactライブラリのImport
const BlueButton = () => {
const imgPath = '/sample.webp' // キャメルケースで記述する
const clickMe = 'click me'
return (
<> // 最上位コンポーネントは並列にできない ※1
<img src={imgPath} /> // 閉じタグが必要
<button className={'btn-blue'}>{clickMe}</button> // {}内はJavaScriptの世界になる
</>
)
}
export default BlueButton
※1 … <div></div>で囲むと無駄なタグが増えるので、<></>という空のタグが登場した
BACK