🔰
初めてReactを触って
はじめに
今回はReactを初めて触って、知った知識や注意点をまとめていきたいと思います。
同期に「Reactについて書いてくださいよ」と言われたのもありますが・・・
Reactについて
reactの特徴は3つ❗️
-
reactは コンポーネントを効率よく更新して再レンダーする
-
JSX構文で書く
-
<div />でビルド時にReact.createElement('div')に置き換えてくれる↑ おかげで
React.createElementを省略して書けるようになった❗️
差分描画について
今までの描画:
画面の一部の変更でも全部を変更していた。
Reactが出てきた後；
変更が必要な部分、差分を仮想DOM上で設定し、本物のDOMに反映させることで本物DOMに変更で必要な場所だけの処理だけで済み、コスト、反映時間が短くてすむ
DOM（Document Object Model） は、HTMLファイルのソースコードのことではなく、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたDOM（ツリー）を指します。
なぜHTMLタグのクラス設定はclassNameでするのか？
A. JavaScriptとHTMLのそれぞれのClassを分けるため
JavaScriptとHTML構文を一緒に書いたときに、どっちのクラスかを明確にするために明記している
JSXを使用する時に大事なこと（トラハックを参考）
-
React を使用する場合、Reactをインポートする
import React from 'react';
-
キャメルケースで描く
例：他の言語の場合
const image-Path = 'image/image.png';
例：Reactの場合
const ImagePath = 'image/image.png';
上記のような名前を指定する時に単語と単語を分ける際に、ハイフンなどで入れていたがReactだと認識しないため、単語を分ける際にはラージ、スモールを使って判断させる
-
閉じタグが必要
普通のHTMLの場合：
<img src={imagePath} alt={TRIAL} >
Reactの場合：
<img src={imagePath} alt={TRIAL} />
-
必ず階層構造
最上位コンポーネントは並列にできない
-
react.Fragmentで囲む
HTMLタグとして出力されない
間違い
//間違い
return (
<p>新・日本一わかりやすいReact入門</p>
<p>JSXの基本文法を解説します。</p>
)
正解
//正解
return(
<React.Fragment>
<p>新・日本一わかりやすいReact入門</p>
<p>JSXの基本文法を解説します。</p>
</React.Fragment>
)
//'React.Fragment'は省略可能
return(
<>
<p>新・日本一わかりやすいReact入門</p>
<p>JSXの基本文法を解説します。</p>
</>
)
最後に
今回はReactを初めて触りましたが、やってみると楽しいです❗️❗️
今後は少しづつ自分が勉強したことをここに落としていけばと考えています🤔
やってみないことには身につかないです。
Discussion
続編に期待！