React explained to a System Architect or a Project Manager

7 min readJan 3, 2021

As promised, this is the beginning of a series of articles how to prototype in less than 2 hours a dApp (Ethereum distributed application), complete with frontend and backend. Less than 2 hours is also about the time you’d need to prepare a meal like in the title image.

This article IS for you if…

you are a System Architect, or Project Manager or equivalent;
you want to read and understand React code, but not code yourself;
you want ultimately to prototype quickly an idea, and then let your team take care of the detailed implementation.

This article is NOT for you if…

you want to know all the details of the tools that are described;
you are a real programmer 😉 (https://en.wikipedia.org/wiki/Real_Programmers_Don%27t_Use_Pascal) or
you want to make yourself a fully ruggedized dApp.

In both cases, this article can be a good start in your road to the Tao of programming (https://www.mit.edu/~xela/tao.html) 😂.

What is our discovery roadmap?

Preparing a meal in 2 hours may seem natural to you. It’s because you have already an oven, electric cooking plates and a full set of trays, forks and knives. Without them, it may take you more than 2 hours.

Similarly, you will be able to prototype rapidly a full Ethereum dApp in less than 2 hours because there are already ready-to-use programming environments and software components, available for free.

We’ll consider the purpose and organisation each building block in the first articles. Once done, we’ll do a hands-on exercise using them to build a simple dApp prototype.

Let’s start with the JavaScript framework, namely react.js, for this article.

Rapid Prototyping work flow

The workflow for rapid Ethereum prototyping is the following

Code and compile in solidity using the Remix IDE (Integrated Development Environment), save the files.
Use truffle develop and its command migrate to deploy a local in-memory blockchain, compile and deploy the saved backend solidity code on this blockchain.
Develop the frontend in a JavaScript framework, using web3.js to interact with the backend.

Prototyping can be done rapidly because

Remix interactively validates the backend solidity code as you go;
Truffle builds rapidly a complete blockchain environment to run your iterations;
JavaScript framework interactively validates the frontend JavaScript code as soon as you save any edited file.

React JavaScript framework

A JavaScript framework makes it easier to do frontend programming. Developers have the choice of using raw JQuery or more sophisticated frameworks like Bootstrap, Angular JS, Vue or React. Let’s use React because this has the most examples of code showing how to connect to Ethereum¹.

As System Architects, we are more interested in how React is organised (“how” and “why”) rather than focus on the hands-on coding (“what”). Here is the simplified structure of React:

Each of the boxes here will be explained below.

At a very high level, you can consider React as a generator of HTML code that reads your JavaScript, or more exactly JSX code –JavaScript eXtension– and generates HTML code that it will insert in the file index.html describing a web page and display the result automatically.

What makes React very comfortable to use for development is that everytime a source file is saved, it triggers a code compilation and a web page refresh. You can see immediately the result. The error messages are very informative. Then you do the correction and save again and check.

You can now skip the rest if you don’t have time to read further. But reading it will help you understand a React application that you didn’t write.

React in practice

The following code snippets are meant to illustrate our explanations. This is not yet a step-by-step tutorial.

create-react-app

To start coding React, you can take advantage of an application scaffold generator that sets up the content of a complete folder to start programming and debugging interactively a React frontend.

To generate the frontend scaffold and start developing, you only need to type 3 commands

line 1: use nodejs package manager to download create-react-app and make it create your frontend app, myfrontend in this example;
line 2: change to the directory myfrontend
line 3: start React

React, or more precisly create-react-app, has created the scaffold folder with a minimum viable application, launched a development server, opened a browser page and displayed this starter page.

React frontend folder organisation

Here is the folder structure that has been created on your hard disk by create-react-app:

line 4: node_modules contains the directories and files that make up the scaffold, 5297 directories, 35735 files listed in the summary, line 25
lines 6 and 7: package.json is the list of dependencies managed by npm, the package manager; package-lock.json is the fully developped dependencies, generated automatically.
lines 8 to 14: public is the folder containing the material generated automatically to display the web page. In particular there is the classical file index.htmlthat we’ll see below.
lines 15 to 23: src contains the JSX code of your application, that React will use to generate the HTML code that will be injected in index.html.

index.html

This file is the default file that any browser uses by convention to render a web page. A React programmer almost never needs to touch index.html because it’s React that generates the needed code. Here is how a typical React index.html looks like. It has the familiar HTML look.

Every time you make a change in a tracked file and save, the React code generator will inject its code in the following section of the above index.html at line 20

<div id=”root”></div>

Don’t change the id root of this section, else React will be lost and will complain. The backstage mechanism of a React application is called in the file index.js of the src folder. You don’t need modify index.js either. Just keep in mind that it’s where the housekeeping of a React application is done:

call App.js in “strict mode” for development
insert the generated code in the container “root”
log statistics for performance profiling if needed.

Where is the code of a React application?

The actual location of a React application is in the folder src/ and is the file App.js.

App.js

You already know the HTML tags such as <html>, <head>, <div>, <title>, <p>, <a>, <ul>, <button> etc.

React expands this concept into “classes”. Each class contains its own rendering function. There is one class per event for the web browser to handle²: button click, keyboard entry, window resize, video start, video end etc. There is also one class per HTML container, for example class Employee, class Customer, class Department, class Product etc.³

The entry point class in React is Appthat is called by index.js to generate the code injected into index.html. For rapid prototyping purposes, it is often the only class you need to know. Here is what a typical App.js looks like, along with the most common instructions:

line 1: imports the style sheet for the HTML components. In a typical commercial application, the style sheet can be more voluminous than the actual logic code.
line 2: imports the main React JavaScript functions.
line 4: declares that class App inherits from class Component.
line 5: declares a constructor() method that is executed before the component is mounted. In React, the constructor is mostly used to initialize the local state of the component and-or to bind event handlers to the component.
line 6: calls the constructor of the parent class before doing anything that is specific to this class
lines 9–16: the method render() essentially carries in its return statement the HTML containers. They display for example the balance of an account, the total of an order, the identity of a customer etc. They call JSX scripts to retrieve the value of a variable, to do some calculations as triggered by a button or by an event.
line 18: the export statement, along with the render() method, are the only 2 mandatory pieces of code of a class.

What have we learned?

The Ethereum ecosystem environment supports rapid dApp prototyping because it contains the tools and software components for that purpose;
The backend can be developed, compiled and tested interactively by combining Remix and Truffle, which speeds up the development time;
The frontend can be developed, compiled and tested interactively using the React environment;
The frontend can call interactively blockchain functions of the backend, using access libraries, web3.js or ethers.js. This is achieved by simulating locally a blockchain. Later in the development cycle, the same libraries can access the public remote blockchains, either testnets or mainnet.
React is organised in such a way that the application code is always located at the same locations, which makes you quickly familiar with an externally developed application. We have seen where.

[1] In the TruffleBox templates(https://www.trufflesuite.com/boxes), the React box has 379 stars, the Vue box has 6 stars, the Angular box has 0 star.

[2] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

[3] example of class components in my Machu Picchu blockchain demo. Each component is a HTML tag in the render() method of App.js. https://youtu.be/nHQW0CrIDfU

Bonus, free resources in case you want to dig further:

How to code React, written tutorial: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js
How to code React, tutorial in videos: https://www.youtube.com/playlist?list=PL6n9fhu94yhVpO8VBlUXbxKUuG-n2b1bL The videos are carefully edited and not simply recorded on-the-fly, so the contents are well packed. Furthermore, at the end of each video there is a recap of what we learned in the video.

(click here to share this article on Linkedin)