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