DEV Community: Leandro RR

best post of the day

Leandro RR — Fri, 05 Sep 2025 16:21:18 +0000

Why 'Clean Code' Is Harder Than It Sounds

Leena Malhotra ・ Sep 4

How to escape from WhatsApp Business registration hell

Leandro RR — Tue, 03 Jun 2025 18:32:35 +0000

There's a step you need to take before plugging your app into the WhatsApp API to start sending messages and notifications. You must register your company on the WhatsApp Business Page.

Then you have to wait for an email... that never comes. To be honest, I didn't have the patience to wait; it took too long. I checked my mailbox and even the spam folder, and after a week, nothing. so I figured out by myself i have to set it on Facebook! yes! way better than wait for meta contact you on your email lol.

Setup your business portfolio

Go to https://business.facebook.com/. If you don't have a Facebook account, create a new one to follow this tutorial. If you already have one, keep reading. On your business page, go to the side menu on the left and click in the select menu at the top:

Click on the button "Create a Business portfolio":

Fill this modal form, please provide a valid contact email for your company. You can change it later, but try not to type it wrong here.

Once you fill these fields, click next, don't need to choose any Facebook page, just skip the next 2 steps and finish the form.
Once you finish the form, you go to your Facebook business account page.
Go to the side menu on the left, open the collapsible menu option Accounts, and click on Apps:

If you don't have any apps added yet, click on Add New App:

Click in Create a new App Id, then proceed by adding an app name and a contact support email for your app.

In use cases select the last option Other and click next:

In the next step, select Business:

If you're good with all the info already in the form, you can proceed by clicking in Create App button:

And it's done!

You are ready to start using whatsapp api!

Encode your secret keys to base64

Leandro RR — Thu, 08 May 2025 05:16:10 +0000

In this article, I'll show you how to quickly create a script to encode your secret keys to base64, so you can use them for your JWT secret or anything else.

Advantages

First, let's see why we use this approach:

Portability in environments that do not support binary

Private keys and certificates may contain binary characters incompatible with certain systems (e.g., environment variables, .env files, YAML, JSON, XML).
Base64 encoding turns them into secure ASCII strings compatible with virtually any transmission medium.

Storage in environment variables/files

Systems like Docker, Kubernetes, CI/CD (GitHub Actions, GitLab CI), and configuration tools (e.g., dotenv) handle text values better.
Base64 allows you to store keys/certificates directly as environment variables.

PRIVATE_KEY_BASE64=LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBL...

Secure transmission over HTTP/JSON

REST, GraphQL, and gRPC APIs often send data in JSON. Since JSON doesn't support pure binary, Base64 solves this.

Example: sending certificates, tokens, images, or files over the network.

Avoids issues in your code and line breaks

When storing PEMs or private keys directly, line breaks or encoding issues can cause hard-to-diagnose errors.
Base64 can be a single line and avoids these issues.

Compatible with cryptography and libraries

Many cryptography libraries accept Base64 encoded input/output.

It's easy to convert back with atob/btoa in the browser or Buffer.from(..., 'base64') in Node.js.

Heads up: Base64 is not encryption. It just encodes data – anyone can decode it.

Let's get straight to the point

We're gonna use OpenSSL to generate the certificates for our keys and then encode them in base64, at the end I'll explain how to decode them using other programming languages.

Creating a shell script

in your terminal use sudo nano generate-ca.sh or use any text editor of your preference.

#!/bin/bash
set -e

name="certificate"
days=365

openssl genpkey -algorithm RSA -out ${name}.key -pkeyopt rsa_keygen_bits:2048
openssl req -new -key ${name}.key -out ${name}.csr -subj "/C=US/ST=NY/L=NYC/O=Company/OU=IT/CN=example.com"
openssl x509 -req -in ${name}.csr -signkey ${name}.key -out ${name}.crt -days ${days}

cert_b64=$(base64 -w 0 ${name}.crt)
echo "$cert_b64"

Every line explained:

#!/bin/bash

Tells the system to use the Bash shell to interpret the script.

set -e

Instructs the script to exit immediately if any command fails (returns a non-zero status). This prevents the script from continuing after an error.

name="certificate"
days=365

Defines two variables:

name: the base name used for all output files.
days: how long the generated certificate should remain valid.

openssl genpkey -algorithm RSA -out ${name}.key -pkeyopt rsa_keygen_bits:2048

