DEV Community: Aaron Smith

React Components and what in the world is props ?

Aaron Smith — Fri, 13 Nov 2020 20:47:00 +0000

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. Let’s deal with function components first.

The easiest way to define a React function component is to write a function

function Welcome(props) {
  return <h1>Hello {props.name} </h1>
}

This almost looks like a regular JavaScript function. This function component accepts a props’ argument. Props stand for properties, we will get to them but for now think of props as an object that carries data with it that can be used in our function component. This function component returns some JSX that accesses the props object key ‘name’.

Rendering a React Component

The way we can represent a React component in JSX is like this

<Welcome />

In our circumstance the React component accepts a props argument. Now when we write a React component in JSX we can define what the props object will be.

<Welcome name='Sarah' />

Here we are saying we want the props object to have the key ‘name’ and the value ‘Sarah’. We call this the JSX attribute. When we define this attribute it means we are defining the prop with a key of name and value of Sarah. So now within our function component we can access this value by props.name!

So knowing that, we can see how we would render this simple component

function Welcome(props) {
  return <h1>Hello {props.name} </h1>
}

const element = <Welcome name='Sarah' />

ReactDOM.render(
  element, 
  document.getElementById('root')
)

Here we are calling upon the ReactDOM.render function. React recognises that this is a component. It passes the ‘attribute’ name to the component we call props. React then processes this function. This function returns JSX and this gets rendered by React and updates the DOM. This then displays the output on the screen.

Note! You should always start a component with a capital letter, <div /> represents an HTML tag but <Div /> is interpreted as a component.

Now that we understand what components are and how to render them. We need to take this one step further and see how we would conceivable construct something like a React app. We’ve already talked about the fact that components are discrete pieces of code that can split parts of a user interface.

So the key to components is that we can refer to other components in their output. When we create an App, we create a function component called that we can refer to multiple components that split the application into discrete user interfaces.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Here we have our App component, that returns three iterations of the Welcome component with different attributes. We then call upon the ReactDOM.render() that renders the App component. When we call upon this function we are actually triggering React to render the three Welcome components.

The beauty of this type of setup is that we can split our user interface into ever smaller and simpler components. Notice how we don’t have to have our Welcome function component inside the App component. This allows us to extract away components making the code more readable.

The key to functional components and props is that props should not be modified by the function component. We call this a pure function, that does not change it’s input. However, we know that things within complex applications DO change and there is a way to deal with this possibility in React.

Conclusion

In this article we have defined what a component is and why it’s at the heart of React applications. The concept of a component means we can split a very complex application down into many small components. With a component we also have to have a way to transfer data into these components. This is where the concept of a prop comes in, because a function component acts much like a function, think of props as an object we pass as an argument much like a function. We can define the prop by the attributes of the JSX that represents the component. We saw an example of this. This means we can render multiple iterations of the same component with different data.

About the Author

I’m a practising medical physician and educationalist as well as a web developer. Please see here for further details about what I’m up to project-wise on my blog and other posts. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk or on Twitter @aaronsmithdev.

A Journey through React Rendering

Aaron Smith — Thu, 12 Nov 2020 21:30:59 +0000

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 elements, they are created in JSX which can be rendered on the page. As complexity gets higher we bundle elements into a component. That component becomes many and these components are usually held under one larger component which we inventively call ‘App’.

Everything we create with React gets managed insides this ‘root’ DOM node. Before we go down the rabbit hole of complexity, first we should understand how to render an element before talking about rendering components. We will get an understanding of what we mean by React managing everything inside this <div> element.

Rendering an Element

So we know that React has to translate JSX, into something that eventually will go on the screen. We call this rendering. React has a function called ReactDOM.render() which allows us to take a React element as an argument and where we want to put the code in the HTML. ReactDOM is a React library which has a bunch of functions that deal with the DOM.

The ReactDOM methods are used at the top of the application. It provides a way for code to escape through and be displayed onto the page. It is the primary gateway between React and the DOM.

Let’s see how this works

const element = <h1> Hello World </h1>
ReactDOM.render(element, document.getByElementId('root'))

Output on Screen

Hello World

Now we should know that a React element is immutable, it only provides a snapshot of a potential user interface at a time. You can imagine this is not really a way to make applications!

Lets talk through the render() function first. The parameters it takes are the following

React element
Selected DOM node to append to
Callback function (optional)

This selected DOM node acts as the root of the tree structure of all react elements. It is this structure which allows for multiple components which are viewed as children of the root React Element. Below is a diagram to show this.

