More than 1 year has passed since last update.

React学んだこと②

Posted at 2022-08-12

はじめに

自分用です。
書いてある内容は、参考文献に掲載している元動画のほとんど模写です。
自分用に学んだことを殴り書きしているだけなので、見づらいと思います。

HTMLを書いているように、Javascriptを書くことができるもの。
Javascriptの拡張言語であって、テンプレート言語とは異なることに注意

Reactライブラリをimportする
なぜ、毎回「import React from "react"」しないといけないのか？と思っていたけど、このインポートをしないとJSXを使えない。

例
HTML
<div class="test_design">てすと</div>

React
<div className="test_design">てすと</div>

×：image_Path
○：imagePath

Javascriptは"_"が読めないから

{}内に変数を書くことで、jsに変数であることを伝える必要がある

JSXの最上位コンポーネントはかならず一つに留める必要がある。
最上位の要素をdivタグで囲っていたが、HTML的にそのdivタグに意味がないのであれば、書かない方が良い。
そんな時のReact.Fragment

しかし、これを毎回書くのは面倒なので、省略できる
この<>>要素なんだとおもってたけどやっとわかった

例.

  <React.Fragment>
   <p>これは学んだことのメモです</p>
  </React.Fragment>
)```


```return (
  <>
   <p>これは学んだことのメモです</p>
  </>
)```