【React】stateの使い方覚え書き用ミニアプリ

【React】stateの使い方覚え書き用ミニアプリ

Reactの初歩的な記述のみのアプリですが、stateの使い方などをすぐ忘れちゃうので備忘録的に載せておきます。

Reactミニアプリサンプル

[box icon=”” text=”Reactミニアプリのデモ”]異性の収入によって変化する恋心アプリ[/box]

“create-react-app”のインストール

create-react-appを使用しています。
※Node.js (version 4以上)がインストールされていることが前提になります。

グローバルにインストールすることが推奨されているようです。

npm install -g create-react-app //グローバルにインストール
create-react-app --version //バージョン確認

次にアプリを作成するディレクトリにアクセスして下記実行

[ディレクトリパス] create-react-app [作成するアプリの名前]
//例 \xxx\xxx\myapp> create-react-app myapp

開発段階は下記コマンドを利用して作成していきます。
3000番ポートでReactアプリを起動してくれます。ブラウザのアドレスバー→localhost:3000

npm start //開発用コマンド

ディレクトリ構成

自動生成されるファイルからいらないものを削除したり、画像を追加したり…で下記構成になっています。

.
├── .git
├── .gitignore
├── README.md
├── package.json
├── package-lock.json
├── public
│   └── index.html //←これ編集するよ!
└── src 
    ├── index.js //←これ編集するよ!
    ├── App.js //←これ編集するよ!
    ├── App.css //←これ編集するよ!
    ├── woman-excited.png //アプリで使用する画像
    ├── woman-smile.png //アプリで使用する画像
    ├── woman-default.png //アプリで使用する画像
    ├── woman-annoyed.png //アプリで使用する画像
    ├── woman-woman-goodbye.png //アプリで使用する画像
    └── man.png //アプリで使用する画像

各ファイルのコード

public/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ReactのStateの使い方覚え書き用ミニアプリ</title>
    <meta charset="utf-8" />
    <meta
      name="description"
      content="ReactのStateの使い方覚え書き用用のミニアプリです"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.js

import React from 'react';
import man from './man.png';
import './App.css';

class App extends React.Component{
  constructor(props) {
    super(props); //extendsを使用する場合これが必要(定型文として覚えちゃおう)
    this.state = {income: 400};
  }
  changeEmotionState(amount) {    
    if(amount <= 0) { //収入無いんかい!     
      return 'woman-goodbye';
    }
    if(amount < 300) { //~299万より少ない!いまいちな年収やなぁ     
      return 'woman-annoyed';
    }
    if(amount < 600) { //300~599万 まぁ普通に生活できそう!    
      return 'woman-default';
    }
    if(amount < 1000) { //600~999万 ちょっとしたハイソサエティ      
      return 'woman-smile';
    }    
    return 'woman-excited'; //1000万~ セレブ!!
  }

  render() {
    const {income} = this.state; //this.state.income→incomeと短く記述するため this.stateの中にincomeがあれば取り出してくれる。
    return(
      <div className="wrapper"> //もし<div>で囲みたくなければ<React.Fragment>を使用して囲む
        <div className="man"> 
        <p><img src={man} className="man" alt="男性" /></p>
        <p className="income">年収 : <span>{income}</span> 万円</p>
        <button className="btn-down" onClick={this.downIncome}>年収 DOWN</button>
        <button className="btn-up" onClick={this.plusIncome}>年収 UP</button>
        </div>
        <div className={this.changeEmotionState(income)}></div>
      </div>
    ); 
  }
  //エラーが出ないようにアロー関数を使おう!
  plusIncome = () => {
    const {income} = this.state;
    this.setState({income: income + 100});
  }
  downIncome = () => {
    const {income} = this.state;
    this.setState({income: income - 100});
  }
}
export default App;

src/App.css

.wrapper {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 50px;
  text-align: center;
}
.income {
  font-weight: bold;
  font-size: 20px;
}
.income span {
  font-size: 40px;
}
[class^="woman-"] {
  width: 200px;
  height: 200px;
}
.woman-goodbye {
  background-image: url('./woman-goodbye.png');
}
.woman-annoyed {
  background-image: url('./woman-annoyed.png');
}
.woman-default {
  background-image: url('./woman-default.png');
}
.woman-smile {
  background-image: url('./woman-smile.png');
}
.woman-excited {
  background-image: url('./woman-excited.png');
}
.btn-down,
.btn-up {
  font-size: 16px;
  display: inline-block;
  padding: 0.5em 1em;
  color: #FFF;
  border: none;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  margin: 0 5px;
  outline: none;
}
.btn-down {
  background-color: #33ccff;
}
.btn-up {
  background-color: #ff3399;
}
.btn-down:active,
.btn-up:active {
  border-bottom: none;
  transform: translateY(4px);
}

build(公開用フォルダ生成) する!

npm run build //ビルド用コマンド

アプリプロジェクトフォルダにbuildフォルダが生成されるので、中身一式をサーバーにアップします。

ルートで公開しない場合のパス変更

package.jsonにhomepageという項目を追加して、キーにパスを入力します。

{
  "name": "myfirst-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://example.com/xxx/xxx/xxx", //←公開フォルダまでのパス追加
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  },

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