Now it should be said that a render can be triggered by something happening inside a component as well as actually just displaying a static page on the screen. This ‘re-render’ could be a change that we want to occur on the webpage and that these re-renders can happen multiple times is the beauty of React. It allows for many changes to happen or data to be stored for eventual use without it being complicated.

To get from JSX to what appears on the screen. React renders a new virtual DOM and compares this against the old virtual DOM. A process called diffing which React calculates the differences between these virtual DOM’s. This then gets compared against the actual DOM and only changes that need to made to the DOM are made. This process is called reconciliation. We won’t get too deep into this in this article but just to have a high level overview of what rendering achieves.

Why use render() ?

Now we know what it does what can we glean from its use.

Single-page applications

You’ll have no doubt heard about single-page applications. React is well suited for this type of application. We can have an almost blank page of HTML where we can direct React to append the application within a div container as we explained above. React allows us to change things on the DOM multiple times without having to refresh the page. We do this by triggering a re-render in our React Application multiple times if necessary, updating the page the way we want it to. This gives us the ability to create dynamic content on a page without having to refresh it seamlessly. To fully understand this we have to delve into the concept of state, which won’t explore here!

Conclusion

ReactDOM acts as an interface between React, component Tree and the DOM. The most common function is the render() function. It acts as the go between React and the DOM.

Once the React root element and tree of children components have been rendered it is the reconciliation process that handles everything related to updates to the page. If we decide to update one of the child components then only changes within that component will take place.

About the Author

What in the Heck is JSX ?

Aaron Smith — Wed, 11 Nov 2020 20:19:17 +0000

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 lets see some code, as we’ll get a better sense of this doing that.

const html = <h1>Hello World</h1>

This looks like a cross between HTML and JavaScript. Babel is able to detect this is JSX and transform it into the following

const html = React.createElement('h1', null, "Hello World")

Babel takes this JSX code we give it and takes the tags and content and uses them as arguments for React.createElement function. Think of JSX as a shorthand way of calling this function React.createElement. The React documentation calls it ‘syntactic sugar’ for React.createElement

You can see how much easier JSX is to read, particularly when you start nesting JSX. It is not a template though! It is syntax that has to be compiled into JavaScript.

For the purposes of the examples we will assume that JSX gets converted, this is sometimes called rendered by React into working DOM nodes that get displayed on the page. This just reduces the complexity down of this article to focus just on JSX.

Why use JSX

JSX is not created by React, it's an extension of the ECMAScript. You can use React without JSX but here is why most don't.

Less proficient coders can get started early and understand and modify it easily. Designers are also more likely to understand it!
You leverage the power of JavaScript without having to learn a template language. But remember JSX is not a template, it’s a syntax to express tree structures of a UI component
JSX promotes the idea of inline styles, which has been a shift from previous ways to develop websites

JSX Rules

The first part of the JSX tag determines the type of React element. We have seen this in a simple example.
Capitalising tags indicate that the JSX tag is referring to a React component.
We can evaluate JavaScript within our JSX by using curly braces

const html = <h1> Hello {1+2} </h1>

If we were to convert this and display the output HTML, the JavaScript 1+2 would evaluate and the result would be

Hello 3

We can nest these JSX elements

const html = 
   <div> Here is a list 
      <ul> 
         <li>Item 1</li>
         <li>Item 2</li>
      </ul>
   </div>

React will render this into a list of items!

You can render a list on the page using a list of JSX expressions.

This is more complicated, don’t worry if you don’t get this.

