Reactの基本構造とJSXについて

初めに！

  • Progateで学習した分野の復習を行うためにアウトプットしていきます。

Reactの基本構造

import React from 'react';

class App extends React.Component {
  render() {
   
    
    return (
      
    );
  }
}

export default App;

  • import React from 'react';はReactをインポートしている

  • class App extends React.Component {}はReact.Componentを継承するクラスの定義を行なっている。

  • render() {}はJSXを戻り値とするrenderメソッドの定義部分。

　　・returnとrenderの間はjavascriptが記述できる。

  • return();は戻り値として画面に表示することができる。

　　・JSXの記述が行える。 　

  • export default App;はクラスのエクスポートを行っている。

JSXについて

  • HTMLとほとんど同じように記述することができる。

  • 注意事項としてretutn要素の内には複数の要素があってはいけない。

    ダメな例
render(){
return(
<h1>ようこそReact</h1>
<h2>おはようございます。</h2>
<h3>こんにちは。</h3>
)
}
良い例
render(){
return(
<div>
 <h1>ようこそReact</h1>
 <h2>おはようございます。</h2>
 <h3>こんにちは。</h3>
</div>
)
}

結語

  • renderとreturnの間の記述はjava scriptを使用する。

  • return内の記述(JSX)はHTMLを使用する。

  • JSXの記述注意点として複数の要素を記述できない。複数記述する場合はdivタグなどで１つの大きな要素を用意してその中で記述を行う。