Generates a 2048-bit RSA private key and saves it as certificate.key.
Saves it as certificate.key (because ${name} is "certificate").

openssl req -new -key ${name}.key -out ${name}.csr -subj "/C=US/ST=NY/L=NYC/O=Company/OU=IT/CN=example.com"

Creates a Certificate Signing Request (CSR) using the previously generated key. It includes certificate metadata defined in the -subj string:

C = Country
ST = State
L = Locality/City
O = Organization
OU = Organizational Unit
CN = Common Name (usually the domain)

openssl x509 -req -in ${name}.csr -signkey ${name}.key -out ${name}.crt -days ${days}

Generates a self-signed X.509 certificate using the CSR and private key. It sets the certificate validity to 365 days and saves it as certificate.crt

cert_b64=$(base64 -w 0 ${name}.crt)

Converts the certificate (certificate.crt) to Base64.
-w 0 tells base64 to output it all in one line (no line breaks).
The output is stored in the shell variable cert_b64.

echo "$cert_b64"

Prints the Base64-encoded certificate to the terminal.

This is useful for directly copying it into .env files, configuration files, or application source code.

the output will be something like this:

....+.........+...+....+.....+.+........+....+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*......+......+....+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*..+.....+.........+.........+.+..+.......+...+..+.+......+........+.+.........+........+...+......+.+........+.......+...+......+.........+.....+.+...+......+..+.........+...+.+...........+..........+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
..+......+.+..+.+..+....+.....+.........+......+.........+.........+...............+...+....+......+..+.+..+.........+...+.......+..............+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*...+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*..........+......+......+.+.....+..........+...+.........+...............+...+..+.+.....+......+...+.............+...+..+....+...+........+...+............+.........+....+.........+..+......+...+..........+..+..........+...+.....+.+.....+..........+........+...+...+....+..+....+.....+....+..+.+..............+.............+...+.....+...+.+........+...............+...+..........+.....+....+...........+.......+...+..+.+..+.............+.....+.+...+...........+....+..+...+.+.....+.......+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Certificate request self-signature ok
subject=C = US, ST = NY, L = NYC, O = Company, OU = IT, CN = example.com
LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSURRVENDQWlrQ0ZEODFOZ0JyMDlob0FWa3d...

where the base64 string you need is:

LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSURRVENDQWlrQ0ZEODFOZ0JyMDlob0FWa3d...

Decode it

PHP

$base64 = "BASE64_STRING_HERE";
$decoded = base64_decode($base64);
file_put_contents("certificate.crt", $decoded);

Node

const fs = require('fs');

const base64 = "BASE64_STRING_HERE";
const buffer = Buffer.from(base64, 'base64').toString('utf-8');
console.log(buffer);

Java

import java.nio.file.*;
import java.util.Base64;

public class DecodeCert {
    public static void main(String[] args) throws Exception {
        String base64 = "BASE64_STRING_HERE";
        byte[] decoded = Base64.getDecoder().decode(base64);
        Files.write(Paths.get("certificate.crt"), decoded);
    }
}

Python

import base64

base64_str = "BASE64_STRING_HERE"
with open("certificate.crt", "wb") as f:
    f.write(base64.b64decode(base64_str))

package main

import (
    "encoding/base64"
    "os"
)

func main() {
    base64Str := "BASE64_STRING_HERE"
    decoded, err := base64.StdEncoding.DecodeString(base64Str)
    if err != nil {
        panic(err)
    }
    os.WriteFile("certificate.crt", decoded, 0644)
}

Elixir

base64 = "BASE64_STRING_HERE"
decoded = Base.decode64!(base64)
File.write!("certificate.crt", decoded)

font ligatures is a bad idea for beginners

Leandro RR — Sat, 17 Jul 2021 04:17:12 +0000

i just realized that font ligatures is a bad idea for beginners, one example of this, was one of my friends was watching a online course and the teatcher was using font ligatures and she tried make the "not equal" operator and was hitting his head against the wall because it was not looking like what she saw in the video, then she send me a message asking for help, at first i just told her to use the "!=" or "!==" but then she send me a screenshot of the vscode in the video and i realized it was because he's using font ligatures, that's why she thought it wasn't working", she was so worried about that symbol she saw in the video that she forgot she could just run the code and see if it would work. that's makes me think that font ligatures is not a good idea to beginners and make them confuse about operators.

