React 備忘録

使い方

• インポート
• クラス定義
• メソッド定義（戻り値 jsx）
• エクスポート

import React from 'react';
class App extends React.Component {
  render() {
　　const text ="定数";
　　return (
       {/*jsx*/}
    );
  }
}
export default App;

JSXとは

• JavaScriptの拡張言
• HTMLライクな記述
• 拡張子.jsx / js

階層構造で書く

React.Fragment

HMTLタグとして出力されない

return(
  <React.Fragment>
   <p>React入門</p>
   <p>React入門</p>
  </React.Fragment>
)

React.Fragmentの省略形

return(
  <>
   <p>React入門</p>
   <p>React入門</p>
  </>
)

【エラー】非階層構造：Pタグの並列

return(
  {/*コメントはこう書く*/}
  <p>React入門</p>
  <p>React入門</p>
)