BLOG

Reactメモ

こんにちは。

先程までもくもく会に参加してまして司会と勉強でお腹すきましたどうもハヤトワンです。

MCしてる人ビッグリスペクト(心から)

ということで、今日の勉強の内容をメモしておきます。

今日はreactの基礎についてやりました。

今までもいろんな教材を通して勉強していましたが(つもり)、ほんとにjsの基礎、そもそもコーディングにある程度なれていないと吸収度がぜんぜん違うなと反省しております。

これまでのReact学習は、逆立ちすらままならないのに頑張って片手ラビットの講座ひたすらやるみたいなことしていたと思います。

基礎やれ基礎ですね。

jsx記法

reactで扱うhtmlはjsxという記法でタグを書きます。

▼ルール

・returnの中が一行以上になると()で囲わないといけない。

・returnするhtmlの内容は一つのタグで囲わないといけない

・その際、divで囲いたくない場合は<React.Fragment></React.Fragment>で囲うとエラーも出ないし、このタグは画面上でレンダリングされない。

・<></>で囲うこともできる。

const App = () => {
  return (
<React.Fragment>
  <h1>hello</h1>
  <p>Goodbye</p>
</React.Fragment>
)
}

もしくは

const App = () => {
  return (
<>
  <h1>hello</h1>
  <p>Goodbye</p>
</>
)
}

コンポーネント基礎

import React from "react";

const App = () => {
  return (
<>
  <h1>hello</h1>
  <p>Goodbye</p>
</>
)
}

export default App;

・import React from “react”;で読み込む

・export default 〇〇;でエクスポートする

・ファイルの拡張子はjsxでもjsと同じように機能する。このファイルはコンポーネントだよと分かるようにjsxをつけるのがおすすめ。

・コンポーネントの命名規則として先頭を必ず大文字から始める

app.jsxはエラーになる

今日はこんな感じ。

それでは良い日曜日を!