ReactでHelloWorldをしてみよう!

React
とんぺい
とんぺい

今日は『React』を使ってコーディングする方法を師匠が教えてくれるブゥ!

楽しみだなぁ…

師匠!こんにちは!

師匠
師匠

こんにちは。とんぺいくん。

よく来たね。

それじゃあ早速『React』を使ってHello Worldをしてみよう。

Node.jsをインストールする

師匠
師匠

まずはNode.jsのインストールから始めよう。

LTS版はLong Term Supportの略で長期間サポートを受けられるversionのことを言うんだ。

一方で、最新版はサポート期間は短いが、最新の機能を利用できるversionのことを指すよ。

今回はLTS版をインストールしよう。

とんぺい
とんぺい

ふむふむ…

LTS版をインストールっと…

師匠できたよ!

師匠
師匠

いい感じだね。

では、ターミナルを開いて$ node -vのコマンドを入力しよう。

v10.16.3と言う文字が表示されたら正しくインストールできている証拠だよ。

とんぺい
とんぺい

わかったブゥ!

師匠できたよ!

こんな感じかな?

create-react-appコマンドをインストールする

師匠
師匠

うん。その調子だ。

では次にcreate-react-appをインストールするよ。

create-react-appコマンドとはFacebook(React.js開発元)が公開している、React.jsアプリを素早く作るためのコマンドラインツールのことだよ。詳しくはこの記事を参照するように。

yarn global add create-react-app 

と入力しよう。yarnについてはこちらの記事

とんぺい
とんぺい

yarn global add create-react-app

と入力っと…

できたブゥ!

create-react-appコマンドを実行する

師匠
師匠

よし、じゃあ次は好きなフォルダ(ディレクトリ)を作り、そのフォルダに移動してからこのコマンドを入力しよう。

create-react-app フォルダ名(ディレクトリ名)

ターミナルコマンドに関してはこの記事を見ておくように

とんぺい
とんぺい

じゃあ今回はデスクトップにフォルダを作成してみるブゥ!

cdコマンドでDesktopに移動して

create-react-app helloworldと入力っと!

yarn startコマンドを実行する

師匠
師匠

その画面が出たら、うまくいっている証拠だね。

じゃあ、最後の方に書いてある

cd helloworld

yarn start

コマンドを実行してみよう。

とんぺい
とんぺい

cd helloworld

yarn start

おぉ、勝手にページが立ち上がったブゥ!

src/App.jsのコードを書き換える

師匠
師匠

じゃあ、次はコードエディタを開いて

src/App.jsファイルを編集して

Edit src/App.js and save to reload.

の文言をHello Worldに変更してみよう。

とんぺい
とんぺい

Edit src/App.js and save to reload.Hello Worldに変更…

できたブゥ!

おぉ!画面にも変化が!!

師匠
師匠

うまくいったようだね。

じゃあ今日はここまで。

『React』を使ってアプリケーションを作る際には毎回このように準備をするから、しっかり復習しておくんだよ。

最後にcontrol + cで立ち上がってるlocalhost:3000を止めよう。

とんぺい
とんぺい

はぁーい!

うまくいってよかったブゥ!

早速、家に帰って復習だぁ〜

師匠ありがとう!さようなら〜

師匠
師匠

はい。さようなら。

またいつでも勉強したくなったら、訪ねておいで。

参考

ReactでHelloWorldをしてみよう!

Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

yarnを使ってみた

コメント

タイトルとURLをコピーしました