Posted at

Reactを使ってJSXの内容をレンダリングする(create-react-app)(React基礎講座1)


はじめに

webページにレンダリングをする必要最小限の React App を実装するのに必要なことを書いていきます。


開発環境


  • codesandbox(POPULAR TEMPLATESはReactでCreateする)

不要なファイルは削除しています。


import について

import自体は、ES2015(ES6)から導入されたメソッドで、これを使うと、JSのパッケージ(モジュール)の中身(関数や変数やクラスなど)を使えるようになります。

なので、読み込めばこのファイルindex.jsで定義されていない関数や変数やクラスなどの、JSのモジュールをindex.jsで使えるようになります。


index.js

import React from "react";


これは、reactというパッケージ(モジュール)から、Reactimportしていると言うことになります。上記を追加することで、Reactを読み込んでrenderメソッドなどを使えるようにしています。


render() について


index.js

import { render } from "react-dom";


これは、react-domというパッケージ(モジュール)から、renderというページにレンダリングするメソッドをimportしていると言うことになります。

render() は2つの引数を必要とします。

render(JSX, target)


  • JSX: JSの拡張言語で、HTMLのようなもの

  • target: 作成したReactアプリを、どこのDOM Elementsに紐づけるかの指定

と言うことで、結果、以下のようになります。

render(<h1>Hello, React</h1>, document.getElementById('root'))

このよう書くと、React(のrennder)が、index.htmlにあるタグの中の<div id="root"></div>の中に、JSXで記入した内容をレンダリングします。


コード


index.js

import React from "react";

import { render } from "react-dom";

render(<h1>Hello, React</h1>, document.getElementById("root"));



結果

スクリーンショット 2019-08-04 00.06.07.png


JSX は HTML ではない

JSXですが、とてもHTMLに近いシンタックスですが、JSのファイルのなので、本来HTMLはかけないし、実際、HTMLではありません。

では、なぜwebページにHTMLぽく表示されるのかというと、babelなどの開発環境がJSXReact Element(JSのオブジェクト)にトランスパイルしてくれているからです。JSのオブジェクトなので、変数代入や、console.logでの表示など、JSの操作が可能になります。

JSのオブジェクトになった段階で、render()メソッドでレンダリングを可能にしています。

例えば、JSXを変数(jsx)に代入して、console.logさせることも可能です。

delicate-butterfly-nvry9_-_CodeSandbox.png


jsにおけるオブジェクトとは

詳細には記述しませんが、オブジェクトとは、名前をキーにした配列です。Rubyでいうハッシュです。連想配列と言ったりもするJSのデータ型の1つです。


参考


  • 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