【React】stateの使い方覚え書き用ミニアプリ
Reactの初歩的な記述のみのアプリですが、stateの使い方などをすぐ忘れちゃうので備忘録的に載せておきます。
“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"
},