Components and Props

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. In this article we will be discussing the concept of components and an important concept called props which goes over how data can…

Understanding rendering

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 document you have <div id="root>…

What in the heck is JSX ?

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 a preprocessor like Babel which…

The Virtual DOM

In a previous article, we discussed the DOM and mentioned that having an understanding of this is important to understand React. Well the reason for that is the virtual DOM. What is the Virtual DOM? Think of the virtual DOM as a concept, there is nothing called the virtual DOM within the React codebase. It…

Why should you care about how the Browsers work in React

The document object model is an important topic in understanding JavaScript and Reacts role in web development. In this article we will be discussing what the DOM is and what it is not and how it relates to JavaScript and React

Why you should be using Fragments

In the last blog post 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. Well I guess there must have been…

Why the Div in React ?

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: Adjacent…

Embedded QR Code Scanner and Browser in React Native

How to embed a QR Code Scanner and web browser in your next React Native App 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…

Using the Zip function in Python Part 3

In the last article, we talked about the basics of the zip function and delved into an example. In this article, we go through two more examples of the zip function in real scripts. We will also learn about writing CSV files and touch on the pandas dataframe. Example 2 When creating a script for…

Using the Zip function in Python Part 2

In the last article in part 1, we went through the basics of the zip function and now we’re in a position to delve in deeper and talk about how the zip function handles different arguments and how the zip function unpacks. We will also delve into an example of how I have used the…