const todos = ['finish doc','submit pr']
const html = 
    <ul>
      {todos.map(message =><li> {message}</li>}
    </ul>

If we give this JSX to react, if evaluates this JavaScript within the curly brackets. In this case we use the map function to create an array of JSX. We take the todos array items and wrap a <li> tag and the output is a list of the array's items

const html = 
   <ul> 
     {[<li> finish doc</li>,<li>submit pr</li>]}
   </ul>

Then JavaScript interprets the JavaScript in the curly brackets and renders the bullet pointed array items we created.

false, null, undefined and true are valid JSX, but they don’t get rendered by React onto the page.

<div>
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

Beware, some falsy values DO get rendered. 0 for example still gets rendered.

The fact that they are valid JSX, and they do not get rendered to anything on the page means we can create situations where we can conditionally render certain JSX.

Based on conditions, we can tell React what specific JSX we want to render

For the moment, assume that if a tag with Capitalised First letter name a /> is a React component, don’t worry about knowing exactly if you’re unfamiliar with it. React builds from elements up to components as it becomes more complex, and they can be written in JSX like so below.

<div>
   {showHeader && <Header />}
   <Content />
</div>

Here we want to display the header component if showHeader variable is true. If showHeader was false, the Header component would not be seen on the screen!

This is not the end to JSX. But to understand how to properly use it and how it properly fits into the React code, we have to understand a few other concepts. Like how does React turn this JSX into something on the page.

The ReactDOM.render() function which converts all our JSX eventually into DOM nodes. We also have to understand what components are and how to create React components. Lastly to fully utilise JSX we need to understand the concept of props. Prop stands for properties and it is React’s way to pass Data down into components. This is incredibly useful and we will get to that!

About the Author

Why you should know about the Virtual DOM

Aaron Smith — Tue, 10 Nov 2020 22:38:28 +0000

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 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 DOM. It has the same properties, but doesn’t have all the overhead in putting that it onto the screen like a DOM. When the DOM was first conceived the idea of frequently changing things on the page was not really a concept. However, as websites have grown in more complexity having this ability to change things frequently is a major advantage.

You will see a lot written about the virtual DOM but essentially all it is, is a plain old JavaScript object. This object can be manipulated easily and frequently with ease and is why React has used it as a construct.

The other aspect to the virtual DOM that comes with changing things frequently is the concept of state. Essentially state is a way of storing data in a component that can change and can be used to display something on the page that you want to be dynamic. You can imagine in a complex website there may be many things you want to change and keep a track record of. Well-to-do this through plain DOM manipulation becomes an unwieldy task. It is this that React does best, so when I talk about user interfaces that deal with state, this is what I mean.

React also allows us to be declarative, that is we do not care about the internals of how React does what we want. We just want to be able to tell it what state we want the component to be in and for React to eventually manipulate the DOM accordingly. Additionally, to this, every single time a state changes, then the virtual DOM gets updated. This is how we keep track of all the states.

Basic Abstraction of the Virtual DOM

Let's put some code into this. This is a very stripped down version of what the virtual DOM could be like.

Say we have a list component which corresponds to an unordered list. It may look like this

const list = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item"
        }
    ]
};

So you now must be thinking well how is this virtual DOM Created? Any time we write any JSX, this gets converted to a React.Element function. This returns an object and it is this object that is the part of virtual DOM. Whenever you get confused about this, think back to this.

How React uses the Virtual DOM

When changes need to be made, the virtual DOM gets updated by creating a new virtual DOM with the intended changes applied.

Every single time a JSX element gets rendered using the ReactDOM.render() function a whole new virtual DOM is created. At first this may seem inefficient but the cost in doing this is insignificant, we are essentially creating a set of objects.

Below is an example of what React does at a very basic level, here we have copied the above example of a virtual DOM

const copy = {
    tagName: "ul",
    attributes: { "class": "list" },
    children: [
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item one"
        },
        {
            tagName: "li",
            attributes: { "class": "list__item" },
            textContent: "List item two"
        }
    ]
};

This new copy of DOM is then compared to a snapshot of the previous virtual DOM. React then produces a set of instructions tells us what needs to be changed between these two versions of the virtual DOM. This process is called diffing. React makes a decision on how efficiently to make these changes and only changes the DOM for these changes.

const diffs = [
    {
        newNode: { /* new version of list item one */ },
        oldNode: { /* original version of list item one */ },
        index: /* index of element in parent's list of child nodes */
    },
    {
        newNode: { /* list item two */ },
        index: { /* */ }
    }
]

It essentially syncs the virtual DOM with the DOM. It also means that React only changes the DOM once. This whole process is comparing and changing the virtual DOM to the eventual DOM manipulation is called reconciliation.

The beauty of this is that we as the coder do not have to care about how this occurs, React takes this burden away from us and allows us to focus on other concerns.

So now you should have a good grasp on the fundamentals of the virtual DOM and how react works from a high structure. Until next time!

About the Author

Why should you care about how the Browser works in React

Aaron Smith — Sun, 08 Nov 2020 22:47:26 +0000

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 on the screen.

When you start creating websites using HTML the browser has to be able to interpret the code you write. The browser does by creating a hierarchy of HTML tags, this hierarchy is expressed as a tree. The creation of that tree is done by the browser’s rendering engine. It does this by converting each HTML tag into an object called a node.

All these nodes make up a tree and the root of this tree is called the Document object. This whole tree is called the Document Object Model or DOM for short.

<!doctype html>
<html lang="en">
 <head>
   <title>First page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>First Page of Blog</p>
  </body>
</html>

Here is what the DOM representation would look like

Each DOM node has a type, which is important to differentiate one node from another. It also has unique properties and methods that are unique to the node. Below is a list of common node types, this is not exhaustive list!

