よく耳にするReactを自分なりにまとめてみた...

#自己紹介
むちゃんです。
関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です (2020.7.4現在)

イベントなど回っているので是非大阪辺りの方は会いましょう！

#1...REACTとは？

Facebook社が開発したWebのUIを作るためのJavascriptのライブラリ。

[公式ドキュメント]:https://ja.reactjs.org/

##2...コンポーネントとは?
[見た目]+[機能]を合わせた物。

1. 見た目(View)
2. 機能(controller)

###Webの構造(コンポーネントツリー)

・オブジェクトの階層構造のこと

###なぜコンポーネントを使うのか？

1. 再利用をするため
2. 分割統治するため(お互いの依存関係をなくす)
3. 変数に強くなるため

###コンポーネントの種類

・Functional Component(ファンクショナルコンポーネント)

・Class Component(クラスコンポーネント)

##3...DOMについて

###そもそもDOMって何？

〜Document Object Model (DOM)=要はインターフェース

HTMLにアクセスする窓口みたいな物
構造や見た目、コンテンツを変更

###Virtual DOMとは
〜Reactが管理しているDOM

ブラウザのレンタリングと別管理
->効率よくDOM操作をできる

・通常のDOM操作

document.getElemntById('hoge').innerText='hoge'

・ReactのVirtualDOM操作

render(
<div id="hoge">hoge</div>
)

##JSXについて(トランスコンパイル)

〜Javascropt内でHTMLっぽくる

ReactDOM.render(
<div ClassName={hoge}>
  <h1>HelloWorld</h1>
</div>
)

###4...JSXの基本文法での注意点!!

・Reactのパッケージインストールが必要

import React from "react"

・ClassはClassNameと記述

・１つで完了するタグは終了タグをつける

#あとがき
今回は自分なりにReactについて簡潔にまとめてみした

次回はstateやライフサイクルについてより詳しくまとめてみたいと思います。

Twitter @HomgMuchan ぜひフォロー待っています❗️