【1から始めるReact】ストップウォッチを作る

なべっち なべっち
2019.01.25

こんにちは。なべっちです。
 
前回はcreate-react-appを使ったReactの環境構築を行いました。
今回はReactでストップウォッチを作っていきます。

環境構築の記事はこちら
【1から始めるReact】概要と環境構築

 

プロジェクトの準備

新規プロジェクトの作成

まずは、create-react-appでreact-stopwatchプロジェクトを作成します。

 

styled-componentsの導入

Reactでのスタイリング方法は色々ありますが、今回はstyled-componentsを導入します。
styled-componentsはCSS in JSのライブラリでJSでスタイルを記述します。

 

アプリケーションの起動

準備が出来たらアプリケーションを起動します。

 

実際に作成する

今回はTimer・Button・Appの3つのコンポーネントを組み合わせて作っていきます。
 

Timerコンポーネント

src/Timer.jsを新規作成します。

Reactコンポーネントの定義方法には、大きく分けてFunctional ComponentとClass Componentがありますが、Functional Componentでは、stateやrefを使用できません。
stateは、コンポーネントの状態を管理するもので、this.stateで初期値をセットして、this.setStateで更新します。

Buttonコンポーネント

src/Button.jsを新規作成します。

propsは親から渡される情報です。
Buttonコンポーネントでは、propsによって背景色を変更しています。
 

Appコンポーネント

src/App.jsを書き換えます。

Appコンポーネントでは、TimerエレメントとButtonエレメントをimportして、組み合わせます。
Buttonコンポーネントには表示テキストや背景色などをpropsとして渡します。
 
refはコンポーネントを識別する属性であり、this.refsでそれぞれにアクセスが出来ます。
 

完成

完成です!お疲れ様でした!

スポンサーリンク

POPULAR

なべっち

なべっち

Frontend Engineer