Document nodes – To specify the whole HTML document,
Element nodes – To access each HTML tag
Text nodes – To access the text within the HTML document
DocumentFragment – A lightweight DOM held in browser memory whilst the website is being viewed. It provides a way to update the DOM in real time (Does this sound familiar?)
DocumentType – Declares that the document present to the browser isHTML (<!DOCTYPE html> )

Now to clarify up some points you may have heard about the DOM

The DOM is NOT what you see on the browser

What you see on the browser is a combination of the DOM and representation of CSS! This is called the render tree. The difference between a render tree and the DOM is that the DOM will not exclude elements in the HTML which are hidden visually.

An example would be

<!doctype html>
<html lang="en">
 <head>
   <title>First page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p style="display: none> Not displayed </p>
</body>
</html>

The DOM representation

The DOM is not the source HTML document

The DOM actually corrects some mistakes, if say we forget to add a body tag into our HTML.

<!doctype html>
<html lang="en"
    <h1>Hello</h1>
  </body>
</html>

The DOM representation

Notice how a body element has been inserted into the DOM ? HTML is forgiving!

The DOM and JavaScript

What has this got to do with React or JavaScript for that matter ?

Well it is possible to create and add DOM nodes using JavaScript. The relationship to JavaScript, the purpose of the DOM is to provide an interface for JavaScript to be able to change it (add nodes, remove nodes, replacing, adding events). It is this DOM manipulation that gives JavaScript its ability to provide the dynamic functionality we see on websites all the time. Each one of these DOM nodes will have properties and methods unique to it which can be used and manipulated.

A question that might ask about the DOM with regard to its interaction with JavaScript is what happens when the browser encounters ?

Well the browser stops creating the DOM, it blocks any further creation and executes the script we have written. Once the script has been run, then the rest of the DOM then gets created.

So now we understand at a high level the DOM, what has this got to do with React ? Well React uses something called the virtual DOM that interacts with the DOM on a need only basis.

Well to answer this fully, we have to think about why would you use this in React instead of vanilla JavaScript? (Hint it is not because the DOM is slow!). We will get into this another article.

Why you should be using Fragments

Aaron Smith — Fri, 06 Nov 2020 21:43:33 +0000

In the last 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 our elements we use or the short hand syntax <>.

Here below we have the typical solution to error you get when you don't wrap your React elements in a div.

import React from 'react'

const App = () => {
  return (
           <div> 
              <p>Hello</p>
              <p>World</p>
           </div>
      )
    }

Here's how we'd rewrite this using React.fragment

import React from 'react'
const App = () => {
  return ( 
           <React.fragment>
             <p>Hello</p>
             <p>World</p>
           </React.fragment>
      )
    }

Now writing React.fragment can be a pain! So React also introduced the <> syntax

import React from 'react'
const App = () => {
  return ( 
           <>
             <p>Hello</p>
             <p>World</p>
           </>
      )
    }

React.fragment gets converted into regular JavaScript by a transpiler and after conversion looks like this. Something we've seen in a previous post!

React.createElement(React.fragment, null, ...children)

The difference is, it does not get inserted into the DOM!

What are the advantages to Fragments

As explained in a previous article. Here are the main reasons why you'd use fragments.

Your react application is getting bigger and the number of useless divs in the DOM are mounting up.
The performance is slightly better and so if you are wanting to shave some time off then this may be a way to do it.
When you are concerned with layout and the rendering of the eventual HTML does not compute with how the layout should appear

How can I use them

1. Returning groups of Elements

This one is taken straight from the React docs. Suppose we want to render a table using React. Well wrapping the td tags in a div will not render the table correctly! However using React fragment does!

import React, Fragment from 'react'
const App = () => {
  return ( 
           <React.fragment>
               <td>Hello</td>
               <td>World</td>
           </React.Fragment>
      )
    }

This renders to

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

2. Conditionally Rendering

Here we are rendering a form that either tells us if the user has logged in or not. If not, we use Fragments to display multiple React Elements that display the form to login. If it is true then we display a logged in message. Note we are using the ternary operator to do this type of conditional rendering!

const App = () => {
  return ( 
           <form>
             {LoggedIn ? (
            <React.Fragment>
              <h3>Welcome</h3>
              <p>You are logged in!</p>
            </React.Fragment>
        ) : (
            <React.Fragment>
              <h3>Login</h3>
              <label for="username">Username</label><br/>
              <input type="text" id="username" /><br/>
              <label for="password">Password</label><br/>
              <input type="password" id="password" /><br/>
              <input type="submit" value="Login" />
            </React.Fragment>
        )}
      </form>
      )
    }

