Kater Akeren

Posted on Jul 24, 2020 • Edited on Aug 4, 2022

A complete guide to writing React Applications: A Step-by-step tutorial guide

#react #javascript #parcel #tutorial

Introduction

A simple open-source JavaScript package called React is used to create interactive user interfaces. This fantastic effort can serve as an ideal foundation for the creation of single-page or mobile applications. It is kept up-to-date by Facebook Inc., a network of independent developers, and businesses around the world. This post will teach you how to write pure React code and then show you how to use one of its beautiful tools, Parcel❤️

Layers of React Abstraction (Libraries)

When creating a reactively based application, React primarily offers us two layers of abstraction.

The first layer is an interface that makes React available to us and demonstrates how to use it efficiently. All methods used come from this library, with the exception of one: rendering oneself to the DOM.
The second library is the rendering layer, which uses the React DOM extensively to render content to the browser.

The two aforementioned libraries form the foundation for creating a React-based application, while there are many additional React libraries as well, such as A-Frame React, React Native, React 360, React Blessed, and others.

Let's set up a workspace

Firstly, create your project 📂 directory. Mine is going to be called todo-app 📁 since we're going to be building a task manager app. Create an index.html 📄 and put it into a src/ 📁 directory inside of the created project folder (todo-app 📂). Open the working directory with any text editor.

Let's write Pure React

Let’s write pure React. No Webpack or parcel, JSX, and Babel; just some cool JavaScript on the page with its two layers of abstracted libraries. Open the index.html 📄 and put:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
</head>
<body>
    <div id="root-container">Hello, React!</div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Our pure React goes below -->
    <script >

    </script>
</body>
</html>

Let's create a component

Now, in the last script tag let's create a component called, App. React is all about creating components, and then taking those components and making more components out of those components created.

const getElement = (name) => {
    return document.querySelector(name);
}
const App  = () => {
    return React.createElement(
        'div',
        {},
        React.createElement('h1', {}, 'Todo App')
    );
}
ReactDOM.render(React.createElement(App), getElement('#root-container'));

The first thing we do is to create a reusable function to get elements from the DOM; it will help us extensively throughout our development process.
Secondly, we create our own component, App
There are two types of components, function components, and class components. The component we'd create is a functional component.
A function component must at all-time return a markup (which is what React.createElement generates)
React.createElement creates one instance of some components. If you pass it a string, it will create a DOM tag with that as the string. We used div and h1, those tags are output to the DOM
The second empty object (you can put null too) is attributes we're passing to the tag or component. Whatever we put in this will be output to the element (like id or style.)
ReactDOM.render is what takes our rendered App component and puts in the DOM (in our case we're putting it in the root-container element)

Let's separate the script out of the index.html 📄

Let's separate the script tag on the DOM to its own script file. We will do that by making a new file in your src/ 📂 directory called App.js and cut and paste your code into it. In addition, we will modify the code by creating another component called User. Remember to point the path of App.js in the index.html file.

const getElement = (name) => {
  return document.querySelector(name);
};

const User = () => {
  return React.createElement("div", {}, [
    React.createElement("h2", {}, "Kater"),
    React.createElement("h3", {}, "kater@dev.com"),
    React.createElement("h4", {}, "user")
  ]);
};

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Todo App - Users"),
    React.createElement(User),
    React.createElement(User)
  );
};

ReactDOM.render(React.createElement(App), getElement("#root-container"));

To make an element have multiple children, just pass it an array of elements.
We created a second new component, the User component. This component represents a user. When you have distinct ideas represented as markup, that's a good idea to separate it into a component as we did above.
Since we have a new User component, we can use it multiple times! We just use multiple calls to React.createElement in the App component.
Okay so we can have multiple users but it's not a useful component yet since not all users have the username, email, and role. Let's make the component more meaningful.

const getElement = (name) => {
  return document.querySelector(name);
};

