はじめてReactを勉強するときに使えるサンプルコード【フォーム編】40行以内で完成

 

ミミウサ
ミミウサ

Reactの勉強、一日一コードのペースです。

ノロノロですけども。

世間一般でいうところでは「プログラミングができるようになりたくば、とにかく書けー」の法則に従い、書いてます。

意味が理解できていないので、本ブログを利用して「アウトプットすることで理解する」というのを狙ってますが、どうなることやら

今回は、フォームを作ってみる編で、こちらも「40行以内で何かが完成する」サンプルです。

Reactのコンパイル環境を作る

headerにReact(とJSX)用のJavaScriptのライブラリ読み込みの文章を追加してライブラリを読み込むと、コンパイルに時間を要します。

ページが表示されるまでの時間もかかってしまいます。

よって、React/JSXの使用においては、プリコンパイル環境を使い、React/JSXのコードをコンパイルしておくのが一般的。

「プリコンパイル環境」を作るためのアプリが「create-react-app」

プリコンパイル環境を作る

1.「create-react-app」をインストール

$ npm install -g create-react-app

ここでは”-g”(グローバル環境へのインストールオプション)を付けているので、ディレクトリはどこにいてもOK。

2.「create-react-app」でプロジェクトを作る

ここでは「form_practice」というプロジェクト名前とします。

$ create-react-app form_practice

「form_practice」フォルダ内に次のようにアプリ一式が作成される。

※プロジェクトを作るところはちょっと(1分くらい)時間かかります。

formpractice0

この状態ですでにアプリとなっている。

3. プログラム(アプリを)公開する

$ npm run build

「form_practice」フォルダ内に「build」というフォルダが出来上がる。

4.「build」フォルダに移動し、サーバーをインストール・起動

$ cd build
$ npm install -g http-server
$ hs

とサーバーのアドレスが提示される。

5. サーバーのアドレスへブラウザからアクセス

ファイルを編集せずともインストールした時点ですでに、アプリとなっているので、デフォルトのアプリがブラウザ上に表示される。

各ファイルを直接編集して自分のアプリとして作成する。

今回は、フォームを表示させるだけのアプリとします。次項へ続く。

React勉強用サンプルコード【フォーム編】

練習用として、フォームに入力し送信ボタンを押すと、alert()ダイアログで入力した値が表示されるというサンプルです。

ここでは、入力できるのは数字のみとし、数字以外は入力できないようにしているものです。

1.「form_practice」フォルダを作成

前項、コンパイル環境構築の手順2で「form_practice」フォルダを作成し、その後の手順は以下に従ってください。

$ create-react-app form_practice

2.「form_practice」へ移動しstart

$ cd form_practice
$ npm start

3. 「src」フォルダ内に「NumberForm.js」を作成する。

サンプルコードは次のとおりです。

4. 「src」フォルダ内の「index.js」を書き換える。

サンプルコードは次のとおりです。

フォームのアプリを実行する

前項目「3. プログラム(アプリを)公開する」に従い公開すると、ブラウザ上に次のようにフォームが表示されるかと思います。

フォームに数字を入力します。

 

送信をクリックすると

alert()ダイアログボックスに入力した値「00」が表示されます。

また、数字以外の文字はフォームに入力自体できないことを確認します。

あとがき

Reactには「ファイルをひとつひとつ作成してアプリとしてまとめ上げる」という作業は必要なく、
「create-react-appで”アプリの元”を一式あげるからこれを編集して別のアプリにしてね」というコンセプトであることは、理解しました。

 

コメント

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