Introdução a React e JSX
Introdução a React e JSX
React é uma biblioteca JavaScript declarativa, eficiente e flexível para a criação de interfaces de usuário (UI).
Com esse exemplo surge também o conceito de componentes, uma das bases do React.
O modo como o React trabalha para criar interfaces de usuário (ou User Interfaces, as UIs) é por meio da quebra de toda a estrutura da aplicação em componentes.
Se você tem experiência na criação de sites, deve estar acostumado a ter todo o código HTML de uma página em um único arquivo.
O que o React propõe é o contrário: separar todo o código em pequenas partes (em arquivos diferentes), que se comportam como componentes reutilizáveis.
Se há uma vantagem clara que o React traz é no modo como ele trabalha com o DOM (Document Object Model) e atualiza os componentes de acordo com seus estados.
Em uma aplicação JavaScript tradicional, o programador deve se preocupar em descobrir quais dados mudaram para poder alterar o DOM e os estados dos elementos criados. Isso é muito trabalhoso e pouco eficiente (lembra do exemplo do botão de curtir acima?).
O que o React propõe é a criação do seu próprio DOM, mais eficiente, no qual os componentes vivem, o que é mais conhecido como Virtual DOM.
Assim, toda vez que um componente é renderizado, o React atualiza o Virtual DOM de cada componente já renderizado e busca as mudanças. E como o Virtual DOM é leve, esse processo é muito rápido.
O React então compara o Virtual DOM com uma imagem do DOM feita antes da atualização e descobre o que realmente mudou, atualizando somente os componentes que mudaram de estado.
A seguir iremos mostrar como o html abaixo é contruído utilizando React puro.
.my-title{ color: blue } .my-wrapper{ background-color: red; }
<div class="my-wrapper"> <h1 class="my-title">Olá!</h1> <ul> <li classname="item-1">item 01</li> <li classname="item-2">item 02</li> <li classname="item-3">item 03</li> </ul> </div>
Acesse o link codepen.io (pode ser https://codepen.io/totemarcal/pen/WNeGRNZ) adicione o código css, o html abaixo e o código React a seguir. Na seção de javascript adicione as biblitecas do React abaixo. https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js
<div id="app"></div>A linha 1 cria um componente (React.createElement) h1 com a classe ‘my-title’ e o texto Olá, a linha 6 cria um novo componente ul que possui dentro dele mais 3 componentes li (item 01, item 02 e item 03). Na linha 15 é criado mais um componente, desta vez com uma div e o componente ‘ourList’ com uma lista é adicionado na div. Por fim, na linha 20 busca a referência da div ‘app’ e na linha 21 os componentes React são adicionados na div ‘app’.
const titleWithClass = React.createElement( 'h1', {className: 'my-title'}, 'Olá!'); const ourList = React.createElement( 'ul', null, [React.createElement('li', {classname: 'item-1'}, 'item 01'), React.createElement('li', {classname: 'item-2'}, 'item 02'), React.createElement('li', {classname: 'item-3'}, 'item 03') ] ); const my_wrapper = React.createElement( 'div', {className: 'my-wrapper'}, [titleWithClass], ourList); const container = document.getElementById('app'); ReactDOM.render(my_wrapper,container);É facil perceber que a criação de componentes com React.createElement é passa a ser trabalhoso. Uma forma mais simples de fazer esse trabalho utilizando JSX está abaixo. O compoente React.Component rederiza através do método ‘render’ um código escrito em html.
class TitleWithClass extends React.Component { render(){ return ( <h1 class="my-title">Olá!</h1> ); } } class OurList extends React.Component { render(){ return ( <ul> <li classname="item-1">item 01</li> <li classname="item-2">item 02</li> <li classname="item-3">item 03</li> </ul> ); } } class MyWrapper extends React.Component { render(){ return ( <div class="my-wrapper"> <TitleWithClass /> <OurList /> </div> ); } } ReactDOM.render(<MyWrapper />,document.getElementById('app'));
Referência:
https://tableless.com.br/react-o-que-e-e-como-funciona-essa-ferramenta/https://www.udemy.com/course/construa-aplicativos-mobile-do-zero-com-react-native
Pingback: Introdução a React e JSX: State, Props e Function Component - Desafios de Ti