ReactはJavaScriptのすごい版なんでしょ程度の理解の人が書いた

ReactはJavaScriptのすごい版なんでしょ程度の理解の人が書いた:

Reactについて

ReactはFacebookが作ったJavaScriptのライブラリ。

公式ドキュメント見ると拡張性とか柔軟性とか書いてあるけど、そのあたりは他のライブラリを理解していないと実感できないと思いスルー。

とにかくReact使わないより使うほうが画面もっとかっこよく自由にできるんでしょ、的なモチベーションで勉強しています。

ReactはJSXを使う

JSXはJavaScriptの構文を拡張機能のこと。

とはいえ、JavaScriptのようにそのままWebブラウザで読み込めるものではなく、

Webブラウザで読み込む前にコンパイル（Webブラウザで読み込めるJavaScriptに変換する）する必要がある。

つまり、JSXで書いたコードの動作を確認するためにはコンパイラのインストールが必要となる。

JSXで画面に表示するための要素の作成

HTMLタグの単位で作成する。

JavaScriptの変数定義と似ている。

JSX.js

const h1 = <h1>Hello world</h1>; 

これをコンパイルすると、下記に変換される。

CompiledJSX.js

var h1 = React.createElement( 
  "h1",          // HTMLタグ名 
  null,          // idやclassなどの属性(今回何もしていしていないのでnull) 
  "Hello world"  // HTMLタグの中身 
); 

'null'の部分にはHTMLのidやclassなどの属性が入る。

ここでは何も属性していないので'null'になっている。

また、複数行でHTML要素を定義するためには'()'で区切る必要がある。

JSX.js

const a1 = ( 
  <a href="hello_world.html"> 
    <h1>Hello world</h1> 
  </a> 
); 

これをコンパイルすると、下記に変換される。

CompiledJSX.js

var a1 = React.createElement( 
  "a",                          // HTMLタグ名 
  { href: "hello_world.html" }, // idやclassなどの属性(今回はhref='hello_world.html'を追加する例) 
  React.createElement(          // HTMLタグの中にHTMLを入れるときは、React.createElementの中にReact.createElementを入れる。 
    "h1", 
    null, 
    "Hello world" 
  ) 
); 

１つのJSXには１つのHTMLタグだけ

下記はHTMLタグが２つはいっているのでエラーとなる。

JSX.js

const a1 = ( 
    <h1>Hello world</h1> 
    <h2>This is JSX expression</h2> 
); 

HTMLタグを２つ以上記載する場合は何かのHTMLタグないにぬいぐるむ必要あり。

JSX.js

const a1 = ( 
    <div>                     // 別に<div>でなく<section>とか<article>とかでもOK 
      <h1>Hello world</h1> 
      <h2>This is JSX expression</h2> 
    </div> 
); 

作成した要素を画面に出力する

ReactDOMというDOMを扱うライブラリを使う。

DOMはHTMLなどのドキュメントの要素を触ったりするための道具みたいなもん。

画面に文字とかを出力するのはその中でも'render'というメソッドを使う。

JSX.js

ReactDOM.render( 
  <h1>Render Text</h1>,               // 表示する内容 
  document.getElementById('article')  // 表示する対象。あらかじめ作成されている「idが'article'となっているHTMLタグ」内に表示する。 
); 

constで定義したHTMLを１つめの引数に入れることもできる。

JSX.js

const myList = ( 
  <ul> 
    <li>list1</li> 
    <li>list2</li> 
  </ul> 
); 
 
ReactDOM.render( 
  myList, 
  document.getElementById('app') 
);