React jsx記法とか

今日からReactの勉強を始めた。
今日はjsx記法とかをやった。
最初はReactをインポートするところからやったけどこれは自動でやってくれることがほとんどらしいからあんま自力でやることはないらしい。
そのあとgetElementByIdとかあったけどそれもとりあえずは今は型みたいなもんだと思って大丈夫らしい。
コンポーネントは関数のことを指しててjsxとかのファイルのことを言ってるわけじゃない。

root.render()の中にhtmlタグが書ける。
複数書くときは<div>か<>フラグメントで囲む。
root.render()の中はhtmlタグを書くというよりはほかのファイルをインポートしてきて、インポート先の関数の中にあるhtlmタグで色々表示する。
htmlファイルの中のrootのところに差し込むみたいな感じ。
htmlファイル(root)<(getElementByIdあたり)index.jsx(root.render(<ファイル名/>))<(export 関数)コンポーネント  みたいなイメージ。


注意することは
・Reactのコンポーネントはパスカルケースで書く(コンポーネントのファイル名は特に制限はない)
・ファイルは1つのコンポーネント(関数)ごとにつくる

htmlタグは先頭を小文字で書いてReactのコンポーネントは先頭を大文字にすることで区別してるらしい。
あとエクスポートは自分で書くけどインポートはファイル名をタグみたいな形で書けば自動でやってくれるからそれがすごい便利。


いいなと思ったら応援しよう!