🥇 Introdução ao React

endossar

Neste tutorial, veremos os fundamentos do React. Vamos renderizar uma lista de postagens que retornamos por meio de uma consulta ajax. Isso não será totalmente funcional, pois também sou um novato em reagir. Vou cobrir o que sei.

Primeiro, por que reagir?

O React existe para atualizar aplicativos e sites em resposta a mudanças constantes nos dados. React é apenas a camada de visualização. Portanto, se você deseja fazer uma chamada http ou dados de modelo, você precisa de outras ferramentas. Para nosso exemplo trivial, jQuery é suficiente. Para usar o react para todos os recursos do angular.js, você precisa de outras ferramentas. O Facebook recomenda usar o padrão Flux. Esta não é uma biblioteca, mas sim uma ideia. Achei isso incrivelmente inútil. Acho que é melhor não levar o fluxo muito a sério. Se você começar a codificar de forma consistente, as melhores práticas se tornarão aparentes. No momento, muitas coisas estão sendo forjadas. O Angular tem uma vantagem inicial no que diz respeito às melhores práticas, mas isso pode sair pela janela quando o Angular 2.0 for lançado. Esta será uma introdução suave para o que é toda essa coisa de reação .

Reagir é apenas a visão. Pense nisso como um substituto para html, mas mais complicado e feito de javascript. É comum ver o react usado com Buildpack ou browserify, usando módulos npm no lado do cliente. Também é comum ver a reação escrita no lado do servidor. O React é bom porque mantém o javascript e o html fortemente acoplados. JSX é uma sintaxe que permite escrever html em código javascript. O React compila JSX em HTML e controla as atualizações por meio de um DOM virtual.

O DOM Virtual

O React é tão rápido porque nunca se comunica diretamente com o DOM. O React mantém uma representação rápida na memória do DOM. renderos métodos retornam uma descrição do DOM, e o React pode comparar essa descrição com a representação na memória para calcular a maneira mais rápida de atualizar o navegador.

voltar à rotina

Tudo que você precisa é html e um arquivo javascript. Configure um index.html :

<body>
    <div id="content">
    </div>

    <!-- scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>

    <script type="text/jsx;harmony=true" src="js/app.jsx"></script>
  </body>

Para isso, incluímos react.js, o JSXTransformer, jQuery e um div onde todo o nosso aplicativo será renderizado. A biblioteca JSXTransformer converte JSX em javascript bruto. Você pode escrever reagir fora do normal, ES5 javascript, mas é mais trabalho. JSX tornará nossas vidas com React mais fácil. Todo o ponto de reação é acoplar nosso html e javascript firmemente. Faz sentido usar o transformador. Você pode usar os recursos do ES6, como funções de seta com React e JSX.

Então, em js / app.jsx iremos renderizar o conteúdo para a tela. Este é um padrão comum, mas em vez de renderizar html para a tela assim, a maioria dos aplicativos renderizará um componente.
React.render(<h1>Hello React</h1>, document.getElementById('content'));

Primeiro componente

Tudo o que você construir no React será um componente. React é mais simples do que angular porque faz menos. Tudo em react é um componente. Reagir é apenas a visão.

var App = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

React.render(<App />, document.getElementById('content'));

Pense em componentes como funções simples que recebem “adereços” e “estado” e renderizam HTML. O componente pode retornar apenas um nó html, neste caso, é um <h1>. JSX é semelhante ao HTML normal, mas não o mesmo.

Ola adereços

var App = React.createClass({
    render: function(){
        return (
            <h1>Hello {this.props.title}!</h1>
        );
    }
});

React.render(<App title='Title Property' />, document.getElementById('content'));

Olá estados, e aí AJAX

O React pensa nas UIs como simples máquinas de estado. Pensando em uma IU como estando em vários estados e renderizando esses estados, é fácil manter sua IU consistente.

e aí Ilíada

No React, você simplesmente atualiza o estado de um componente e, a seguir, renderiza uma nova IU com base nesse novo estado. React se encarrega de atualizar o DOM para você da maneira mais eficiente.

var App = React.createClass({

    getInitialState: function(){
        return {
            posts: []
        };
    },
    componentWillMount: function(){
        var self = this;
        $.get('/api/posts', function(posts){
            self.setState({posts: posts})
        });
    },
    render: function(){
        return (
            <div>
                <h1>All Posts</h1>
                <List posts={this.state.posts}/>
            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.posts.map(function(post){
                        return <li key={post.id}>{post.title}</li>
                    })
                }
            </ul>
        );

    }
});

React.render(<App />, document.getElementById('content'));

Isso aqui chamamos para obter “postagens” de um backend e renderizar uma lista para a página. A chave é necessária para reagir ao renderizar uma lista de elementos. Usamos jQuery aqui por sua funcionalidade ajax. No React, um proprietário é o componente que define os adereços de outros componentes. Então, por meio do componente proprietário , definimos o estado e passamos isso como uma propriedade para a função Listar. No React, os dados fluem do proprietário para o componente de propriedade por meio de adereços. é a magia do JSX com React.<App />

Mais sobre o estado

setState(data, callback)informa a React da alteração dos dados. Este método mescla dados e processa novamente o componente. Quando o componente termina de ser renderizado novamente, o retorno de chamada opcional é chamado. Na maioria das vezes, você nunca precisará fornecer um retorno de chamada, pois o React se encarregará de manter sua IU atualizada para você. Mais magia nos documentos .this.state

Ciclo de Vida do Componente

Os componentes têm um ciclo de vida para quando são adicionados, alterados ou removidos do DOM. Para cada estágio do ciclo de vida, podemos chamar uma função. Aqui estão alguns estados importantes do ciclo de vida:

Montagem : componentWillMountinvocado uma vez antes de ser adicionado ao DOM

Atualizando : componentDidMountinvocado uma vez quando o componente é adicionado ao DOM. Solicitações Ajax e interações com outras bibliotecas vão neste método.

Desmontagem : componentWillUnmountinvocado antes de um componente ser removido do DOM.

Recursos

Guia de primeiros passos do React do Facebook

Eventedmind é bom, custa dinheiro.

Conclusão

No React, gosto de como o html e o javascript estão intimamente ligados. Eu acho que a simplicidade de lidar apenas com adereços e estado também é legal. De certa forma, é bom ter funcionalidade limitada com React, dessa forma posso usar qualquer outra biblioteca que eu quiser. Com a codificação React, também sinto que estou ficando melhor no uso de javascript, módulos npm e novo ES6. O que eu aprendo com o React não parece específico do React.

Por outro lado, o React tem uma curva de aprendizado acentuada e não oferece todas as funcionalidades que desejo. Não estou familiarizado com o Backbone e implementar a “maneira do Flux” pode ser outra dor de cabeça. O roteamento é outra preocupação. Talvez no futuro eu vá procurar algo como o react-router . Estou animado com o amadurecimento do ecossistema React e com o lançamento do Angular 2.0 para implementar os recursos pioneiros do React. Todos podem vencer!

Para pesquisar mais, verifique o CÓDIGO FONTE . (Solicitações pull são bem-vindas)