React UI com JSX

JSX é uma extensão do JavaScript que adiciona um novo tipo de expressão. Você pode usar expressões JSX em qualquer lugar que você use outra expressão.

JSX é um atalho para o uso da API React.createElement(), que é muito mais conciso, fácil de ler e visualmente parece um pouco com a UI gerada (ambos são como árvore). Você não tem que usar JSX, mas praticamente não há desvantagens, então você provavelmente irá usá-lo.

JSX é baseado em tags como XML. Cada tag, como ${'<App />'}, é transformada em uma chamada para React.createElement(). Quaisquer atributos tornam-se props do componente instanciado. Atributos podem ser strings como foo = 'hello', ou eles podem ser expressões JavaScript interpoladas quando envolto em chaves como em ${'bar={baz}'} (que remete a variável baz).

As tags podem ser auto-contidas, como ${'<App />'}, ou elas podem incluir uma abertura e fechamento de tag, como ${'<App></App>'}. Para incluir elementos filhos, você precisará usar uma tag de abertura e fechamento e colocar as tags filhas dentro.

Componentes

Componentes são os blocos para contruir qualquer interface (UI). O React gerencia o mapeamento dos componentes JavaScript para os elementos HTML. Toda a interface é especificada declarando quais componentes devem ser renderizados e em qual ordem isso deve acontecer. Componentes são aninhados dentro de outros componentes, formando uma árvore de componentes. O componente de nível mais alto, ou a raiz da árvore, é conhecido como componente raiz.

Componentes que são Funções

Conceitualmente, componentes são como funções JavaScript. Eles aceitam entradas arbitrárias ("props") e retornam um elemento React descrevendo o que deve aparecer na tela. [1]

Vamos dar uma olhada no arquivo App.js. A princípio, esse componente App é uma classe que extende a classe Component do React, dessa maneira: class App extends Component. Mas ele poderia ser apenas uma função como essa:

const App = () =>
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>Welcome to React</h2>
    </div>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
  </div>

Experimente e perceba que nossos testes continuam garantindo que essa mudança não gera nenhum impacto na maneira como nosso component aparece para o usuário.

Seu Primeiro Aplicativo React

Vamos começar nosso primeiro aplicativo React. Vamos fazer o famoso TODO APP. Vamos atualizar nosso App.js para refletir um pouco do que esperamos ver em nosso TODO APP.

const App = () =>
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>React Todos</h2>
    </div>
    <div className="Todo-App">
      <form>
        <input type="text" />
      </form>
      <div>
        <ul>
          <li><input type="checkbox" />Learn JSX</li>
          <li><input type="checkbox" />Build an Awesome App</li>
          <li><input type="checkbox" />Ship It!</li>
        </ul>
      </div>
    </div>
  </div>

Agora adicione esse conteúdo ao arquivo App.css:

.Todo-App {
  padding-top: 20px;
  display: inline-block;;
  text-align: left;
}

input {
  font-size: 20px;
}

ul {
  padding: 0px;
}

li {
  list-style-type: none;
}

Nosso aplicativo deve estar com essa cara:

Nossos testes devem estar assim, com mais algumas informações sobre o diff do snapshot. Calma que está tudo sob controle! Vamos pressionar u e atualizar o nosso teste, ele vai direcionar nossa implementação no próximo passo.