Mes notes React - 1

Dans cette série d'articles, je partagerai les notes que j'ai prises lors de mon apprentissage de React. Je tiens à souligner que ces notes ne sont pas très détaillées, ce sont juste des informations utiles qui m'aident à me souvenir des sujets que je connais déjà. Si vous pensez qu'il y a des parties incorrectes ou manquantes, je serais très heureux si vous pouviez les écrire dans les commentaires avec leurs sources.

Qu'est-ce que React ?

• C'est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur.

• Nous pouvons effectuer ces opérations plus rapidement avec React en évitant les opérations de bas niveau sur lesquelles nous consacrons plus d’efforts avec JavaScript vanille.

// bir div elementi oluşturulup parentBox değişkenşne atandı
let parentBox = document.createElement(“div”);
// parentBox elementine parent-box css class’ı atandı
parentBox.className = “parent-box”;
// bir div elementi daha oluşturulup childBox değişkenine atandı
let childBox = document.createElement(“div”);
// childBox elementinin içine bir metin eklendi
childBox.textContent = “lorem ipsum”;
// childBox elementine, child-box css class’ı eklendi
childBox.className = “child-box”;
// childBox elementi, parentBox'ın içine ve parentBox elementi de body'nin içine eklendi
parentBox.append(childBox);
document.body.append(parentBox);

const SomeComponent = () => {
return ( <div className=”parent-box”> 
      <div className=”child-box”>lorem ipsum</div> 
    </div>)
}

• La programmation impérative est une approche de programmation dans laquelle chaque étape du processus est écrite une par une. L'ordinateur reçoit des instructions étape par étape sur ce qu'il doit faire. Par exemple, pour créer un bouton avec JavaScript, nous devons écrire toutes les opérations une par une comme suit :

// buton oluştur 
const myButton = document.createElement("button");
// butonun içine yazı ekle 
myButton.innerHtml = "Yeni buton";
// butonu body içine dahil et 
document.body.append(myButton);

• La programmation déclarative est une approche qui explique simplement ce que vous voulez faire, plutôt que d’expliquer chaque étape une par une. Par exemple; Pour créer un bouton indiquant « Nouveau bouton » en utilisant JSX avec React, il suffit d’écrire le code comme ci-dessous. Nous disons simplement à React que nous voulons créer un bouton avec du texte à l'intérieur , et React exécute le code qui créera ce bouton en arrière-plan.

• Il s'agit d'une application Web qui n'envoie pas de requête au serveur et ne restitue pas le code HTML entrant sous forme de requête à chaque fois que nous accédons à une nouvelle page dans une application Web, mais reçoit plutôt un seul fichier HTML du serveur et détermine où l'afficher en manipulant le DOM avec JavaScript.

• Il s’agit essentiellement d’une structure composée de HTML, CSS et JS. Tout ce qui est visible dans le navigateur peut être un composant. Cela nous évite d’écrire encore et encore du code pour des éléments visuels similaires. Le fait de pouvoir utiliser un composant que nous créons encore et encore et de décomposer le travail effectué rend les composants attrayants.

• Il s'agit d'une extension de syntaxe JavaScript que nous utilisons dans React. Cela nous permet d'écrire du code plus facilement et de manière plus compréhensible lors du développement d'applications avec React. JSX nous permet d'écrire du HTML dans un fichier JavaScript. Lorsque nos codes sont rendus, les codes JSX sont convertis en codes JavaScript par React.
• Nous pouvons créer des composants et développer des applications avec React sans utiliser JSX.

return (
   <div> 
     <h1>Hello World</h1> 
     <h2>Hello React </h2> 
   </div>)
return React.createElement(‘div’, {}, React.createElement(‘h1’, {}, “Hello World”), React.createElement(‘h2’, {}, “Hello React”));

• Dans React, si nous devons renvoyer plus d'un élément, il doit toujours y avoir un élément wrapper.

return <h1>Hello World</h1> 
       <h2>Hello React </h2>
return <div> 
         <h1>Hello World</h1> 
         <h2>Hello React </h2> 
      </div>

return React.createElement(‘div’, {}, React.createElement(‘h1’, {}, “Hello World”), React.createElement(‘h2’, {}, “Hello React”) );

return React.createElement('h1', {}, "Hello World")                      
       React.createElement('h2', {}, "Hello React")

• https://tr.reactjs.org/
• https://www.udemy.com/course/react-the-complete-guide-incl-redux/
• https://www.geeksforgeeks.org/difference-between-imperative-and-declarative-programming/