Voltar à listagem

Junior Alves

Senior Developer

Foto: Unsplash

21 de agosto de 2020 • 4 minutos de leitura

Começando com React

Conceitos básicos por trás do React!

Introdução

O objetivo desse post é entender os conceitos mais básicos do React.

Primeiro vamos criar um projeto com apenas dois arquivos: (caso você utilize o VS Code, tem uma dica massa no final :D )

index.html

script.js

Dentro do arquivo index.html, vamos criar uma div com id="root" e importar nosso script.js, como no exemplo:

index.html

<!DOCTYPE *html*>
<html *lang*="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Start Learning</title>
  </head>
  <body>
    <div id="root"></div>
 
    <!-- Importa nosso script -->
    <script src="script.js"></script>
  </body>
</html>

Será nessa div que vamos inserir nosso componente React.

Precisamos de mais uma ultima coisa antes de partir para o Javascript, importar o React no nosso index.html:

index.html

<!-- Importa o React -->
<script
  src="https://unpkg.com/react@16/umd/react.development.js"
  crossorigin
></script>
 
<!-- Importa o ReactDOM -->
<script
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
  crossorigin
></script>

Por enquanto não vamos nos preocupar em entender os detalhes, apenas que o React é divido em várias "partes", o ReactDOM, por exemplo, é a parte responsável por manipular o DOM (Document Object Model).

Pronto, agora temos tudo o que precisamos para começar a entender o React!

No arquivo script.js, precisamos obter a div#root que criamos no nosso index.html, para isso podemos fazer:

script.js

const root = document.getElementById('root');

Dessa forma, selecionamos o elemento com id = root, dentro do index.html, como podemos ter um único elemento com ele id, esta perfeito!

Agora, para criar nosso primeiro elemento React, fazemos:

script.js

const titulo = React.createElement('h1', { id: 'title' }, 'Hello World');

O método createElement do React recebe como parâmetro:

a tag que será criada, no caso h1;
as propriedades da tag, no caso o h1 terá um id=title
o conteúdo para tag, nesse caso, o famoso "Hello World"

Para renderizar na tela, usamos o ReactDOM, que importamos junto com o React no index.html, dessa forma:

script.js

ReactDOM.render(titulo, root);

Onde o primeiro parâmetro é o elemento que será renderizado, e o segundo parâmetro é onde será renderizado.

Agora, abrimos nosso arquivo index.html:

Exibindo no Browser o Hello World criado

Podemos clicar com o botão direito e ir em inspecionar, e vemos que a tag h1, com o id="title" foi inserido dentro da nossa div id="root".

Podemos ir um pouco mais além

Vamos criar um subtítulo com a tag h2, dessa forma:

script.js

const subtitulo = React.createElement('h2', { id: 'subtitle' }, 'Subtitle');

E vamos criar também uma nova div, para agrupar o titulo e o subtitulo, assim:

script.js

const post = React.createElement('div', null, titulo, subtitulo);

Se você perceber, temos duas coisas interessantes aí:

Passamos null do segundo parametro, o quer dizer que não vamos passar propriedades para esse elemento
No final, passamos dois parametros: titulo e subtitulo, isso porque, o ultimos parametro do createElement pode receber tanto o conteudo para a tag, como filhos.

Vamos no browser para entender o que aconteceu na prática:

Massa né?

Dica

Se você utiliza o VS Code para escrever seus códigos, instale a extensão Live Server, assim, basta ir no arquivo index.html e clicar com o botão direito do mouse, e ir em Open with Live Server. O massa é que, sempre que você salva qualquer arquivo dentro desse projeto, ele faz um reload automático!

Conclusão

Nesse post aprendemos o funcionamento básico do React.

Na vida real, não utilizamos o React dessa forma, no próximo post, vamos aprender a começar um projeto com o create-react-app.

Te espero lá!

•

Curtiu? Compartilhe esse post: