下記のようなチャット風アプリを作成したいと思います。
![](https://kazunaka.com/wp-content/uploads/2020/06/chat-app1-1024x722.png)
![](https://kazunaka.com/wp-content/uploads/2020/06/chat-app2-1024x827.png)
プロジェクト名は任せます。
本記事では「chat-app」としています。
下記にてHellowWorldまで出力してください。
できる人はそのまま進んでください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://kazunaka.com/wp-content/themes/swell/assets/img/no_img.png)
React環境設定をしてHelloWorldを表示しよう
面倒な環境設定。既にインストール済みの場合もあると思います。バージョンの確認をしてインストール済みかどうかを確認してください。 Node.jsのインストール 下記のUR...
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です。
![](https://kazunaka.com/wp-content/uploads/2020/06/chat-app3-1024x692.png)
殺風景すぎるので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/
![](https://kazunaka.com/wp-content/uploads/2020/06/chat-app4-1024x578.png)
とりあえずこういう感じで表示されて、独り言が送信できればOKです!!
次回はFireBaseも絡めて実装していきたいと思います。
本記事、最後まで見ていただきありがとうございました。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://kazunaka.com/wp-content/themes/swell/assets/img/no_img.png)
reactでチャット風独り言アプリ-2
前回記事の続編ということになります。まだみていないという方はどうぞ。 https://kazunaka.com/react-chat-app 独り言を呟いても更新をかけてしまうと、今までボヤいて...
コメント