3. Displaying Arrays with Fragments

Now sometimes you will want to display an array but in order to do this, React recommends you include a key property. This is because it makes it easier for react to change the DOM based on this. Now do note that you should use React.fragment rather than <>, as of now <> does not support the use of a key property.

const App = () => { 
  users = [
      {
        id: 1,
        name: "User1"
        phone: "123456789"
      },
      {
        id: 2,
        name: "User2",
        phone: "234567890"
      },
      {
        id: 3,
       name: "user2",
       phone: "345678901"
    }
  ]
  return (
     <React.Fragment>
        {this.users.map(user => (
          <React.Fragment key={user.id}>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <p>{user.phone}</p>
          </React.Fragment>
        ))}
    </React.Fragment>
  )
}

About the Author

I'm a practising medical physician and educationalist as well as a web developer.

Please see here for further details about what I'm up to project-wise on my blog and other posts.

I'd be grateful for any comments or if you want to collaborate or need help with python please do get in touch. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk

Why the Div in React ?

Aaron Smith — Thu, 05 Nov 2020 20:38:59 +0000

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 ?

To answer this we have to think about what happens when React turns our JSX into eventually the HTML we see on the page. The first step in this process is to convert any JSX statement into an object. Behind the scenes React takes our JSX and a transpiler like Babel feeds the parts of that JSX into the React.createElement function.

If we look at the API for createElement

function createElement(elementType, props, […children]) {}

The arguments are defined as

1) elementType - The HTML Tag you want to display

2) props - Data like attributes or styling you want to pass

3) children - Anything you want to pass between the eventual HTML tags, most likely some text but can be other things (see below!)

Here's the example of our JSX from above

<p>Hello</p> // JSX

Becomes

React.createElement(<p>, null, 'Hello')

The React.createElement function takes only one 'elementType' , that is the

part of our JSX element we want to eventually display.

We can't have two JSX statements that will individually have separate React.createElement functions. This means two return statements and React will throw an error! Each function must only return one value in JavaScript.

So what is the solution to this conundrum?

We wrap our JSX into a div.

const App = () => {
    return( 
       <div>
         <p>Hello</p>
         <p>World</p>
      </div>
     )
  }

So behind the scenes this is what it looks like

   Return (
     React.createElement('div', 'null',       
        [React.createElement('p','null','Hello'),
        React.createElement('p','null','Hello')]
        )
     )

The App function can only return one value, by making our JSX statement a child of a div we can assign as many React.createElement's as we like to get the output what we want.

Now the problem here with wrapping inside a div is that we end up bloating the DOM up with pointless div sitting in our eventual HTML. This may not be a problem for a simple component, but more complex components you can imagine how this affects the eventual running of the component and App.

The other problem you may come into contact with is layout in your React application. You can imagine if there are div elements where there shouldn't be, using FlexBox to layout your page may not look the way you intended.

To deal with this problem, we will see in the next article!

About the Author

I'm a practising medical physician and educationalist as well as a web developer.

Please see here for further details about what I'm up to project-wise on my blog and other posts.

I'd be grateful for any comments or if you want to collaborate or need help with python please do get in touch. If you want to get in contact with me, please do so here
aaron.smith.07@aberdeen.ac.uk

Embedded QR Code Scanner and Browser in React Native

Aaron Smith — Sun, 01 Nov 2020 20:49:45 +0000

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 this tutorial, I will take you through show you the steps I took to create an embedded QR Code Scanner for my React Native iOS app. By the end of this tutorial, you will have a good understanding of the parts of React that are relevant to React Native, including state, the lifecycle of a component.

What you will learn

The difference between React class components and function components
How to create a React class component
How to update the state in a React class component
How to use conditional rendering to toggle between camera and browser in our code.
About the different React Native built-in core components

Setting up

I will assume that you are familiar with React Native in setting up a fresh installation. If you are new to React Native then please see here to get set up before continuing with this tutorial!

We must install the following packages

QR Code Scanner
React Native Web View
React Native Camera
React Native Permissions

After a fresh installation of React Native, within the app directory in the terminal type the following commands

npm install --save react-native-camera
npm install --save react-native-webview
npm install --save react-native-qrcode-scanner
npm install --save react-native-permissions

Now don't forget to

cd ios && pod install

Setting up the QR Code Scanner imports

Before we start, please make sure you're creating a blind React Native app and using Xcode. This is because we want to be able to allow permission for our app to access the camera which we can do by altering the settings in Xcode.

Let's first import all the packages

Notes

