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 flow in React.

React components allow an application to be split into discrete, reusable user interfaces. A somewhat accurate analogy would be that React components are very much like JavaScript functions.

React components can be either function Components or class components. …

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> </div>. We can use this to create our React application.

We call this the root DOM node. In fact, applications build solely in React you usually only have one root DOM node.

From the very simplest of building blocks of a React application, we have…

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 converts this syntax into JavaScript that the JavaScript engine can run.

JSX is a concise HTML like structure in the same file as we write the JavaScript code. Unlike in the past, we can put HTML into JavaScript.

So let's see some code, as we’ll…

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 as a concept, there is nothing called the virtual DOM within the React codebase. It serves as a useful tool to do what React was meant for, creating user interface components that deal with state (we will briefly define state below)

The virtual DOM is an in-memory representation of the…

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 why React uses the virtual DOM instead. Here in this article we will look through the DOM to enhance why you’d want to know about this for React.

At its simplest, the DOM provides an in-memory structure for the web browser to communicate the structure of the page that displays…

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. Well, I guess there must have been a solution to this right?

In the React release 16.2, a new feature was introduced called a React fragment. Think of this as a component that doesn’t translate to HTML.

Instead of using <div>'s to wrap the elements we use or the shorthand…

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: Adjacent JSX elements must be wrapped in an enclosing tag (6:8)

Behind the scenes for all the JSX statement you write in a component, they need to be wrapped into one container. But wait why is it necessary?

Behind the Scenes of React

To answer this problem we have to think about what happens…

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 packages' documentation showed you how to read a QR Code and display the information, but not actually DO anything with that information. This was relatively frustrating given that the point of a QR code is to transfer information and usually in the form of a link to a browser.

In…