イベントハンドラーのイベント名はキャメルケースで記述 function App() { return ( <div onClick={()=>{alert("clicked")}}> TEST </div> ); }

const bluelogProps = {title: "TITLE", message:"MESSAGE"} function App() { return ( <div> {/* 個別に入れ込んで渡す*/} <Bluelog title={"asfasdfasdfasdf"} message={"ssdfaf"} /> {/* スプレッド演算子でまとめて渡す*/} <Bluelog {...bluelogProps} /> <FuncSample/> </div> ); } function Bluelog(props) { return( <div> <h1>{props.title}…</h1></div>

{/* 子コンポジション*/} function ColoredText(props){ return ( {props.children} {/ 渡ってきたJSXにアクセスしてレンダリング /} ); } {/*親コンポジション*/} function Bluelog(props) { return( {/子コンポジションにXMLを渡す/} {props.title} {props…