We are importing extending the Component class from React in the first line. This is required to create a React class component.
We require some built-in core React Native components. View which is a container that supports layout. Text for displaying text and TouchableOpacity for a button we will create. StyleSheet is necessary to create basic styling choices.
We import another React Native component called WebView as a way to display the browser which we can use for our QR Code scanner.
We import the QR Code Scanner and RNCamera. RNCamera is what is used by the QR Code scanner package so it's important to import this as well
As part the setup please do follow the starting instructions for the QR Code Scanner docs here for the QR Code scanner app. You will need to make sure that you allow your app to have permission to access the camera on your phone for the app to work.

Understanding and Creating the React Class Component

To create this app we are going to use a React class component for our code. This is because class components are useful to modify something called state. You may ask what is state?

Well, state is an object that we create that can change the values of and this changes how React component renders. If we change the state value, this re-renders the component to provides a change to the output we see on the screen.

An analogy may help us here to cement what this all means. What is the difference between water and ice? The temperature of course! That number is a measurement of thermal energy. Changing that number changes water into ice and vice versa. This is exactly what happens in changing the state of a React Component. The output of the React Component will change depending on a change in the state object.

We are going to use this concept of state in order to toggle between the QR Code reader and the browser by changing the state object. This is why we want to use a class component!

Class components provide the functionality to change the state object whereas function components are called stateless. This is the fundamental difference between class React components and function React components. Keep this in mind when you're writing your React and React Native applications.

With that explanation out of the way Let's have a look at the first few lines of the code of our App.

So to create a React class component we must first extend the React Component. The React component is the simplest building block of React and is necessary to refer to it in any class component we create.

The state object with two keys webview and url. We set them to false and '' respectively. The reason we say the key webview is false is that we don't want the WebView component to render first. Also, we don't currently yet know what the URL of the QR code is going to be. To direct the WebView component to the correct URL, we need to some be able to how to change that URL when the QR code scans.

The QR Code Scanner

So within the class, we now are ready to go through the code for the QR Code Scanner.

First the render(){} is called. This is the only necessary method for a class component. This is the method that will render our component to do something on a webpage or in our case, the mobile app.

We wrap our logic within a View built-in core component of React Native. This is the equivalent of div HTML tag on rendering. They can be styled, in this case, we are styling the component to fill the full screen using flex:1.

Next, we are providing two pieces of JavaScript within curly braces inside the View component.

We can access the state object key webview by this.state.webview, we know this to be false at this stage. After this expression, you will first notice that the && operator is used. This is because we are using conditional rendering. That is we want to render the component depending on two expressions truthiness or falsiness. It is this that allows us to switch between a browser and the QR code scanner.

The logic goes like this, we defined the state key webview with a false value. So with the && operator we get a short-circuiting evaluation of the two subexpressions, that is the whole statement is false.

