Skip to content
RoadMap Programing
RoadMap Programing Yuri Caetano
More
Share
Explore
Quarter 2 React Kenzie Academy

27/07/20 Primeiros Passos no React

Esse lição pode ser vista com uma instrução extra em vídeo:
https://youtu.be/TBtagI-x5KQ
⁠
⁠
E documento extra de pdf de instruções primeiros passos no react:
download mapa primeiros passos-react.pdf
⁠
⁠

Então, oque é o react?

O facebook diz: é declarativo, eficiente, e flexivel. Certo, mas o que são essas caracteristicas do React?
Declarativo: se você diz algo para alguém fazer, passo-a-passo, isso não é declarativo, é imperativo.
Se você dizer para o computador cozinhar para você, no modo imperativo, você precisa dizer, palavra-por-palavra e passo-a-passo como fazer isso, mais se for no modo declarativo não, você presume que o computador já sabe como cozinhar, ele já não precisa aprender como fazer.
Componentes: Você pode fazer e reutilizar um monte de componentes, como uma player de vídeo, esse player de vídeo você pode inseri-lo em qualquer página ou local que você quiser sem quebrar o código.
Flexivel: O React é flexivel, por que você pode usá-lo onde quiser, como um dispositivo mobile, desktop e smart-tvs, mudando bem pouca coisa as sintaxes.
Site oficial do react:
https://reactjs.org/
⁠
Documentação:
https://reactjs.org/docs/getting-started.html
⁠
⁠

Como a biblioteca React funciona?

A renderização do DOM em html é um pouco lenta, e tem custo alto. Mas se você precisa mudar apenas um trecho de código, o React é melhor para isso, porque ele faz um espelho do DOM original (renderizado pela primeira vez), e compara cada vez que os novos elementos, estados ou eventos, são modificados.
Na documentação do React diz: "os componentes permitem separar a interface do usuário em partes independentes reutilizáveis, pense como se cada peça estivesse separada”.
Abaixo do exemplo do “Hello World”, que você pode fazer com html simples, sem instalar nada. Você pode colocá-lo em seu arquivo html e abri-lo no navegador.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, React!</title>
</head>
<body>
<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
const element = React.createElement('h1', null, 'Hello, React!');
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>
A sintaxe é: Primeiro, voce precisa criar um elemento no JavaScript usando react, assim:
react.createElement(’element’, props, ‘Hello, React!’);
ok, agora você precisa saber, no ‘element’ você coloca o seu elemento html, como ‘h1’, ‘div’, ‘span’, ou seja oque você quiser. E as propriedades, vamos deixar sem isso, para o exemplo do ‘Hello World’, por que não vamos usar ‘estado’ agora. Depois você coloca um ‘Node text’ ou o que você quiser.
ReactDOM.render(
element,
document.getElementById('root')
);
Ok, depois de tudo você precisa chamar a função reactDOM.render();
⁠
image.png
⁠
⁠
Funcionou! E esse foi o resultado, a dica no dia de hoje! Espero ver você em breve para dicas rápidas.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.