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

3730 ワード
コンポーネント JavaScript React JSX JavaScript テキストリンク

自己紹介

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

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 ぜひフォロー待っています❗️