reactでチャット風独り言アプリ-1

下記のようなチャット風アプリを作成したいと思います。

プロジェクト名は任せます。
本記事では「chat-app」としています。

下記にてHellowWorldまで出力してください。
できる人はそのまま進んでください。

HellowWorldまで表示できましたら、早速作っていきましょう！！

TweetIndex.jsの編集

$ touch src/TweetIndex.js

でsrc直下にファイルを作成します。
下記書いていきましょう。

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

class TweetIndex extends React.Component {

  render() {

    return (
      <React.Fragment>
        <ul>
          {this.props.items.map((item, i) => (
            <li key={i}>
            <div className="tweet-bc">
              <div className="balloon6">
                <div className="faceicon">
                  <img src="icon.png"/>
                    {item.user}
                </div>
                <div className="tweeting">
                  <div className="tweets">
                    <p>{item.text}</p>
                  </div>
                </div>
              </div>
            </div>
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

export default TweetIndex;

App.jsの編集

src/App.jsを編集します。

import React, { Component } from 'react';
import './App.css';
import TweetIndex from "./TweetIndex.js";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], user: '', text: '' };
    this.tweet = this.tweet.bind(this);
    this.userName = this.userName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <React.Fragment>
        <header>
          <p class="title">独り言アプリ</p>
        </header>
        <div className="tweet-main">
          <TweetIndex items={this.state.items} />
        </div>
        <div className="container">
          <form onSubmit={this.handleSubmit}
                autoComplete="off">
            <textarea
              onChange={this.userName}
              value={this.state.user}
              id='name'
              placeholder="name"
            /><br/>
            <textarea
              id="tweet"
              onChange={this.tweet}
              value={this.state.text}
              placeholder="tweets"
            /><br/>
            <button
              className="btn btn-success"
              type="submit"
            >送信
            </button>
          </form>
        </div>
      </React.Fragment>

    );
  }

  tweet(event) {
    this.setState({ text: event.target.value });
  }

  userName(event){
    this.setState({ user: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    if(this.state.user === "") {
      alert('ユーザ名の入力が必要です')
      return;
    } else if(this.state.text === "") {
      alert('独り言の入力が必要です')
      return;
    }

    const newItem = {
      user: this.state.user,
      text: this.state.text,
    };

    this.setState(state => ({
      items: state.items.concat(newItem),
      user: '',
      text: ''
    }));
  }
}

export default App;

機能的にはこれで完成です。
真ん中あたりの、

<img src="icon.png"/>

は多分表示できないですよね。好きなiconをchat-app/publicフォルダ内に入れてファイル名を指定すれば、表示できるはずです。

ネットから探すのがめんどくさい方は、デフォルトでpublicフォルダにfavicon.icoが入っているのでそれを指定してください。

<img src="favicon.png"/>

$ yarn start

http://localhost:3000/

ローカルホストにアクセスして、
こんな感じになっていればOKです。

殺風景すぎるのでcssで仕上げます。

App.css

src/App.cssを編集します。

* {
  margin: 0;
  box-sizing: border-box;
}
header {
  position: fixed;
  width: 100%;
  height: 80px;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  background: #0a0;
  margin-bottom: 1em;
  padding: 0.4em 0.8em;
  color: #fff;
  z-index: 30;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
form {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  height: 80px;
  width: 100%;
  background: #f5f5f5;
  z-index: 20;
}
textarea,button {
  height: 50px;
  border: 2px solid #0a0;
  border-radius: 0.67em;
  background-color: snow;
}
textarea {
  font-size: 1em;
  line-height: 1.2;
  text-align: center;
  padding: 0.5em;
  width: 300px;
  box-sizing: border-box;
  margin: 5px;
}
button {
  height: 50px;
  border: 2px solid #0a0;
  border-radius: 0.67em;
  background-color: snow;
}
#name {
  width: 120px;
}
#tweet {
  width: 400px;
}
ul {
  list-style: none;
  padding-left: 0;
}
.tweet-main{
  padding:100px 0 100px 0;
  width:350px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
.tweet-bc {
  padding: 5px 10px;
  max-width: 450px;
  text-align: right;
  font-size: 14px;
  border-radius: 10px;
  word-wrap: break-word;
}
.balloon6 {
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
}
.balloon6 .faceicon {
    float: left;
    margin-right: -50px;
    width: 60px;
    text-align: center;
}
.balloon6 .faceicon img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.balloon6 .tweeting {
    width: 100%;
    text-align: left;
}
.tweets {
    display: inline-block;
    position: relative;
    margin: 20px 0 0 70px;
    padding: 10px;
    max-width: 230px;
    border-radius: 12px;
    background: #edf1ee;
    z-index: 10;
}
.tweets:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 3px;
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #edf1ee;
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}
.tweets p {
    margin: 0;
    padding: 0;
}

cssなっが。。書くの疲れました。。
いろいろ触って自分好みのスタイルにしてください。

また下記コマンドを実行してローカルホストにアクセスしたください。

yarn start

http://localhost:3000/

とりあえずこういう感じで表示されて、独り言が送信できればOKです！！

次回はFireBaseも絡めて実装していきたいと思います。

本記事、最後まで見ていただきありがとうございました。