😽

[React]component使い方

2023/07/13に公開

React

初心者

JSX

tech

component

componentはreactでいろんなところで使えます。

今回はモーダルをcomponentで作りましょう。

モーダル

<button>click!</button>
<div className="modal">
  <h4>名前</h4>
  <p>年齢</p>
  <p>性別</p>
</div>

.modal{
  margin-top : 20px;
  padding : 20px;
  background : #eee;
  text-align : left;
}

こんな感じですね。

component

App functionの中にあったhtmlを外部にfunctionを作って入れてください。
component名は英語の大文字で始まった方がいいです。

function App (){
  return (
    <div>
        <button>click!</button>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h4>名前</h4>
      <p>年齢</p>
      <p>性別</p>
    </div>
  )
}

これだけではhtmlが消えちゃいます。
funtionの名前をタグとして入れます。

function App (){
  return (
    <div>
        <button>click!</button>
        <Modal></Modal>
    </div>
  )
}

これで完成です。
モーダルの機能はここでかくにんしてください。
modal機能

component

Discussion