Building a Chat Application with React and Websockets

In this post, we will learn how to create a full stack chat application using React, Node.js and the Websocket protocol. By the end of this post, we will end up with an app that looks like this: We will learn how to build: The server, which will be a basic Node.js application The client application, which we will build using React.js Websockets - the protocol used to exchange live messages between the client and the server If you just want to see the code for this project, you can view the Github repository...

Using React with Typescript

Typescript and React are a great combination. Typescript allows you to define strict types for your React components, their props and states, as well as event handlers. In this post, we’ll go through the fastest way to get started with React and Typescript, and some tips and tricks for using them together. Setting up a new project In my opinion, this is the most frustrating part when working with new javascript stacks....

How to Combine React Contexts

If you just want to see the example source code, you can find it here The React Context API is used for passing down data to all the child components that need it. You can think of it as a global state, which you do not need to pass down through intermediary components. Sometimes, you will need to use two or more contexts together. But as you can see in the official example and in the example below, it can get a bit messy:...

React-Redux "Connect" Explained

Redux is a terribly simple library for state management, and has made working with React more manageable for everyone. However, there are a lot of cases where people blindly follow boilerplate code to integrate redux with their React application without understanding all the moving parts involved. There is an entire library, called react-redux whose sole purpose is to seamlessly integrate redux’s state management into a React application. I feel that it’s important to know what’s going on when you do something that essentially forms the backbone of your application....

Rest API Calls Using Redux - Full Tutorial

Redux has taken the web development by storm, and after the success of react and flux, it has made the flux philosophy more accessible through its simplified approach. Although, something has always bothered me about redux : Why is it so complicated to call APIs?! The async actions tutorial given in the documentation is no doubt a scalable approach to handling these kind of situations, but it’s not very simple, and you would need to go over it a couple of times before you get used to the idea....