JSX

React

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