Note - This post is part 3 of a series on building a chat application in Go with ReactJS. You can find part 2 here - Part 2 - Simple Communication
In this part of the series, we’re going to be looking at improving our frontend and fleshing out the application so that it looks and feels like a decent online chat application.
By the end of this part of the series, you should have a really solid looking frontend which looks a little something like this:
Component Based Approach
In React, as well as all other popular frontend frameworks, we tend to divide our applications down into a series of components. Each component typically represents an element on the application such as, say, a list of users within our application, or the chat history section.
This component-based approach has a lot of benefits and effectively allows larger teams to work on individual components without necessarily impacting other teams also working on the application. These components provide you with a certain separation of concerns and effectively, it allows you to build up your app through composition and keep your directory structure logically grouped.
A Header Component
So, let’s start off by creating a really simple
Header component. We’ll do this by creating a new directory under
components/ and within this we’ll create a
Header/ directory which will house all of our files for our Header component.
Note - Going forward, whenever we create a new component, we’ll create a new directory for it within our
components/directory and we’ll typically be creating those three files within that directory.
Let’s implement our
function component within our
Header.jsx file. This will simply render our a header for our site with a simple title:
Next, we’ll want to give it some styling. ReactJS projects don’t automatically come with the ability to handle
scss files, so we’ll first need to install
node-sass by running the following within our
And, once this has completed, we can then add our styles like so:
Finally, we’ll want to export our
Header component so that other components within our application can subsequently import it and render it within their own
Updating our App.js
Now that we’ve created our new
Header component, let’s try and import it into our
App.js component and then display it by adding it to our
render() function like so:
Upon saving, our frontend application should recompile and we should see our new
Header component successfully render at the top of our browser page.
Congratulations - You have successfully just created your first React component!
A Chat History Component
Ok, so, we’ve managed to build and render a really simple component, so let’s build some more and get a bit more comfortable.
In this section, we are going to be creating a Chat History component which will display any and all messages that we receive from our WebSocket server.
Once again, we’ll be creating a new folder within our
components/ directory, but this time we’ll call is
ChatHistory/. Once we’ve created this directory, let’s create the three files for our component.
Let’s start off with our
ChatHistory.jsx file. This time, it’s going to be slightly more complex as we are going to be building a
Class component as opposed to the
Function component that we used for our
Header component above.
Note - We can define class components using an
ES6 class. If you want to learn more about the difference, I recommend you check out the official documentation here: Function and Class Components
Component, you’ll notice we have a
render() function. The
render() function does the job of returning the
jsx that we wish to render in our application for this particular component.
This component will take in an
array of chat messages from our
App.js function through its’
props and will subsequently render them one under the other.
Let’s add a little style to our
ChatHistory component in our
ChatHistory.scss file, this is just a simple background color change and some updates to padding and margin:
And finally, we need to export our new component, just like we did our
Header component, so that it can be imported within our
App.js and rendered:
App.js and api/index.js Updates
So, now that we have our
ChatHistory component, we need to actually feed it some messages.
In the previous part of this series, we set up two way communication that echoes back whatever is sent to it, so we technically have a simple source of new messages whenever we hit our
send message button within our app.
Let’s update our
api/index.js file and update our
connect() function so that it triggers a callback whenever it receives a new message from our WebSocket connection:
So, we’ve added a
cb parameter to our function. This
cb will be called on
line 10 whenever we receive our message.
Once we’ve made these changes, we can update our
App.js to add this callback function and update our state using
setState whenever we do get a new message.
We’re going to move our
connect() call from our
constructor into a
componentDidMount() function which will be called automatically as part of our Components life-cycle.
We’ll then want to update our
render() function and display our
When we compile and run both our
backend, we should see that whenever we hit the
send message button on our frontend, it continues to send a message across our WebSocket connection to our backend, our backend then echoes it back to the frontend and it’s rendered successfully within our
So, we’ve managed to successfully improve our frontend application and see it coming together as a chat application. In the next part of the series, we are going to be focusing on the following:
- Improving our Frontend to add a new send message component to allow us to send custom messages back to the server
- Improving our Backend to handle multiple clients and cross-client communication.
Check out the next part of this series here: Part 4 - Handling Multiple Clients
Enjoying This Series? - If you are enjoying this series, or have any feedback, I would love to hear it on twitter and see your progress in the form of screenshots! - @Elliot_f.