Encountering a "JavaScript heap out of memory" error typically indicates that a JavaScript application has exhausted the memory available to it. Here are some common solutions: Increase Memory Allocation: You can allocate more memory to Node.js by…

Introduction In the previous article we looked at using coordingates to get weather data. This post looks at the state which is used to store the retrieved data. Buckle up. This is going to be a bumpy ride. src/content-apps/weather/constants/index.ts…

Introduction In a previous article we looked at passing coordingates into a couple of “dumb components”. What these components really do we will look at in a bit more detail here. This post details the hook used in the src/content-apps/weather/data…

Introduction In the previous article we looked at passing coordingates into a couple of “dumb components”. What these components really do we will look at in a bit more detail here. This post details the hook used in the src/content-apps/weather/data…

Introduction In the previous article we looked at interrogating the browser for geo-location coordinates. Assuming the user provides permission to the browser to provide their coordinates to this app, and there are no errors, we will have coordinates…

Introduction When we are interested in weather, we usually want to know about the weather in our local area. Outside for instance. For this, we need to know our geographic location. And for that, we need to find out where that is. Luckily, browsers…

Introduction Building an internet hosted weather app is a useful way to learn how to consume an API endpoint. If you can consume a public api like this, then you can work with a back end developer who is providing data to you from a database for…

Introduction Hey there, budding developers! Are you ready to dive into the world of TypeScript and React and build something truly awesome? Well, you're in for a treat because, in this tutorial, we're going to create a fantastic weather app together…

Introduction Building a Todo application is a logical way to delve into the world of modern web development. Now we’ll look at building out the view components of the Todo app, exploring how to construct it using a powerful tech stack: GatsbyJS…

Introduction Building a Todo application is a logical way to delve into the world of modern web development. In this guide, we’ll introduce the concept of actions. Our powerful tech stack: GatsbyJS, TypeScript, ReactJS, Recoil, and Chakra-UI. Click…

Introduction Building a Todo application is a logical way to delve into the world of modern web development. In this guide, we’ll introduce the concept of actions. Our powerful tech stack: GatsbyJS, TypeScript, ReactJS, Recoil, and Chakra-UI. Click…

Introduction Building a Todo application is a logical way to delve into the world of modern web development. In this guide, we’ll focus on the necessary state files of your Todo app in the context of this powerful tech stack: GatsbyJS, TypeScript…

Introduction Building a Todo application is a logical way to delve into the world of modern web development. In this guide, we’ll focus on the pivotal index file of your Todo app, exploring how to construct it using a powerful tech stack: GatsbyJS…

Introduction Are you tired of juggling multiple tasks and struggling to stay organized? Is your productivity taking a hit because of scattered thoughts and forgotten to-dos? Fret not, because we have an exciting solution coming your way! Introducing…

What you will be building Please check this link: Tik Tok Bio This app uses components from Chakra UI. You should check it out. What you will need in your Gatsby set up Make sure you have a page called tik-tok-bio.js (or extension ts if you prefer…

What The Hell?!? So you have published your website to Netlify and everything is going super smoothly. Then, you turn on Prerendering (you can find this feature hidden in “Build and deploy” in your Site Configuration settings). This feature is in…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Reference We first looked at setClearAll here. Let’s get going. actions/set-clear-all.ts Our Imports We need…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Reference We first looked at setClearGame here. Let’s get right into it. actions/set-clear-game.ts Our…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Reference We first looked at setDecisionComputer here. Let’s get right into it. actions/get-result.ts First…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Reference We first looked at setDecisionComputer here. actions/set-decision-computer.ts But What Does It Do…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Reference We first looked at setDecisionUser here. actions/set-decision-user.ts But What Does It Do? The…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Introduction This is one of the more complicated view components in that it includes game controllers. Rather…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Let’s get right into it. Here is the file you will need. view/results.tsx Imports First we import React of…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Displaying the Computer Consider the following code: view/computer.tsx What This Seems Simple Well, it is…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Displaying the User This file is going to require assets from a new package which is ‘@react-icons/all-files…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Displaying The Players There are two players in Rock Paper Scissors. One player is an ‘AI’ in this case. LOL…

What you will be building Please check this link: Rock Paper Scissors Game This app uses components from Chakra UI. You should check it out. Game Play Heading The game play heading is distinct from the game heading. The game heading is simply a page…

What you will be building Please check this link: Rock Paper Scissors Game Game Wrapper The game wrapper is a simple view component used to provide an encasement around a few other components. view/wrapper.tsx file The only thing particularly special…

What you will be building Please check this link: Rock Paper Scissors Game Game Heading Every page needs a heading right? Well, so does this page. Here we have created a very basic heading using the Heading component from Chakra UI. This page uses a…

What do I mean by entry? This is a description of the game’s root file. Its home page. Its index.html. Except in this case, it is an index.tsx file. So in your react project, you will need to create a file like this. What you will be building Please…

In The Beginning… Everyone needs to start somewhere right? Well, at the end of this series we will have a working rock-paper-scissors game. We will be using TypeScript (which is really JavaScript with a typing overlay), and React. What you will be…

Gatsby’s wrapPageElement exists in both the browser and server side rendering APIs. This means that you’ll want to add the wrapPageElement to both the gatsby-browser.js/ts file and to the gatsby-ssr.js/ts file. This guide looks at the gatsby-ssr.js…

Gatsby’s wrapRootElement exists in both the browser and server side rendering APIs. This means that you’ll want to add the wrapRootElement to both the gatsby-browser.js/ts file and to the gatsby-ssr.js/ts file. This guide looks at the gatsby-ssr.js…

This article is assuming you are using Visual Studio Code as your text editor when coding. There are other text editors that are suitable for coding. If you use them, you are dead to me. Just kidding. We just can’t be friends. Prettier and ESLint are…

Welcome to the world of TypeScript and ReactJS here at be-a-react-dev! These two technologies are a match made in heaven for developers who want to build scalable and maintainable web applications. ReactJS is a popular JavaScript library used for…