React学習 Progate編 その１

注意！！

まったくの初心者なので、備忘録として書いています。
JSもプロゲートをかじった程度です。
間違いや非推奨の記述等ありましたら、ご指摘いただけると幸いです。
むろん、そのようなことが無いよう努めます。

Reactは、Javascript、のライブラリの一つでクライアントサイドを担います。つまり、HPの見た目に関わるということです。

マイルストーン

基本的な Reactの構文を理解していること
JSXを理解すること

今日の要約

ReactはJSのライブラリだけあって構文はほぼ同じ
ただ最初にReactのライブラリを読み込んで、ファイル内で関数を呼び出している

JSXとHTMLはよく似ている。
JSXはrender( )のreturnつまり戻り値のところに記述する。
それ以外の範囲はJSの文法に従う。
ただJSXでは要素をひとまとめにしないといけない。要素をdivタブで囲むのがいいみたい。imgタブなど/で閉じなければいけない。

大まかな手順

//拡張子が .jsのファイルの先頭にReactをインポートする

import React from 'react';

//React.Compomentを継承するクラスを定義する
class クラス名 extends React.Component{
 render() {
   return (
     {/*JSX記述部分*/}
   );
 }
}

//クラスをエクスポートする
export default クラス名;

JSX内にJSを記述するには｛｝の中に記述。
属性やリンク先でも同様。
コメントアウトは｛/* */｝ cssとちょっと似てる。