Mis notas de reacción - 1

En esta serie de artículos, compartiré las notas que tomé mientras aprendía React. Quisiera aclarar que estas notas no son muy detalladas, son solo información que me permite recordar los temas que conozco. Si hay partes que crees que están mal o que faltan, estaría muy feliz si las escribieras en los comentarios junto con la fuente.

¿Qué es Reaccionar?

• Es una biblioteca de JavaScript utilizada para crear interfaces de usuario.

• Al evitar las operaciones de bajo nivel que hacemos con JavaScript estándar con más esfuerzo, podemos hacer estas operaciones más rápido con React.

// 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 programación imperativa es un enfoque de programación en el que cada paso del proceso a realizar se escribe uno por uno. A la computadora se le dice paso a paso qué hacer. Por ejemplo, para crear un botón con JavaScript, necesitamos escribir todas las operaciones una por una de la siguiente manera

// 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 programación declarativa es el enfoque que simplemente explica lo que se debe hacer en lugar de explicar cada paso uno por uno. P.ej; Para crear un botón que diga "Botón nuevo" usando JSX con React, basta con escribir un código como el siguiente. Simplemente le decimos a React que queremos crear un botón con texto dentro , mientras React ejecuta los códigos para crear ese botón en segundo plano.

• Cada vez que cambiamos a una nueva página en una aplicación web, se llama una aplicación web que envía una solicitud al servidor y no presenta el html como una solicitud, sino que toma un solo archivo html del servidor y manipula el DOM. con JavaScript para determinar dónde mostrar.

• En esencia, es una estructura que consta de HTML, CSS, JS. Todo lo que se ve en el navegador puede ser un componente. Nos evita tener que escribir código repetidamente para elementos visuales similares. Poder utilizar un componente que hemos creado una y otra vez y romper el trabajo realizado hace que los componentes sean atractivos.

• Es una extensión de sintaxis de JavaScript que usamos en React. Nos permite escribir código de una manera más fácil y comprensible mientras desarrollamos aplicaciones con React. JSX nos permite escribir HTML dentro de un archivo JavaScript. Cuando se procesan nuestros códigos, React convierte los códigos JSX en códigos JavaScript.
• Podemos crear componentes y desarrollar aplicaciones con React sin utilizar 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”));

• En React, si vamos a devolver más de un elemento, siempre debe ser un elemento contenedor.

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/