freecodecamp で学んだことを記事にしていきます。
freeCodeCampを0から進めてます。
今回は、下記の内容までを記事にできたらと思います。
- Create a Simple JSX Element
- Create a Complex JSX Element
- Add Comments in JSX
- Render HTML Elements to the DOM
- Define an HTML Class in JSX
- Learn About Self-Closing JSX Tags
基本的には、Progateの無料版までのところの復習と追加といったところでした。
Create a Simple JSX Element
この章では、
- Reactの歴史・Reactとは
- JSXとはツールなのか
について勉強しました。
Reactの歴史・Reactとは
Reactは、Facbookによって作られたオープンソースのビューライブラリだそうです。
モダンなWebアプリケーションのユーザーインターフェイス(UI)をレンダリングするための優れたツールのようです。
JSXとはツールなのか
Reactは、JSXと言われるJavaScriptの構文拡張を使用しており、JavaScript内で直接HTMLを記述することができました。
それの利点として、
- HTML内でJavaScriptのプログラムを最大限に引き出せること
- コードの可読性を保つことができること
では、JSX内でJavaScriptを記述するにはどうすればいいのか
JSとして扱いたいコードを中括弧 ‘ { } ‘で囲むだけのようです。
ただ、JSXは有効なJSではないので、JavaScriptにコンパイルする必要がある。
よく使うものとしては、Babelがあるようです。
Create a Complex JSX Element
JSXでは、
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
</div>div要素で囲まれている必要があるそうです。
divを削除すると、JSXはトランスパイルされなくなります。ReactコンポーネントでJSX要素を返すときにも適用されるため、覚えておく必要がありそうです。
下記のような書き方はしないようです。
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>Add Comments in JSX
JSXでのコメントアウトの仕方は、{/* */} になるようです。
Render HTML Elements to the DOM
Reactでは、ReactDOMと呼ばれるReactのレンダリングAPIを使って、このJSXを直接HTML DOMにレンダリングすることができるようです。
ReactDOMは、Reactの要素をDOMにレンダリングするためのメソッドを提供しているようです。
ReactDOM.render(componentToRender, targetNode)第一引数はレンダリングしたいReact要素またはコンポーネントで、第二引数はコンポーネントをレンダリングしたいDOMノードのようです。
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
ReactDOM.render( JSX , document.getElementById('challenge-node') )※ReactDOM.render()はJSX要素の宣言の後に呼び出す必要があるようです。
変数を使用する前に宣言しなければならないのと同じです。(と書いあったのでなるほどと思いました。)
Define an HTML Class in JSX
JSXでは、HTMLのクラスを定義する際にclassという単語を使えなくなりました。
この理由は、「JavaScriptではclassが予約語であるため」なようです。
その代わり、JSXではclassNameを使用するようです。
※JSXでは、すべてのHTML属性とイベント参照の命名規則がキャメルケースになります。例えば、JSXのクリックイベントは、onclickではなく、onClickです。同様に、onchangeはonChangeとなるようです。
Learn About Self-Closing JSX Tags
HTMLでは、ほとんどすべてのタグに開始タグと終了タグの両方がありました。
例：<div></div>
ただ、HTMLには「自己閉鎖タグ」と呼ばれる、他のタグを開始する前に開始タグと閉鎖タグの両方を必要としない特別な例がありました。
たとえば、改行タグは<br>または<br />と書くことができますが、<br></br>と書いてはいけませんでした。
JSXの場合、ルールは少し異なるようで、JSXのどの要素も自閉タグで書くことができ、すべての要素は閉じなければなりません。例えば、改行タグは、トランスパイル可能な有効なJSXであるためには、常に<br />と書かなければならないようです。
ただ、<div>は<div />または<div></div>と記述することができるようです。
今回は、Progateの無料版でも勉強した内容の復習と追加の勉強をしました。
Reactの勉強を進めて、今、思うことは、Web制作会社の時にもこれ知っていれば楽になるなと、、、思うようになってきています。
まだ、勉強段階ですが、静的なLPやサイトであれば積極的に使っていくべきなのかなと思います。
あまりに、デザインに凝ったものだと難しいかもですが、シンプルなものであるほど恩恵を受けれそうな印象でした。
それでは、また次回、、、