Now The <WebView> built-in core component is how we tell React Native we want a browser to appear on the screen. The arguments source={{uri: this.state.url} is how we define what URL we want to serve to the browser. We give the component a style and scale it to fit the page.

So in this piece of JavaScript, the expression is false. That is, we don't want React Native to render the Webview component. That is until we change the webview state.

In the second piece of JavaScript, we are asking whether the webview variable is false and if the right-hand subexpression is true. The right-hand subexpression returns true, much like any string apart from an empty string gets coerced to true in JavaScript. So the whole expression is true and the QR Code Scanner, therefore, gets rendered.

The QR Code Scanner component has the following arguments. The onread is necessary to provide a way to transfer data when the QR code is read. In this case, we are calling upon a method to be defined, which we are binding that is to allow us to access the method in the class outside the method itself. This is necessary to allow us to use the method as part of the QR Code component.

The reactivate and reactivateTimeout arguments are set accordingly to make sure that the QR code scanner will be able to scan again after the first time it does. We will make use of this in the next section!

So on default rendering of this component, it is the QR code scanner that should appear.

Now, what is this function we want to be able to do something with when the QR code scanner reads the QR code?

Instead of showing the URL on the screen, we want to set the state variable URL to that corresponding URL when the QR code is scanned.

We do this by calling upon the setState. This allows us to change our state we defined in the constructor method. The setState accepts an object of keys that were defined on the state, but this time we are changing the values of those keys. Firstly we are grabbing the data from the QR code that's been read, this is bundled in the variable e.data and setting the URL key to that. We are then changing webview to true.

By using setState the component automatically gets a re-render with the updated state. We are telling React we want to re-render the component. This time the first piece of JavaScript in curly brackets used in our conditional rendering is now true instead of the second piece of JavaScript in curly brackets. The browser now loads with the URL from the QR code!

So with those essentials out of the way, you might be thinking well what is next? Well think about it from a user perspective, we now can browse the website inside our app, but what if we have another QR code we want to scan? We want a way to go back to the QR code scanner.

Toggling back to QR Code Scanner

So we may have guessed how we toggle back by now. By modifying the state of course! In this case, we want to update the state such that webview is false. That way the QR code scanner gets rendered instead when we re-render the component

Here we provide a button that we can click, with some styling. Essentially we are centring the content by alignItems and justifyContent. We are making the button a circle which has some opacity to it. We have then positioned it absolutely in the bottom right-hand corner of the screen. If you're familiar with CSS then this should seem pretty familiar to you!

Now with the button, we can use the argument onPress to pass a function or a function call when we press the button. In this case, we're providing a function that updates the state of webview to false. This then re-renders the React component and this is how we toggle the QR code scanner to appear again.

The Text built-in component allows us to communicate what the button does, and we make sure that the text is aligned in the centre.

Now we have a fully functioning QR code scanner with an embedded browser!

If you'd like to see the full code example please see here

Preview

Please see here for a preview of the above code.

Questions to Check your understanding

What is a React component?
Why would you use a class component instead of a function
component in React Native?
What is state?
What is conditional rendering?

Conclusion

In this tutorial, you have learned the rationale for using class components. We have also covered how using the concepts of state and conditional rendering can be used to dynamically change a screen on your mobile app. In this example, we have shown how you can toggle between a QR code reader and a browser on the same screen, and toggle back to the camera once you're done browsing! How cool is that?

Until next time! Please do check out my other articles

About the Author

I'm a practising medical physician and educationalist as well as a web developer.

Please see here for further details about what I'm up to project-wise on my blog and other posts.

I'd be grateful for any comments or if you want to collaborate or need help with python please do get in touch. If you want to get in contact with me, please do so here aaron.smith.07@aberdeen.ac.uk or on twitter at @aaronsmithdev

Using Scrapy from a single Python script

Aaron Smith — Wed, 27 May 2020 20:34:22 +0000

Scrapy is a great framework to use for scraping projects. However did you know there is a way to run Scrapy straight from a script? In fact, looking at the documentation, there are two ways to run Scrapy. Using the Scrapy API or the framework.

Here we will discuss using the Scrapy API, to access the require settings and classes needed to run scrapy in a single python script. This is an area touched on only briefly within the documentation and the main reason for why a tutorial is worth discussing the more practical aspects of writing python scripts.

In this article you will learn

Why you would use scrapy from a script
Understand the basic script every time you want access scrapy from an individual script
Understand how to specify customised scrapy settings
Understand how to specify HTTP requests for scrapy to invoke
Understand how to process those HTTP responses using scrapy under an one script.

Why Use Scrapy from a Script ?

Scrapy can be used for a heavy duty scraping work, however there are a lot of projects that are actually quite small and don't require the need for using the whole scrapy framework. This is where using scrapy in a python script comes in. No need to use the whole framework you can do it all from a python script.
The Scrapy API allows you to run scrapy entirely within one script. It uses only one process per spider.

Lets see what the basics of this look like before fleshing out some of the necessary settings to scrape.

Basic Script

The key to running scrapy in a python script is the CrawlerProcess class. This is a class of the Crawler module. It provides the engine to run scrapy within a python script. Within the CrawlerProcess class, python's twisted framework is imported.

Twisted is a python framework that is used for input and output processes like http requests for example. Now it does this through what's called a twister event reactor. Scrapy is actually built on top of twisted! We wont go into too much detail here but needless to say, the CrawlerProcess class imports a twisted reactor which listens for events like an multiple http requests. This is at the heart of how scrapy works.

CrawlerProcess assumes that a twisted reactor is NOT used by anything else, like for example another spider. With that lets look at the the code below.

import scrapy
from scrapy.crawler import CrawlerProcess
class TestSpider(scrapy.Spider):
    name = 'test'
if __name__ == "__main__":
  process = CrawlerProcess()
  process.crawl(TestSpider)
  process.start()

To use Scrapy We must create a our own spider, this is done by creating a class which inherits from scrapy.Spider class. scrapy.Spider is the most basic spider that we must derive from in all scrapy projects.
We have to give this spider a name for it to run. Spiders will require a couple of functions and an URL to scrape but for this example we will omit this for the moment.
Now you see if __name__ == "__main__". This is used as a best practice in python. When we write a script you want to it to be able to run the code but also be able to import that code somewhere else.
We instantiate the class CrawlerProcess first to get access to the functions we need to start scraping data. CrawlerProcess has two functions we are interested in, crawl and start We use crawl to start the spider we created. We then use the start function to start a twisted reactor, the engine that processes and listens to our http requests we want.

Adding in Settings

The scrapy framework provides a list of settings that it will use automatically, however for working with the Scrapy API we have to provide the settings explicility. The settings we define is how we can customise our spiders. The spider.Spider class has a variable called custom_settings. Now this variable can be used to override the settings scrapy automatically uses. We have to create a dictionary of our own settings to do this ascustom_settings variable is set to none using scrapy.

You may want to use some or most of the settings scrapy provides, in which case you could copy them from there. Alternatively a list of the built-in settings can be found here.

As an example see below

class TestSpider(scrapy.Spider):
    name = 'test'
    custom_settings = { 'DOWNLOD_DELAY': 1 }

Specifying URLs to scrape

We have shown how to create a spider and define the settings, but we haven't actually specified any URLs to scrape, or how we want to specify the requests to the website we want to get data from. For example, parameters, headers and user-agents.
When we create spider we also start a method called start_requests(). This will create the requests for any URL we want. Now there are two ways to use this method.

1)By defining the start_urls attribute
2)We implement our own function called start_requests.

