はじめに
HTML,CSS,Javascriptの基礎を学習済みの方向けのブログとなります。
少しでもわかりやすく書いていこうと思いますので、
よろしければ最後まで目を通していただければ嬉しいです。
Reactとは
ReactとはFacebook社が開発したweb上のUI (ユーザーインターフェース)を作ることに特化したJavaScriptのライブラリです。
現在、FacebookやInstagram、Yahoo!にも使用されています。
今回のゴール
Reactが実際に動くところまでのコーディングができたらゴールです。
開発環境
・macOSで作業します
・開発ではVisual Studio Code（以下VSCode）を使用します。
ダウンロードがまだの方はこちらからをダウンロードしてください。
・Bootstrapを使用します。こちらにアクセスし、「BootstrapCDN」に記載されている
<link rel="stylesheet"〜〜〜〜〜〜
<script src="https://〜〜〜〜〜〜
の部分をコピーしておきます。
実装
- VSCodeの画面左上「ファイル」→「新規作成」の順番で新規ファイルを作ります。
- ファイル名を「sample01.html」とし保存します。
- 1行目に「html:5」と記述しtabキーを押下、するとHTMLが展開されます。
- 2行目の「en」を「ja」に変えます。
- 6行目のtitleには「初めての練習」と記述します。
- <head>の中にbootstrapのサイトでコピーしたコードをペーストします。
- <body>の中に「div.container」と記述しtabキーを押下します。
- 7で作成したdivの中に「div.text-center」と記述しtabキーを押下し、divに「id=”display”」を追加で記述します。
- 8で作成したdivの中に「p」と記述しtabキーを押下、pタグの中には「テストです」と記述します
ここからReactを使います
- こちらにアクセスし、ステップ２という項目に記述されているコードから
<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>をコピーし、「body」タグの一番後ろにペーストします
- 「body」タグの一番後ろに下記コードを記述します。
<script>let dom = document.getElementById(‘display’)let el = React.createElement(‘p’,{},’Reactが動きました！’)ReactDOM.render(el, dom);</script>
これにて無事にReactが動きました。
最後に
今回はReactを動かすところまでをご紹介しましたが次回はボタンを設置し実際に動かしてみたいと思います。
最後まで目を通してくださった皆様、ありがとうございました。
最近のコメント