let's not forget that if you're doing video tutorials about programming, font ligatures in the editor is a bad idea too, programming by itself is hard enough for beginners and we should make sure the learning curve is less painfull for them.

my favorite upload plugins

Leandro RR — Thu, 03 Sep 2020 03:27:20 +0000

looking for a good drag n drop upload plugin? need a beautiful UI and user friendly? well... after use some of them in my personal projects and jobs i want to share with you my favorite upload plugins.

Uppy

uppy has one good ui and useful resources to make upload very easy.
visit: https://uppy.io/

here's some of your features:

open source
lightweight, modular, plugin-based architecture, easy on dependencies
resumable file uploads via the open tus standard
Saves battery and data plan by letting users pick files from Webcam, Dropbox, Google Drive and Instagram, while letting servers do the heavy lifting via Companion
Works great with the file encoding and processing backend from Transloadit, but also works great without
File recovery (after a browser crash or accidental navigation) via Golden Retriever
I18n
Built with accessibility in mind
Free forever

also, you can use it with react, vue or simple website! and obviously use module bundlers like: webpack or browserify.

you can install it by separate modules:

$ npm install @uppy/core @uppy/xhr-upload @uppy/dashboard

or all at once:

$ npm install uppy

then import it in your project:

import Uppy, { XHRUpload, DragDrop } from 'uppy'

Filepond

the filepond by pqina is very beautiful too! visit: https://pqina.nl/filepond/

all his features:

Multiple Input Formats: Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
Multiple File Sources: Drop files, select files from the file system, add files using the API, or copy and paste files.
Async or Sync Uploading: Send files to the server using XMLHttpRequest or store and submit with form post as base64 using the File Encode plugin.
Image Optimization: Automatic resizing and cropping of images on the client saves server bandwidth and dramatically increases upload speed.
Accessible: Tested with AT software like VoiceOver and JAWS. FilePond's user interface is navigable by Keyboard.
Responsive: Automatically scales to available space. Is functional on both mobile and desktop devices.

and also:

Drag n' drop to reorder files
Modify labels and icons
Multiple or single file mode
Filter files from dropped folders
Restore temporary server files
Catch files dropped on page
Upload on drop or wait for user action
Limit drop area height
Drop to replace current file
Copy paste files
Add metadata to files
Extend FilePond with plugins
Limit the input file size
Limit the total size of all files
Limit the types of files that can be added
Show preview for image files
Crop images to a fixed ratio
Resize images to fit in a bounding box
Force resize images to a certain size
Apply image transformations on the client
Compress JPEG images
Convert images to JPEG or PNG
Read image EXIF orientation info
Base64 encode files

and of course you can use it with react, vue or a simple website.

convinced? try any of them and tell me what you think afterwards.

i need the pros and cons of Google AMP

Leandro RR — Mon, 23 Mar 2020 16:08:22 +0000

i found the amp docs in amp.dev, implemented one page using it, but i'm not sure if this is the right choice, this will be implemented in a customer ecommerce, he asked to put it because he saw this on the competitor's website. his online store is huge (he sells shoes, clotches and acessories). i need to know a reason to use it. why not just improve the mobile (responsive) site instead of use AMP?

You can block a button if a field is not filled with pure CSS

Leandro RR — Tue, 10 Mar 2020 03:51:42 +0000

i'm doing this trick with just one field, if want add more fields, they need be direct childrens of <form>, and this will fail if you wrap the input field in another element.

HTML Structure

<form action="" class="form">
  <input type="text" class="form__input" placeholder="type your name..." required>
  <button class="form__button">submit</button>
</form>

The CSS

:root {
  --success-color: #319E65;
  --error-color: #E8513B;
  --white-color: #FFFFFF;
  --silver-color: #BDC3C7;
  --light-color: #ECF0F1;
}

.form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 50%;
  margin: 0 auto;
}

.form__input {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--silver-color);
  padding: 10px 20px;
  transition: all .3s ease-in-out;
}

.form__input:focus {
  outline: 0;
}

.form__button {
  background: var(--light-color);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--silver-color);
  text-decoration: none;
  padding: 10px 20px;
  color: var(--silver-color);
  transition: all .3s ease-in-out;
  pointer-events: none;
  margin-left: 10px;
}

.form__input:invalid {
  border-color: var(--error-color);
}

.form__input:valid {
  border-color: var(--success-color);
}

.form__input:valid + button[class=form__button] {
  border-color: var(--success-color);
  background: var(--success-color);
  color: var(--white-color);
  cursor: pointer;
  pointer-events: initial; /* block click and events in this button */
}

