Dev JS para React - Pt 1
Fala galera, faz um tempo que eu não posto nada aqui, andei um tempo realmente desconectado do desenvolvimento, porém é algo que está tão profundo em minha alma e personalidade que não consigo evitar, sempre a vida me leva de encontro.
E sabe nos últimos tempos eu tenho visto uma caralhada de tutoriais péssimos e maneiras de ensinar React que realmente parece um chute nas bolas, ainda mais para alguém que tem aquela mente focada em utilizar sempre o jQuery direto da CDN e o Bootstrap também e criando apenas um arquivo JS enorme muitas vezes.
E então decido criar aqui um tutorial para que eu possa internalizar melhor os conhecimentos sobre React, espero realmente que isso também auxilie outros programadores a iniciarem a caminhada em direção ao React.
Por onde começar?
⚠️ É importante que você tenha um editor (IDE) instalado, caso não possua, você pode baixar o Visual StudioBora começar construindo nossa página html, que eu dei o nome de hello-world.html, então vamos inserir o seguinte código na pagina:
<html><body><div id="helloWorldApp"></div><script src="https://unpkg.com/react@17/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><!-- Babel Script --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/jsx">ReactDOM.render(<h1>Hello World</h1>, document.getElementById('helloWorldApp'))</script></body></html>
Perfeito agora você pode abrir esse arquivo em um browser, então você deve ver a página abaixo:
Parabéns você criou seu primeiro "Hello World" em React, mas agora você deve estar se perguntando
O QUE EU FIZ?
Vou explicar
Para usar o React em nossa pagina, carregamos dois scripts React de site unpkg.com:
Para usar o React em nossa pagina, carregamos dois scripts React de site unpkg.com:
- "react" é a biblioteca principal do React.
- "react-dom" possui métodos que permitem que você use o React com o DOM.
Conforme colocamos nesta parte do código
<!-- .... --><script src="https://unpkg.com/react@17/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><!-- .... -->
E claro ao invés de manipular diretamente o DOM com JavaScript simples ( criando o elemento h1 e depois adicionando ele ao body ), Utilizamos o método ReactDOM.render() do react-dom para dizer ao React para renderizar nosso título <h1> dentro de nosso elemento #helloWorldApp.
<!-- ... --><div id="helloWorldApp"></div><!-- ... --><script type="text/jsx">ReactDOM.render(<h1>Hello World</h1>, document.getElementById('helloWorldApp'))</script><!-- ... -->
E até agora beleza, porém os mais atentos devem estar se perguntando, por que também incluímos o "Babel Script" ?
<!-- ... --><!-- Babel Script --><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/jsx">ReactDOM.render(<h1>Hello World</h1>, document.getElementById('helloWorldApp'))</script><!-- ... -->
Infelizmente o Javascript não consegue entender esse "<h1>", pois isso é um código JSX, logo para que consigamos utilizar ele em nosso Render precisamos alterar o comum type="text/javascript" para type="text/jsx"
OK até aqui, mas você deve estar se perguntando o que é esse tal JSX?
O JSX é uma extensão de sintaxe para JavaScript que permite que você descreva sua interface do usuário em uma sintaxe familiar semelhante a HTML.
Porém como os navegadores não entendem JSX imediatamente, então você precisará de um compilador JavaScript, como um Babel, para transformar seu código JSX em JavaScript normal.
E a melhor parte do JSX é que não precisamos aprender nenhuma sintaxe nova, utilizamos o HTML padrão.
Agora para finalizar nosso post, vamos para um pouquinho de teoria só que com prática.
Agora para finalizar nosso post, vamos para um pouquinho de teoria só que com prática.
O React é um modelo de programação declarativa, diferente por exemplo do javascript Vanilla e jQuery que são modelos de programação imperativa. Ou seja a programação declarativa é como você comprar um lanche via aplicativo e a programação Imperativa seria como você preparar o lanche você mesmo.
Como nos exemplos abaixo:
React Declarativa<script type="text/jsx">ReactDOM.render(<h1>Hello World</h1>, document.getElementById('helloWorldApp'))</script>VSJS Imperativa<script type="text/javascript">const app = document.getElementById('helloWorldApp')const header = document.createElement('h1')const headerContent = document.createTextNode('Hello World')header.appendChild(headerContent)app.appendChild(header)</script>
Perceberam como você escreve menos com o React, também é mais simples de você realizar manutenções e sem contar que auxilia nessa simplicidade em caso de você trabalhar em grandes equipes.
Por hoje é tudo pessoal, mas não deixem de conferir vou postar durante essa semana mais coisas sobre React e vamos utilizar esse modelo que criamos.
Github dos arquivos
Comentários
Postar um comentário