DEV Community: SemihGKL

Stop using the old way of creating React components

SemihGKL — Fri, 03 Nov 2023 09:24:29 +0000

Stop using the old way of creating React components

The old way
The actual way (JSX)
The limit

So, let's start to explain why you need to delete the utilisation of the old way to create React Component.

1 - The old way

So, the old way to create a component is like that :

const Hello = () => {
  return React.createElement("h2", {}, "Hello world");
};

export default Hello;

I mean this is not the most difficult thing you see in JS and React, so what is the problem here ?

2 - The actual way (JSX)

Here we just use the JSX syntax to do the same thing :

const Hello = () => {
  return <h2>Hello World</h2>;
};

export default Hello;

Ok, well this is not a revolution when we look firstly.

But ... !

3 - The limit

When I need to do something like add a div that encapsulates my component, with the current method :

const Hello = () => {
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  );
};

export default Hello;

It's look very easy and logical thing, don't need to break your head to understand what we do.
So ...
With the old method ? Check this :

const Hello = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h2", {}, "Hello world")
  );
};

export default Hello;

IMO, There's no need to explain the limitations of using the old method after this.

Anyway, I can't be expected to maintain harder code than a Hello World component written as 💩.

Practice makes progress ! 💪

~SemihGKL

Qu'est-ce qu'un composant React ?

SemihGKL — Thu, 23 Mar 2023 10:52:36 +0000

Qu'est-ce qu'un composant React ?

Sommaire

React ?
Le composant (de manière générale)
Le composant (pour débutant)

1 - React ?

Si vous vous trouvez sur ce post c'est que React ne vous est pas inconnu..
L'un des frameworks (ou librairie pour les intimes) les plus utilisés depuis quelques années et qui se ressent aussi sur le marché et les demandes d'emplois.
React, de ce que j'ai compris, base sa puissance dans 3 choses :

1) Sa communauté, qui permet d'avoir des ressources pour vraiment énormément de points.
2) Son écosystème, toutes les bibliothèques qui l'entourent et qui complètent son scope dans le développement front, ce point est en fait un sous point du premier si on prends du recul.
3) La gestion des états, le fait que React rende les éléments d'une page réactif (d'où son nom ?), qui s'actualisent de manière automatisée sans impacter le user qui n'y voit absolument rien, et qui ne voit pas les performances de son navigateur baisser, et encore moins un quelconque chargement qui pourrait le frustrer dans sa promenade sur la toile d'Internet (ou de l'Internet ?).

2 - Le composant de React

Qu'est-ce qu'un composant React ?
Il y a énormément de manières de le décrire ou de l'expliquer, en voici une de plus :
Le composant React est un composant, une partie de l'interface utilisateur, donc de ce que voit l'utilisateur derrière son écran (un CTA, un formulaire, une card,...).
Son avantage ? Le fait que l'on puisse le ré-utiliser partout dans le projet.

Je vous l'ai faites très courte pour le coup...

3 - Le composant React pour un developpeur débutant sur la techno

On arrive à un sujet moins évident... C'est comprendre un composant React en tant que développeur (moins drôle et évident pour beaucoup).

Et pourtant on va découper cela en 3 parties pour vulgariser un maximum.

