2019.02.16この記事は約4分で読めます。ミミウサReactの勉強中です。初心者が簡単に作れるサンプルコードを探しています。フォームの作り方を覚えたいです。本記事では、このようなプログラミング勉強中の方に使っていただけるサンプルコードを紹介します。「プログラミングができるようになりたくば、とにかく書け」などと言われますね。筆者も同様ですがプログラミング初心者は、長いコードだと途中で心が折れがちです。初心者だとプログラミング作品を完成させたという成功体験に乏しいからですね。今回は、そんな筆者含めてReact初学者のあなたのために「40行以内で何かが完成する」サンプルを紹介します。フォーム編ということで、フォームに入力し送信ボタンを押すと、alert()ダイアログで入力した値が表示されるというサンプルです。Reactのコンパイル環境を作成するところから説明します。ContentsReactのコンパイル環境を作るプリコンパイル環境を作るReact勉強用サンプルコード【フォーム編】フォームのアプリを実行するあとがきReactのコンパイル環境を作るheaderにReact(とJSX)用のJavaScriptのライブラリ読み込みの文章を追加してライブラリを読み込むと、コンパイルに時間を要します。ページが表示されるまでの時間もかかってしまいます。よって、React/JSXの使用においては、プリコンパイル環境を使い、React/JSXのコードをコンパイルしておくのが一般的。「プリコンパイル環境」を作るためのアプリが「create-react-app」。create-react-appここでは”-g”(グローバル環境へのインストールオプション)を付けているので、ディレクトリはどこにいてもOK。2.「create-react-app」でプロジェクトを作るここでは「form_practice」というプロジェクト名前とします。form_practice「form_practice」フォルダ内に次のようにアプリ一式が作成される。※プロジェクトを作るところはちょっと(1分くらい)時間かかります。この状態ですでにアプリとなっている。build「form_practice」フォルダ内に「build」というフォルダが出来上がる。hsとサーバーのアドレスが提示される。サーバーのアドレスへブラウザからアクセスファイルを編集せずともインストールした時点ですでに、アプリとなっているので、デフォルトのアプリがブラウザ上に表示される。各ファイルを直接編集して自分のアプリとして作成する。今回は、フォームを表示させるだけのアプリとします。練習用として、フォームに入力し送信ボタンを押すと、alert()ダイアログで入力した値が表示されるというサンプルです。ここでは、入力できるのは数字のみとし、数字以外は入力できないようにしているものです。前項、コンパイル環境構築の手順2で「form_practice」フォルダを作成し、その後の手順は以下に従ってください。「src」フォルダ内に「NumberForm.js」を作成する。サンプルコードは次のとおりです。「src」フォルダ内の「index.js」を書き換える。サンプルコードは次のとおりです。プログラム(アプリを)公開する」に従い公開すると、ブラウザ上に次のようにフォームが表示されるかと思います。フォームに数字を入力します。送信をクリックするとalert()ダイアログボックスに入力した値「00」が表示されます。数字以外の文字はフォームに入力自体できないことを確認します。スポンサーリンクあとがきReact初学者用に、フォームに入力した値をダイアログボックスに表示させるサンプルコードを紹介しました。このように短いけれども何か動くものが完成するというサンプルで”プチ成功体験”を積むと、プログラミングの勉強が苦にならないようです。プログラミングは趣味としても面白いので、一度も書いたことがない方も一度チャレンジしてみてくださいね。【侍エンジニア塾】総合評価は40点!初心者が入学した体験談と口コミ「侍エンジニア塾」にプログラミング初心者の筆者が入会した体験に基づく口コミ。40点という総合評価です。React基本、勉強中です。「Babelって何?」「Reactって何?」というところを、プログラミング初心者に向けてソースコード付きで説明しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。4回目→現在パラレルワーカー。頂いた仕事はなんでもやるため特定の職種というものがなく、名刺に肩書は入れていません。torutsume.net.タイトルとURLをコピーしました。