Usando react.js e react-dom.js em uma página HTML

O arquivo react.js é o arquivo chave para criar elementos com React e escrever Componentes. Quando você pretende criar Componentes em um documento HTML(i.e, no DOM) você precisará também do arquivo react-dom.js. O arquivo react-dom.js depende do arquivo react.js e deve ser incluído depois de já ter incluído arquivo react.js.

Um exemplo de HTML que inclui propriamente o React é visto abaixo:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-15.2.0.js"></script>
    <script src="https://fb.me/react-dom-15.2.0.js"></script>
  </head>
<body>
</body>
</html>

Com os arquivos react.js e react-dom.js carregados no HTML, então é possível criar Elementos e Componentes do React e então renderizá-los no DOM. No HTML abaixo, o Componente HelloMessage é criado contendo um Elemento <div> que é renderizado no DOM dentro do Elemento <div id="app"></div> do nosso HTML.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://fb.me/react-15.2.0.js"></script>
        <script src="https://fb.me/react-dom-15.2.0.js"></script>
    </head>
<body>
    <div id="app"></div>
    <script>
        var Mensagem = React.createClass({
            displayName: 'Mensagem',
            render: function render() {
                return React.createElement('div',null,'Olá ',this.props.name);
            }
        });
        ReactDOM.render(React.createElement(Mensagem, { name: 'Valter' }), document.getElementById('app'));
    </script>
</body>
</html>

Essa configuração é tudo o que precisa para usar o React. No entanto, essa configuração não suporta o uso do JSX. A próxima seção vai discutir sobre o uso do JSX (Mantenha essa sigla em mente, você ainda vai ouvir falar muito dela).

Observações

  • Talvez tenha notado o uso do negrito ao falarmos de Elemento e Componente. Existe uma razão para isso. Queremos que tenha em mente essas duas palavras e procure meditar em seu significado. Se possível até pesquisar sobre a diferença entre esses dois itens do React que vamos ver mais a fundo nas próximas sessões.

  • Uma alternativa para o arquivo react.js é o arquivo react-with-addons.js que está disponível contendo uma coleção de módulos úteis para construção de aplicações React. Os complementos React são uma coleção de módulos úteis para a criação de aplicativos React. Estes devem ser considerados experimentais e tendem a mudar com mais freqüência do que o código base.

  • Não faça o elemento <body> como raiz de sua aplicação React. Sempre coloque uma <div> raiz dentro do <body>, dê um id e renderize dentro dele. Isso dá ao React flexibilidade para trabalhar com os filhos de sua div sem se preocupar em fazer alterações para os filhos do elemento <body>.

results matching ""

    No results matching ""