the trick here is :valid and :invalid, using it, you can validate the field, if empty :invalid will block it, if you type something, then :valid will make it clickable again at this line:

.form__input:valid + button[class=form__button] {
  border-color: var(--success-color);
  background: var(--success-color);
  color: var(--white-color);
  cursor: pointer;
  pointer-events: initial; /* the click event returns to the initial state */
}

Result

How to make a Cyberpunk 2077 button with CSS

Leandro RR — Thu, 27 Feb 2020 17:56:50 +0000

hello people! in this post, i will show you how to make a button with the theme Cyberpunk 2077 using just CSS. let's go samurai, we a have a text editor to burn 🔥

Get Colors, Fonts and HTML structure

Colors

to this post, i will use some specific color pallete, i will list them here:

yellow (primary): #fcee09
black: #050a0e
blue: #00f0ff
red (secondary): #ff003c

i published this color scheme on adobe colors too, so you can download it as CSS, SASS or SCSS.

Fonts

for fonts, let's import some from google fonts, i picked the following set of fonts: Barlow and Tommorrow.



@import url("https://fonts.googleapis.com/css?family=Barlow|Tomorrow:400,700&display=swap");

HTML

for now, we will just use a pure <button> tag with some classes.



<button class="btn">Get your copy now_</button>

Building the Primary button

now let's start with the primary state of the button



@import url("https://fonts.googleapis.com/css?family=Barlow|Tomorrow:400,700&display=swap");

:root {
  --yellow-color: #fcee09; 
  --red-color: #ff003c;
  --black-color: #050a0e;
  --blue-color: #00f0ff;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: var(--yellow-color);
  color: var(--black-color);
  cursor: pointer;
  padding: 20px 25px;
  position: relative;
  font-family: Tomorrow, sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
}

at this point you should have something like this:

Adding the folded corners effect

well, for this effect we can use two approaches, the first is very simple, the second is more complex (and boring), let's see how we can make that.

Solution 1: using floating boxes in each corner

using same code above for the .btn class, we can use the ::before and ::after:



.btn::before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: -14px;
  left: -13px;
  background-color: var(--yellow-color);
  border-top: 2px solid var(--black-color);
  transform: rotate(45deg);
}

.btn::after {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: -14px;
  right: -13px;
  background-color: var(--yellow-color);
  border-bottom: 2px solid var(--black-color);
  transform: rotate(45deg);
}

Explaining: in the .btn::before we created a box of 24px of width and height, then using position: absolute; to put it in the left bottom of our button, we added a border-top of 2px and a background-color yellow, so the border of the button will not appear behind our boxes. the same was applied in .btn::after, we just changed the position to top right and the border to bottom.

after all this, our button should look like this:

it looks cool, but the background color of our floating boxes is visible, the only way to hide it is to set a background color on the body with the same color as the button. 😔

Solution 2: using CSS clip-path

I confess, I found out that I suck at clip-path, it really took me a while to understand it, so using this approach we have some pros and cons:

Pros

you don't need floating boxes and set a background-color on body
clip-path works like a charm (if you know how to use this nightmare)

Cons

you can't set borders on elements clipped (it sucks)
even trying put borders with ::before and ::after not work (everything in the clipped area is hidden)

Now using clip-path, we have to modify our .btnclass a bit, to set the borders i have to set a fixed width and height at the parent element: <button> then add a children element with the class .btn__content, with our yellow background, while the parent has black, this is a workaround to simulate a border.



.btn {
  width: 230px;
  height: 60px; 
  border: 0;
  outline: none;
  background-color: var(--black-color);
  cursor: pointer;
  position: relative;
  font-family: Tomorrow, sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
  color: var(--black-color);
  clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}

.btn__content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: var(--yellow-color);
  clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
}

we can make a default width and height and add classes to change the size of the button like: btn--small, btn--large...

Final touch

to add more details to our button, let's just add that little label in the corner of our button:

HTML



<button class="btn">
  <div class="btn__content">
  The future is now_
  </div>
  <span class="btn__label">r25</span>
</button>

CSS



.btn__label {
  height: 10px;
  font-size: .40rem;
  position: absolute;
  bottom: -4px;
  right: 8%;
  padding: 0 5px;
  background-color: var(--yellow-color);
  z-index: 3;
}

