This article is sponsored by Flutterwave — Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!

React happens to be the most popular JavaScript framework sourced from Stack Overflow Developer Survey (2020). It is the best alternative to two other popular JavaScript frameworks, Angular and Vue. They all allow you to create fast apps in the browser.

According to the official React website:

React is a JavaScript library for building user interfaces

In the definition above, the term user interface is also called a component to React.

A template-like component can be created for reuse in a single web app. It totally adheres to the Don’t Repeat Yourself (DRY) principle.

You only have to change the data in the components. These feature in JavaScript makes it easier to write shorter code for complex applications.

What are the components?

A simple definition of components is:

Components are independent and reusable bits of code

They serve the same purpose as JavaScript functions but work in isolation and return HTML (index.html) via a render function.

Components come in three types:

  1. Class components
  2. Function components
  3. Server Components

We will see functional components usage here!

The image below shows part of the official React home page divided into components:

Let’s take a look at the latter components (the bottom 3 components). It shows a component reusable in a web app.

How to build components in React?

Let’s use Codepen to illustrate.

Steps:

  • Click the Signup button and signup (optional).
  • Click the Start Coding button.
  • Click the gear icon for setting to React.
  • Give a title of your project in the Pen Title field (optional).
  • Description of your project in the Pen Description field (optional).
  • Tag your project in the Tags field (Optional).
  • Select JS in the sidebar.
  • Select Babel in the JavaScript Preprocessor dropdown.
  • Search the following in the CDNjs search field.
  • react (select and click).
  • react-dom (select and click).
  • Click the Save and Close button.

In normal HTML and CSS, the code source of the bottom three components is shown below:

In the example shown below, a template-like component Adcomponent is created:

  • A react component in its most basic form is just a function (functional component). React supports ES6+ syntax, like the fat arrow function.
const Adcomponent = props => {...}
  • Components with more than one React element are placed in a parent element. The parent element here is the <div> element
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
  • Place all hierarchy React elements in parenthesis to return them to the DOM (Document Object Model) successfully.
return (
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
);

The purpose of the template-like functional component is to pass data:

  • The React functional component element <Adcomponent ... /> allows attributes. The attribute values are passed to the template-like component through the attribute name to change components data.
  • Select each React functional component element with an id selector. For example, document.querySelector("#ad1").

In HTML and JSX, the code source of the bottom three components is shown below:

ReactDOM.render(
<Adcomponent
adHeading="Declarative"
adParagraph1="React makes it painless to create interactive UIs..."
adParagraph2="Declarative views make your code more predictable..."
/>,
document.querySelector("#ad1")
);
ReactDOM.render(
<Adcomponent
adHeading="Component-Based"
adParagraph1="Build encapsulated components that manage their..."
adParagraph2="Since component logic is written in JavaScript..."
/>,
document.querySelector("#ad2")
);
ReactDOM.render(
<Adcomponent
adHeading="Learn Once, Write Anywhere"
adParagraph1="We don't make assumptions about the rest..."
adParagraph2="React can also render on the server..."
/>,
document.querySelector("#ad3")
);

The overall JSX code is shown below:

We write even lesser code with HTML and JSX files when components are mounted in a root element, <div id='root'></div>.

The above code snippet shows we can render components once in an application.

Terminology

JSX stands for JavaScript XML. JSX allows us to write HTML-like in Babel (JavaScript)

It is a custom HTML made available by React, but behind the scene is compiled to JavaScript. JSX is just a syntactical sugar featured in React.

ReactDOM is a package that provides DOM (Document Object Model) specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.

ReactDOM provides the developers with API methods, properties, objects, etc. For example, the .render() method on the ReactDOM object.

Props are arguments passed into React components. Props are passed to components via HTML attributes.

It makes changes in a state possible when components or an app is rendered to the screen.

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript that can be run by older JavaScript engines

It takes care of CSS auto-prefix and browser compatibility (CSS and JavaScript). That is, writes code that works across all browsers.

It is a popular tool for using the newest features of the JavaScript programming language (ECMAScript 2015+).

After the installation of React, via any package manager like Node Package Manager (NPM), there are lots of packages and dependencies you will find in the .json files. For example, webpack comes with other packages.

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource (asset)

Hint: Click the Babel file button then click View Compiled button to see how React compiles JSX (Custom HTML) to JavaScript behind the scene

Happy Coding!!!

Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free! Also, you get a Flutterwave dollar barter card when you signup. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.

Hi, I am Bello Osagie, a web developer. I teach web development for free… so join me and have fun learning. Let’s code together!!! 😎

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store