The shortest way is by defining start_urls. We define it as a list of URLs we want to get. By specifying this variable we automatically use start_requests()to go through each one of our URLs.

class TestSpider(scrapy.Spider):
    name = 'test'
    custom_settings = { 'DOWNLOD_DELAY': '1' }
    start_urls = ['URL1','URL2']

However notice how if we do this, we can't specify our own headers, parameters or anything else we want to go along with the request ? This is where implementing our own start_requests method comes in.

First we define our variables we want to go along with the request. We then implement our own start_requests method so we can make use of the headers and params we want, as well as where we want to response to go.

class TestSpider(scrapy.Spider):
    name = 'test'
    custom_settings = { 'DOWNLOD_DELAY': 1 }
    headers = {} 
    params = {}
    def start_requests(self):
        yield scrapy.Requests(url, headers=headers, params=params)

Here we access the Requests method which when given an url will make the HTTP requests and return a response defined as response variable.

You will notice how we didn't specific a callback ? That is we didn't specify where scrapy should send the response to the requests we just told it to get for us.

Lets fix that, by default scrapy expects the callback method to be parse but it could be anything we want it to be.

class TestSpider(scrapy.Spider):
    name = 'test'
    custom_settings = { 'DOWNLOD_DELAY': 1 }
    headers = {} 
    params = {}
    def start_requests(self):
        yield scrapy.Requests(url, headers=headers, params=params,callback = self.parse)
   def parse(self,response):
       print(response.body)

Here we have defined the method parse which accepts a response variable, remember this is created when we ask scrapy to do the HTTP requests. We then ask scrapy to print the response body.

With that, we now have the basics of running scrapy in a python script. We can use all the same methods but we just have to do a bit of configuring before hand.

It's important to review content you read, the focus should be to recall and understand. I encourage you to do the exercises

Exercises

Recall how to write a Basic Script that will enable Scrapy
What is imported when we instantiate CrawlerProcess ?
How do you add in your own custom settings ?
Why should you use start_requests() rather than start_urls when directing HTTP requests with Scrapy ?

DEV Community: Aaron Smith

React Components and what in the world is props ?

Rendering a React Component

Conclusion

Other Articles by Author

About the Author

A Journey through React Rendering

Rendering an Element

Why use render() ?

Conclusion

Other Articles by Author

About the Author

What in the Heck is JSX ?

Why use JSX

JSX Rules

Other Articles by Author

About the Author

Why you should know about the Virtual DOM

What is the Virtual DOM?

Basic Abstraction of the Virtual DOM

How React uses the Virtual DOM

About the Author

Why should you care about how the Browser works in React

The DOM is NOT what you see on the browser

The DOM is not the source HTML document

The DOM and JavaScript

Why you should be using Fragments

What are the advantages to Fragments

How can I use them

1. Returning groups of Elements

2. Conditionally Rendering

3. Displaying Arrays with Fragments

About the Author

Why the Div in React ?

About the Author

Embedded QR Code Scanner and Browser in React Native

Introduction

What you will learn

Setting up

Setting up the QR Code Scanner imports

Notes

Understanding and Creating the React Class Component

The QR Code Scanner

Toggling back to QR Code Scanner

Preview

Questions to Check your understanding

Conclusion

About the Author

Using Scrapy from a single Python script

In this article you will learn

Why Use Scrapy from a Script ?

Basic Script

Adding in Settings

Specifying URLs to scrape

Exercises