ReactJs: A (Java) Developers sojourn

As we all heal — emotionally, mentally, spiritually, and physically; and as scientists find a lasting solution to the Covid-19 pandemic, I do really hope you (yes you reading😃) are doing well.

In today’s post, I will be sharing with you my experience and learnings on ReactJs and ending with a sample application.

Why ReactJs?

This month I decided to learn a new Javascript framework and actually put it to use and the choice is ReactJs 🤷‍♂

My Sojourn… So far…🚴 🚴

So what is ReactJs 🤔

A JavaScript library [framework] for building user interfaces

So what do we need? 🤔 ⚒ 🔨 🛠

Before we list the tools and/software we need before we proceed, it is worth stating

• React uses JavaScript so a basic understanding of JavaScript is required;
• React uses something called the virtual DOM 😜. This is basically a lightweight copy of the DOM. Remember DOM here means Document Object Model 🤷‍♂
• recommended using JSX with ReactJs to render UI elements (describes what you want to see on screen). An easy way to think about JSX is like a templating language; An example

function multiply(first, secound) {
  return first * secound;
}
render(
   <h1>The summation of 10 times 10 is {multiply(10, 10)}</h1>,
   document.getElementById("reactjs-sojourn")
)

• React handles separation of concerns through components (a grouped set of independent, reusable UI elements). This is illustrated below with a class component, here we have a simple App component that displays an image (which on a mouseover event displays and alert) and a button (when clicked displays an alert). Now this App component is then rendered in our main index.js via ReactDOM.render(…) into our reactjs-sojourn root DOM.

You will notice we started our component name with a capital A, this is because React treats components with lowercase as DOM tags like <div>...</div>

• It is recommended to have Babel language definition installed on your editor of choice. This is to allow for proper highlighting of ES6 and JSX code. More details here

Phew!! Now that we have gone through a non-exhaustive list of key concepts, what do we actually need to install to get us putting these in practice?

Environment setup ⚙️

For the purpose of this post, we will only need to have NodeJs installed on your local development environment, this is because we are building from scratch.

For more details on how to add React to an existing application, see here

Our Application 💃 🕺

So for our application, we will be searching for a given GitHub user or organization and displaying a summary of the users’/organizations’ GitHub account. Very simple! 😃

Ok 🙄, so how do we begin? 🤔

Steps

• Find out GitHub API we can use to search user details. For this, we will be using the user and organization APIs

• Create our app using the create-react-apppackage. This can be done running npx create-react-app github-user-org-search-previewer
• Change directory into our newly created application directory cd github-user-org-search-previewer
• Next, we will delete everything from the src directory to allow us to build our app from scratch. From the CLI, you can run rm -f src/*
• Now, that we have a fresh base, let's create our components. For this app, we essentially have the App, Search, Profile and Avatar components

Application structure

• Nice, we have our app components all wired in. Let's run it. To do this, you will need to run npm start

Application on the first load 😃

Application on an organization search

Recap 📓

In this post, we have

• given a very brief introduction to ReactJs and a few key concepts to be considered;
• given details on how to create a ReactJs app from scratch;
• concluded with an example of an application built from scratch with ReactJs

In this post, we have bearly scratched the surface on React as there is a whole lot more that it offers, like Hooks amongst others.

As is the default on our blog posts, all code is available on GitHub.