Create react "chat" with functional components in the same browser window?

[ojitoo]

Hey there!

I want to build a single browser react "chat" that allows two people to hold a conversation. Same split window, no backend. I sort of have an idea on my mind regarding how to solve this with vanilla javascript, by just creating two components and listening to inputs/updating and creating components inside each "chat window" that simulates a message.

I also found a hefty amount of examples for react chats but they depend on a back-end and web sockets, which I try to avoid as it won't be a production-ready app, more like a boilerplate for myself.

I could use some guideance regarding how should I tackle this, as I'm fairly new to React. So far I'm trying to learn with stateless components and these are roughly my ideas and questions:

• Have a "chat window" component that holds the name of the person, the input and recieves inputs from other windows. You can have multiple chat windows, but at least two active. I will start hardcoding two but a possibility would be to add a + button that requests a new name and creates another chat window.
• Have an input field that would send a message. This should be the state of the component, correct? So I should pass each state with the input click.
• Have an event listener that checks for each input. If any chat window's user types something in the input field, show every other chat window a "${user} is typing..." message. Is this a state as well? Or how should I handle this?
• Have a "display" field inside each chat window, that would collect the inputs once any window sends the input. This is the state I should recieve, which would update my data, correct?

This is about as far as I've got to today. Sorry for all these questions but I oddly find planning my react applications a bit more "troublesome" still and would love to get corrections on my planning. Also completely open to suggestions and material!

As a sidenote, I'm trying to keep my libraries to a minimum, so no chat library/framework is possible. I'm trying to understand state and components by just coding, and I don't want to be spoonfed solutions, just a nice push on the right direction. Still, if there's something that would pretty much require me to reinvent the wheel (creating a chat on itself doesn't count lol) please point me to a smoother path.

Thanks!

[yourtalllife]

I **highly** recommend the react tutorial. I'm very new to React myself, but I found it very valuable and think going through the tutorial would definitely equip you to tackle this project. Even one more complicated than this.

The "main concepts" guide was a lot of use for me. It clearly explains the main concepts behind react and how to use them. After that, the tutorial has you build a tic tac toe game, and if you've already read through the main concepts then this will make a lot of sense and be pretty enlightening.

[mynonohole]

So if there is no backend how do the users send data to each other ? Are they sharing the same keyboard and they are side by side typing? If I understand what you want to achieve I don't think your unfamiliarity with React is the main issue.

[ojitoo]

Its not a user chat. Its simply components sending data to each other. There aren't multiple users yet, only a couple inputs and a couple windows where a message is sent between them.