Learn this fundamental concept in React! — In a previous article we talked about rendering in React and as a simple example rendering React elements. But this doesn’t reflect what everyone who uses React does when creating an application. …

An in-depth overview of how React renders onto the Page — In the blocks of understanding necessary to get a model of React in our minds the concept of rendering is key. We are using the syntax of JSX to design our user interface and translating this into an output on the screen, this is rendering. Now suppose in an HTML…

Learn this most fundamental concept in React — React is a JavaScript library that uses a syntax called JSX this stands for JavaScript XML. It is a syntax much like XML/HTML that can co-exist with JavaScript code. This means we can write HTML like content and combine it with JavaScript. This syntax is intended to be used by…

Learn how React uses the virtual DOM — The virtual DOM is a concept within the React library that is at the heart of how it works. Here in this article, you will come to understand what it is, a basic abstraction of what it might look like and why React uses it. What is the Virtual DOM? Think of the virtual DOM…

Learn how the DOM relates to JavaScript — The first time you read about React, the concept of the virtual DOM (Document Object Model) appears. Don’t worry if you haven’t come across this term! To begin to understand what the virtual DOM is, the first important step is to have an overview of the DOM first and then…

How to level up your React application by using React.Fragments — In a previous blog post (see here) we looked at why need to wrap our React elements in a div, please see here if you haven’t already read that post! At the end of that post, we discussed why having unnecessary div elements entering the DOM could potentially cause problems…

Understand div wrapping in your React Apps! — The Problem So when you first start using react, you will have no doubt written something like the below const App = () => { return( <p>Hello</p> <p>World</p> ) } What’s wrong with that you might ask? React tries to convert our JSX and this pops out Failed to compile. ./src/App.js Syntax error…

How to embed a QR Code Scanner and web browser using React Native — Introduction For a recent freelancing project I was asked to provide QR Code scanning functionality embedded in a stand-alone mobile iOS app. I was aware of QR Code scanning packages available on the node package manager but never really needed to use them in my work! Some searching on blogs and…

Hacking productivity with python — In this article, you will learn The Pomodoro technique How to model the Pomodoro technique using python How to create a dynamic timer in the command line How to play sound with python Introduction to the Pomodoro Technique The Pomodoro technique is used to break down work into intervals with short breaks in between. It…