below i show you the same button with the class btn--secondary, this changes the bg color to red.

Hover with glitch effect

to reproduce the glitch effect, again we use clip-path with transform, basically we just show the button sliced in different sizes in each step of the animation, after that we call this animation inside our :hover, this is applied to the btn__content::after and btn__glitch (you have to add more one <span> inside our button.



<button class="btn">
  <span class="btn__content">Get your copy now_</span>
  <span class="btn__glitch"></span>
  <span class="btn__label">r25</span>
</button>

and this is the hover with the glitch element being styled:



.btn__glitch {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--yellow-color);
  filter: drop-shadow(-2px 3px #67e3f3) drop-shadow(-1px -3px #02d8f3) drop-shadow(2px 1px #02d8f3);
}

.btn--secondary .btn__glitch {
  background-color: var(--red-color);
}

.btn:hover .btn__glitch,
.btn:hover .btn__content::after,
.btn:focus .btn__glitch,
.btn:focus .btn__content::after {
  display: block;
  animation: glitch-animation 2s linear 0s infinite;
}



/* secret trick */
@keyframes glitch-animation {
  0% {
    opacity: 1;
    transform: translateZ(0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }

  2% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(-5px);
  }

  6% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(5px);
  }

  8% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(-5px);
  }

  9% {
    clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%);
    transform: translate(0);
  }

  10% {
    clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    transform: translate3d(5px, 0, 0);
  }

  13% {
    clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%);
    transform: translateZ(0);
  }

  13.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }

  15% {
    clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    transform: translate3d(5px, 0, 0);
  }

  20% {
    clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%);
    transform: translate3d(-5px, 0, 0);
  }

  20.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }

  25% {
    clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    transform: translate3d(5px, 0, 0);
  }

  30% {
    clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%);
    transform: translate3d(-5px, 0, 0);
  }

  30.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }

  35% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(-5px);
  }

  40% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(5px);
  }

  45% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(-5px);
  }

  50% {
    clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%);
    transform: translate(0);
  }

  55% {
    clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    transform: translate3d(5px, 0, 0);
  }

  60% {
    clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0);
    transform: translateZ(0);
    opacity: 1;
  }

  60.1% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }

  to {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 1;
  }
}

that's it! the final code you can see in this gist.

i made this pen at codepen too, check it out!

Bonus

you can add prefers-reduced-motion if you are concerned with accessibility:



@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__glitch,
  .btn:hover .btn__content::after,
  .btn:focus .btn__glitch,
  .btn:focus .btn__content::after {
    display: none;
    animation: none;
  }
}

thanks for the tip Karen!

Karen Fletcher • Feb 28 '20

This is really cool! Thanks for posting this write-up!

Have you considered adding a prefers-reduced-motion media query for folks that are motion sensitive?

Great work and thanks for sharing!

Using Mirage JS to create a fake api with React JS

Leandro RR — Mon, 17 Feb 2020 14:54:31 +0000

welcome to my first post, today i'm going to show you how to use Mirage JS to make a fake endpoint, after you learn it, i'm sure you will be amazed by it and will use it in your future projects.

What is it?

from Mirage website: Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.

if you want know more, read the getting started guide.

Before start

install the create-react-app to try Mirage.

$ npx create-react-app testapp

Install Mirage JS

$ npm i --save-dev miragejs

Creating the server

cd to the react folder then create a server.js file inside src/ folder:

$ cd testapp/ ; touch src/server.js

now open the server.js file and type the following code:

import { Server, Model } from "miragejs"

export function makeServer({ environment = "development" } = {}) {
  let server = new Server({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", schema => {
        return schema.users.all()
      })
    },
  })

  return server
}

now import this script inside your src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {makeServer} from './server';

if (process.env.NODE_ENV === "development") {
  makeServer()
}

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

serviceWorker.unregister();

Fetch the data

now inside our app.js, use the react functions useState and useEffect to help us with this job:

import { useState, useEffect } from "react"

export default function App() {
  let [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(json => {
        setUsers(json.users)
      })
  }, [])

  return (
    <ul data-testid="users">
      {users.map(user => (
        <li key={user.id} data-testid={`user-${user.id}`}>
          {user.name}
        </li>
      ))}
    </ul>
  )
}

now go to the terminal and start the react server:

$ npm run start

now you should be able to see your users being rendered in the view. this is a simple tutorial, feel free to comment if anything is wrong.