React 入門 (#1) ～DOM操作とReactライブラリ導入～

3720 ワード
dom JavaScript React JavaScript テキストリンク

この記事では、Reactの基礎について学んでいきます。

ソースコードとブラウザ表示を中心に進めていきます。
ソースコードには、そのコードが何を表しているのかを話し口調（下の赤枠）で書いているので
そこに注目して読むとより理解が深まると思います。

例）

楽しんで学習をすすめていきましょう。

１，JavaScriptを記述してDOMの操作を行ってみます。

基本的なHTMLのソースコードです。

index.htmlにリンクしているindex.js(JavaScript)です。

２，実際に上のソースコードの動きを確認してみましょう。

とてもシンプルな動きですね。
これが、JavaScript によるDOM操作になります。

３，Reactライブラリの導入

書き換えたindex.htmlのソースコード

上のサイトから、追記したソースコードをコピーしてください。
もしくは、こちらをコピーしてください。

index.html
  //追記 ReactライブラリとReactDOMライブラリ
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

Reactを使うには、
ReactライブラリとReactDOMライブラリを使います。
これで、準備完了です。

index.jsファイルに移動して次のコードを記述します。

４，ブラウザ表示

index.htmlにはdivタグしかないですが、ちゃんと表示されていますね。

次回は、

今回は、Reactの機能の部分を簡単に紹介しました。
次回は、Reactを学ぶうえで大事なBabelとJSXに触れたいと思います。
リンク