Minhas notas do React - 1

Nesta série de artigos, compartilharei as anotações que fiz enquanto aprendia React. Gostaria de ressaltar que essas notas não são muito detalhadas, são apenas informações úteis que me ajudam a lembrar dos tópicos que já conheço. Se você acha que há alguma parte incorreta ou faltando, ficaria muito feliz se você pudesse escrevê-la nos comentários junto com suas fontes.

O que é React?

• É uma biblioteca JavaScript usada para criar interfaces de usuário.

• Podemos realizar essas operações mais rapidamente com o React, evitando as operações de baixo nível nas quais gastamos mais esforço com o JavaScript puro.

// 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>)
}

• Programação imperativa é uma abordagem de programação na qual cada etapa do processo é escrita uma por uma. O computador recebe instruções passo a passo sobre o que fazer. Por exemplo, para criar um botão com JavaScript, precisamos escrever todas as operações uma por uma da seguinte maneira:

// 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);

• A programação declarativa é uma abordagem que simplesmente explica o que você quer fazer, em vez de explicar cada passo um por um. Por exemplo; Para criar um botão que diga “Novo botão” usando JSX com React, basta escrever o código conforme abaixo. Basta dizermos ao React que queremos criar um botão com texto dentro , e o React executa o código que criará esse botão em segundo plano.

• É um aplicativo web que não envia uma solicitação ao servidor e renderiza o HTML recebido como uma solicitação toda vez que acessamos uma nova página em um aplicativo web, mas recebe um único arquivo HTML do servidor e determina onde exibi-lo manipulando o DOM com JavaScript.

• Em essência, é uma estrutura composta por HTML, CSS, JS. Qualquer coisa visível no navegador pode ser um componente. Isso nos poupa de escrever códigos para elementos visuais semelhantes repetidamente. Poder usar um componente que criamos repetidamente e detalhar o trabalho feito torna os componentes atraentes.

• É uma extensão de sintaxe JavaScript que usamos no React. Ele nos permite escrever código de forma mais fácil e compreensível ao desenvolver aplicativos com React. O JSX nos permite escrever HTML dentro de um arquivo JavaScript. Quando nossos códigos são renderizados, os códigos JSX são convertidos em códigos JavaScript pelo React.
• Podemos criar componentes e desenvolver aplicativos com React sem usar 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”));

• No React, se vamos retornar mais de um elemento, sempre deve haver um elemento 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/