世界一シンプルなReactのサンプル

↓ここReactで出力したものです!
↑ここReactで出力したものです!

一歩目

世界一シンプルなReactのサンプルです
ReactDOMのrenderで「リアクトだよ」と表示しているだけです。
特定の場所(IDがKokoNiKaku)に特定のHTML(<div>リアクトだよ</div>)を書き込め。それがReactDOM.renderの機能です。
これがReactの一歩目です。
sample1
ReactDOM.render(
<div>リアクトだよ</div>
, document.getElementById('KokoNiKaku')
);

トランスパイル

このページのソースを見て下さい。トランスパイルすらしていません。
WEB上で動的にトランスパイルをしています。

そもそもトランスパイルって?

コンパイルは人間が書いたコードを機械がわかるコードに変換することです。
似たようにトランスパイルも変換をしています。ただしこちらは人間がわかる言語を人間が分かる言語に変換しています。例えばTypeScriptなどをJavaScriptに変換しています。人間→機械ではなく人間→人間の横方向にコンパイルすることから横切る意味でトランスパイルと呼ばれています。
現在ではほとんどのブラウザーで最新のJavaScriptのコードやTypeScriptが直接動きます。ただ新しい技術は実装していないから動かないブラウザもああります。
より多くのブラウザーでも動くようにする。そのためにトランスパイルをしています。
古いブラウザーを切り捨てて、最新のブラウザーのみを対象にする。などの場合はわざわざトランスパイルする必要はありません。
トランスパイルするツールには有名どころではBABEL (https://babeljs.io/)などがあります。

JSX

ReactDOM.renderの中でリアクトだよと書いているDIV要素に注目してください。
なんと!HTMLを直接書いています!
これこそがReactです。JavaScriptだけなら
var output='<div>リアクトだよ</div>';
document.write(output);
などと書いていたことでしょう。
ReactはHTMLを混ぜ込めます!それをReactではJSXと呼んでいます。
実際のコードはこのページのソースをみてください。WEB上でトランスパイルしているのでJSXのコードがそのまま見られます。

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
MUI v5 API
エラー対処
HTMl select
戻る

全体目次