1) Le state (un état, une donnée)
2) Le comportement (le traitement, les fonctions)
3) Le render (l'affichage)

Prenons l'exemple suivant pour illustrer nos propos et rentrer dans des explications un peu plus poussées :

function App() {

    //(1) le state
    const [compteur, setCompteur] = useState(1);

    //(2) le comportement
    const handleClick = () => {
        setCompteur(compteur+1);
    }

    //(3) le render
    return (
        <div>
            <h1{compteur}</h1>
            <button onClick={handleClick}> Incrémentez </button>
        </div>
    )
}

On a premièrement notre compteur défini à 1 (le bloc de code n°1) qui est un state, donc une donnée qui est vouée à évoluer par le biais de nos actions sur l'interface.

Notre page va donc traiter la partie 3 directement pour l'affichage des informations avec simplement un texte et un bouton

Et la partie 2 du code ne sera exécutée que lorsque l'évènement sur le bouton sera déclenché (au click).

Ce qui est intéressant de noter, c'est qu'à ce moment-là, notre bloc 2 va seulement mettre à jour notre donnée en l'incrémentant, on passera de 1 à 2.
Et React va automatiquement gérer le fait de repasser par le bloc n°3 pour "rafraichir" l'affichage, le terme technique ici sera "re-render", sans que l'utilisateur n'y voit quoi que ce soit.

Donc, pas de rafraichissement de page, mais un rafraichissement de composant, car en fin de compte pourquoi rafraîchir une page complète si le seul élément sur lequel on veut agir est notre variable qui passe de 1 à 2 ?

Voilà l'un des piliers de React.

Practice makes progress ! 💪

~SemihGKL

How to test the existence of a file in Javascript

SemihGKL — Thu, 09 Feb 2023 09:16:01 +0000

How to test the existence of a file in Javascript

Create a file
The file testing function
Execute code
Tips

1 - Create a file

First, we need to create another file that contains our test function.
You can create this file using the IDE of your choice or by typing the following command in the terminal :

touch testFile.js

2 - The file testing function

In the previous file, add this function that takes an array as an argument. For each file name in the array, we will test its existence.

function isNotFile(args) {
    for (let i = 0; i < args.length; i++) {
        if (fs.existsSync(args[i]) == true) {
            console.log(args[i] + "this file exist")
        } else {
            console.log(args[i] + "this file doesn't exist")
        }
    }
    return true
}

Now, we need to call the function with the correct parameter (don't forget the array):

isNotFile(['test.txt'])

3 - Execute code

Now, all you need to do is create the 'test.txt' file. To do this, run the following command in the terminal:

touch test.js

And now, simply execute our function in the terminal:

node testFile.js

If you have successfully created the 'test.txt' file, you should receive a message indicating that the file exists in the terminal.

4 - Tips

The best way to utilize this code is to check out my topic, "Javascript in the Terminal". There, you will learn and see how to retrieve the arguments passed in the terminal command, such as:

node testFile.js test.js test2.js

Practice makes progress ! 💪

~SemihGKl

Javascript in the terminal

SemihGKL — Tue, 17 Jan 2023 21:22:24 +0000

Execute Javascript in the terminal

Create a file
Execute the file
Get the return of a JS file execution
Get the parameters of the terminal in a JS file

1 - Create a file

You can create your file through the IDE that you use or you can type this command in the terminal :

touch terminalJS.js

Then, do a basic Javacript code :

const gg = "good job dude."
console.log(gg)

2 - Execute the file

To execute that code in your terminal, just write this in the terminal :

node terminalJS.js

you are going to see :

good job dude.

3 - Get the return of a JS file execution in an other script

To get the return value of the "terminalJS.js" file in an another file :

Create a new file :

touch ggDude.js

In this file, add the following to get the contents:

//The child_process.spawn() method spawns a new process using the given command, with command-line arguments in args, but the spawnAsync function will not return until the child process has fully closed.
const spawn = require('child_process').spawnSync;

//Here we create a function that takes in args an array, here we passed just the filename and no more because terminalJS.js file don't need argument for its execution
function getReturnExec(fileName) {
    //Here we call the spawn method that execute our node command and we log the result
    console.log(spawn('node', fileName).stdout.toString());
    return 
}

//Here we just execute the above function with the filename contained in an array by reason of the spawnSync function need in second argument the arguments of our command that we need to execute
getReturnExec(["terminalJS.js"])

Write in the terminal the command line to run "ggDude.js"

node ggDude.js

The result :

good job dude.

Therefore, the new file that we created get the result of terminalJS.js and return it.

4 - Get the parameters of the terminal in a JS file

To get the parameters of the terminal in a JS file, as we can see in the above part, we just passed the filename without variable when we call the function.
Essentially, to make it more flexible and adaptable we need to make it variable so we can choose which file we need to target.

Modify the "ggDude.js" file like that :

//get all the arguments in the terminal command in an array
const args = process.argv

//The first one is the 'node' command to execute JS script.
const arg1 = args[0];

//the second one is the path of the file what we need to execute
const arg2 = args[1];

//the third one is an additional argument, here the filename that we target, to get its content
const arg3 = args[2];


//demonstration
console.log("We execute the file : " + arg2)
console.log("We have to passed this file : " + arg3 + " as an argument.");

//----------------------------------------------------//

const spawn = require('child_process').spawnSync;

const fileName = arg3

function getReturnExec(fileName) {
    console.log("Here the content of the file that we target : " + fileName);
    console.log(spawn('node', fileName).stdout.toString());
    return 
}

getReturnExec([fileName])

Above, we execute the file "ggDude.js" and pass the name of the file "terminalJS.js", which is the file that we need to target and get the contents from.

NB : To see the result I let you test that yourself.

To conclude, if we need to change the file we want to get the contents from, we can just change our terminal command and target an other file.

Practice makes progress ! 💪

~SemihGKl

What Is "NaN"

SemihGKL — Thu, 29 Dec 2022 15:39:45 +0000

So what is NaN ??

spoil : It's a Number

NaN beginners introduction
My tips to verify number
My second tips to verify the opposite

1 - What we need to know about that ? Basically... 3 things for beginners

1 - NaN is the result of an arithmetic operation that was invalid.
2 - For many of us NaN == Not A Number, but for sure, it has a 'number' type.
3 - We can not compare NaN to itself.

To illustrate all these things I will show you some examples :

    const whatIsNaN = 1 / "a"
    console.log("#1 - You can have "NaN" like that : 1 / a = " + whatIsNaN);

    console.log("#2 - The type of NaN is : "+typeof NaN);

    if (NaN === NaN) {
        console.log("We never catch this log");
    } else {
        console.log("But always this log");
    }

    //If you need to catch a NaN, you can use that : 

    if (Number.isNaN(NaN)) {
        console.log("I'm a NaN !");
    }

2 - My tips

In my experience, the method that I prefer to use to check if a variable is a "number" :

//The regex to match with numbers.
const nbRegex = /^-?[0-9]\d*(\.\d+)?$/

/*
Here you can see how many elements in your array 
do not match with the regex that we defined.

Here "args" is an array
 */
function isNotNumber(args) {
  return args.filter(arg => !arg.match(nbRegex)).length;
}

So, with this function if the return is more than 0 ?
It's the proof that the array you passed as an argument contains some stuff that is not a number :

//Here "args" is an array
if (isNotNumber(args) > 0) {
    console.log("This array does not contain number only.");
    return
}

3 - My second tips to verify the opposite

In an other way you can just delete the "!" in the filter function to have the perfect oposite and only stuff that is not numbers :

//Here "args" is an array
function isNotNumber(args) {
  return args.filter(arg => arg.match(nbRegex)).length;
}

To test that :

//Here "args" is an array
if (isNotNumber(args) > 0) {
    console.log("This array does contain some number.");
    return
}

DEV Community: SemihGKL

Stop using the old way of creating React components

Stop using the old way of creating React components

Table of contents

1 - The old way

2 - The actual way (JSX)

3 - The limit

Qu'est-ce qu'un composant React ?

Qu'est-ce qu'un composant React ?

Sommaire

1 - React ?

2 - Le composant de React

3 - Le composant React pour un developpeur débutant sur la techno

How to test the existence of a file in Javascript

How to test the existence of a file in Javascript

Table of contents

1 - Create a file

2 - The file testing function

3 - Execute code

4 - Tips

Javascript in the terminal

Execute Javascript in the terminal

Table of contents

1 - Create a file

2 - Execute the file

3 - Get the return of a JS file execution in an other script

4 - Get the parameters of the terminal in a JS file

What Is "NaN"

So what is NaN ??

Table of contents

1 - What we need to know about that ? Basically... 3 things for beginners

2 - My tips

3 - My second tips to verify the opposite