const User = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h2", {}, props.username),
    React.createElement("h3", {}, props.name),
    React.createElement("h4", {}, props.email),
    React.createElement("h5", {}, props.role)
  ]);
};

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Todo App - Users"),
    React.createElement(User, {
      username: "kater",
      name: "Kater Akeren",
      email: "kater@dev.to",
      role: "Software Engineer"
    }),
    React.createElement(User, {
      username: "fabs",
      name: "Fabian Aondo",
      email: "fabian@valuebeam.com",
      role: "CTO"
    }),
    React.createElement(User, {
      username: "juliet-faith",
      name: "Juliet-Faith Idoko",
      email: "juliet-faith@lunetsoft.com",
      role: "UI Designer"
    })
  );
};

ReactDOM.render(React.createElement(App), getElement("#root-container"));

We have a more reusable and flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of User.) Now each user can be different! Now that is far more useful than it was since each instance of the User component can represent not just Kater, but any User. This is the most profound power of React! We can make multiple, reusable components. We can then use these components to build larger components, which in turn make up yet-larger components. This is how React apps are made profoundly.
We can destruct the props and make it look:

const getElement = (name) => {
  return document.querySelector(name);
};

const User = ({ username, name, email, role }) => {
  return React.createElement("div", {}, [
    React.createElement("h2", {}, username),
    React.createElement("h3", {}, name),
    React.createElement("h4", {}, email),
    React.createElement("h5", {}, role)
  ]);
};

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Todo App - Users"),
    React.createElement(User, {
      username: "kater",
      name: "Kater Akeren",
      email: "kater@dev.to",
      role: "Software Engineer"
    }),
    React.createElement(User, {
      username: "fabs",
      name: "Fabian Aondo",
      email: "fabian@valuebeam.com",
      role: "CTO"
    }),
    React.createElement(User, {
      username: "juliet-faith",
      name: "Juliet-Faith Idoko",
      email: "juliet-faith@lunetsoft.com",
      role: "UI Designer"
    })
  );
};

ReactDOM.render(React.createElement(App), getElement("#root-container"));

Parcel

The parcel is a modern web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration. Already our React app has two components in one file: App and User. It'd be better if these were in separate files so it'd be easier to keep track of what was where. This is where Parcel can help us profoundly. We will install parcel as a dev-dependence, but it can be installed globally. if you want to check it up: 👉 Getting started with Parcel.

First, let's initialize the npm registry package.json file by simply typing the command below in the root terminal of your working directory; for it to keep track of the npm packages we will be installing.
install parcel:
Now inside of our package.json we will configure parcel below in the script section:

"scripts" {
  "dev": "parcel src/index.html"
}

Start the parcel server:

React and ReactDOM dependencies

Lastly, before we do a complete refactoring; let's fix the React and ReactDOM dependencies. Right now these are coming from unpkg.com. Unpkg isn't meant to serve production traffic. We install both libraries from the npm registry. Remove completely the Unpkg libraries from the index.html

Complete Refactoring

import to the top of App.js the two installed libraries and the User component

import React from "react";
import {render} from "react-dom";
import { User } from "./User";

const getElement = (name) => {
  return document.querySelector(name);
};

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Todo App - Users"),
    React.createElement(User, {
      username: "kater",
      name: "Kater Akeren",
      email: "kater@dev.to",
      role: "Software Engineer"
    }),
    React.createElement(User, {
      username: "fabs",
      name: "Fabian Aondo",
      email: "fabian@valuebeam.com",
      role: "CTO"
    }),
    React.createElement(User, {
      username: "juliet-faith",
      name: "Juliet-Faith Idoko",
      email: "juliet-faith@lunetsoft.com",
      role: "UI Designer"
    })
  );
};

render(React.createElement(App), getElement("#root-container"));

Create a new file called User.js cut the User component in the App.js and past it to the newly created User.js:

import React from "react";
export const User = ({ username, name, email, role }) => {
  return React.createElement("div", {}, [
    React.createElement("h2", {}, username),
    React.createElement("h3", {}, name),
    React.createElement("h4", {}, email),
    React.createElement("h5", {}, role)
  ]);
};

Conclusion

I thank you for traveling with me up to this point in my journey, we have successfully learnt and unearthed React technology's fundamentals, starting from an abstract perspective and ended with its sleek, lightning-quick speed employing multicore processing, and needs no configuration. Regards and ❤️

References

Top comments (1)

Gbenge Aondoakula Raphael Raymond • Aug 15 '20

Nice one

DEV Community