ReactでTODOアプリをつくる

1.Reactとは

ReactとはFacebook社が開発したjavascriptで書かれたフロントエンドフレームワークです。Reactといえば、一般に上記フレームワークのことですが、React Native、React VRといったモバイルアプリやVRアプリ開発に使える派生形フレームワークも存在します。

2.環境構築

動作環境
windows10
node.js 10.15.3
create-react-app 3.0.

3.準備

1.下記URLからNode.jsをインストールしてください。
https://nodejs.org/en/download/

2.インストールしたNode.jsに含まれているnpmコマンドを使用して、
create-app-reactをインストールしてください

 

4.アプリの作成

1.workspace作成

インストールしてきたcreate-react-appのコマンドを使用して雛型を作成します。

2.componentsフォルダ作成

作成したreact-todo/srcフォルダ内にcomponentsフォルダを作成します。

3.ファイル修正

追加、修正を加えるファイルは以下の5つです。

・components/App.jsx
・components/Form.jsx
・components/List.jsx
・src/index.js
・public/index.html

基本的な動きとしてこのアプリがどう動いているかというと
まず index.jsx → App.jsx という形でコンポーネントの読み込みが行われます。
そこからForm.jsx,List.jsxをApp.jsxの子コンポーネントとしてイベント実行時に状態を変更させる処理を行います。

各コンポーネントはstateとして状態を保持しており、各コンポーネント間でpropsを受け渡すことで状態を変更することができます。

以下、ソースとその詳しい解説です。

index.jsx

1行目でReact本体をインポートしています。
2行目のReactDOMはレンダリングに必要なパッケージでrender()などを使うのに必要になります。

これはid=”root”の中に<App />要素を入れ込む、
つまりApp.jsxに書いた記述がブラウザ上のページindex.htmlに反映されるという意味です。
Reactの特徴である仮想DOMによって変更した箇所を随時レンダリングされ画面に反映します。

App.jsx

初期作成時にsrc/App.jsとしてつくられるファイルをComponents内に移動して拡張子を書き換えます。

ここではコンストラクタ初期値の割り当てと
イベントをclassComponentのメソッドとして設定しています。
またコールバック関数として実行する際に関数内の「this」が機能するように、
constructor()内でthisをbindしておく必要があります。

2行目のe.preventDefault()では画面遷移を防止します。React では false を返してもデフォルトの動作を抑止することができません。明示的に preventDefault を呼び出す必要があります。
3,5行目のe.target.(name属性).valueでフォームの中身を取り出すことができます。
4行目のsetState({todo: this.state.todo})でtodoを上書きしています。

Form.jsx

Reactではconst Form = (props) => ()のようにコンポーネントを関数として記載することができる。Stateless Functional Componentと呼ばれる。
また今回はsiimpleというcssを外部から呼びだして使用しています。

List.jsx

 

index.html

siimpleを呼び出す以外はデフォルトのままです。

ここまで終わったら、

アプリケーションのルートディレクトリに移動して、npm -start を実行。
http://localhost:3000にアクセスすると開発中のページが確認できます。

5.参考

公式ドキュメント
一番参考にしたやつ
状態とかについての解説

About the author

さいとー

Add Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

By さいとー

最近の投稿

アーカイブ

カテゴリー

タグクラウド

コーポレートサイト