【コード公開】reactでChatアプリのUIを作ってみる

こんにちは！

今回はreactでchatアプリのUIを作成します！TeamsやLINEなどチャットアプリは数多くありますが、見た目は大体同じですよね。

なので今回はチャットアプリのUIの基本を作成してみます！この内容から修正を加えて自分なりのチャットアプリを作成してみてください！

作成したUI

作成したUI

今回作成したUIはこんな感じです。

とてもシンプルですがチャットアプリというのはわかりますよね！機能的にはとても単純で、ユーザーがテキストを送信すると予め用意した文からランダムで一つを返すようにしています。

なので会話は噛み合いません！LINEの公式ラインなんかもこんな感じだと思います。

見た目はCSSで整えているのでそこをいじれば自分なりの見た目にしやすいと思います！
色が違うだけでもガラッと印象が変わるのでぜひ色々試してみてください！

それでは早速コードを見ていきましょう！！

コード公開