A Complete Beginner’s Guide for Creating a React JavaScript Chat Application from Scratch -- No Coding Experience Required

#javascript #react #css #codenewbie

I love JavaScript even though I’m not good at it (and might never be good at it?). So, when my friend @ developed a course on how to create a chat application using JS, I couldn’t resist the urge to give it a read and implement my own version of the project. You can find the course here and give it a try too -- you’re also welcome to develop your own courses and publish them on his platform!

Without further ado, let's create a boilerplate for our chat app before adding the necessary functionality.

Step 1: Create React APP

Other than it's connections to Facebook, React is a perfect framework. For the purpose of this project, I will fire up a React App on Replit because it's literally the easiest way for any beginner to get started. Platforms like Visual Studio code and GitHub are also highly recommended.

If you already have an account then simply log in. If you don't have then please click here to set one up. Don't worry, they won't charge you a thing for what we're about to do.

Now that we're all on the same page (haha get it? Same page :)), add a new repl by clicking the blue 'plus' button on the right. When prompted for a language please type and select:

Create React App

Next you'll need to select the 'Create Repl' button and presto! You now have your React boilerplate. Click 'Ctrl+Enter' on the keyboard to see the following screen:

Step 2: Create the UI Component

Now navigate to your App.js file and add the following code:

The first two lines enable us to leverage React core functionalities and style our components using the App.css file. The next block of code instantiate a functional component that returns the HTML input fields where we will be keying in the message and user ID while interacting with our chat application. Before moving to JavaScript, let add the required CSS code by pasting the following lines:

Most of the CSS is pretty self-explanatory. However, I'd like to point out the differences between position fixed, relative, and absolute. An element with the position property assigned the value of fixed should typically be accompanied with the 'top' or 'bottom' properties to remove it out of the normal document flow and place it exactly where it needs to be. Think about a element, for instance.

In addition, the relative and absolute attributes can be confusing. The rule of thumb is that when elements are positioned absolutely, their position tends to be in relation to a parent element most likely with the position property assigned the relative attribute.