Introdução ao React.js

React.js é um flexível e baseado em componentes Biblioteca JavaScript para construindo interfaces de usuário interativas. isso foi criado e de código aberto pelo Facebook e é usado por muitas empresas líderes de tecnologia, como Dropbox, AirBnB, PayPal e Netflix. Reagir permite que os desenvolvedores criar aplicativos com muitos dados que pode ser atualizado sem dor por re-render apenas os componentes necessários.

Reagir é o Ver camada da MVC padrão de design de software, e principalmente concentra-se na manipulação de DOM. Como hoje em dia todo mundo fala sobre o React, neste post vamos dar uma olhada em como você pode começar com isso.

Instale React

Você pode instalar o React com o gerenciador de pacotes npm ou por adicionando as bibliotecas necessárias manualmente para sua página HTML. É recomendado usando Reagir com Babel que permite que você use a sintaxe ECMAScript6 e JSX no seu código React.

Se você quiser instalar o React manualmente, os documentos oficiais recomendam a use este arquivo HTML. Você pode baixar a página clicando no Arquivo> Salvar Página como… menu no seu navegador. Os scripts que você precisará (React, React DOM, Babel) também serão baixados no react-example_files / pasta. Em seguida, adicione as seguintes tags de script ao seção do seu documento HTML:

Em vez de baixá-los, você pode adicionar os scripts React de CDN também.

Você também pode usar o versões minificadas dos arquivos JavaScript acima:

Se você preferir instalar Reagir com npm, a melhor maneira é usar o Criar aplicativo Reagir Repo Github criado pelo Facebook Incubator - esta é também a solução recomendada pelos docs do React. Além do React, também contém Webpack, Babel, Autoprefixer, ESLint e outras ferramentas de desenvolvedor. Para começar, use os seguintes comandos da CLI:

 npm instalar -g criar-reagir-aplicativo criar-reagir-aplicativo meu-aplicativo cd meu-aplicativo npm iniciar

Quando estiver pronto, você pode acesse seu novo aplicativo React no localhost: 3000 URL:

Se você quiser ler mais sobre como instalar o React, Confira a guia de instalação dos docs.

Reagir e JSX

Embora não seja obrigatório, você pode use a sintaxe do JSX nos seus aplicativos do React. JSX significa JavaScript XML, e isso transpila para JavaScript regular. A grande vantagem do JSX é que permite incluir HTML em seus arquivos JavaScript, portanto, torna mais fácil definir os elementos React.

Aqui estão as coisas mais importantes para saber sobre o JSX:

Tags que começar com minúsculas (caso de camelo inferior) são processados como elementos HTML regulares.
Tags que começar com maiúsculas (caso de camelo superior) são processados como componentes Reagir.
Qualquer código escrito dentro de chaves … são interpretados como literal literal.

Se você quiser saber mais sobre como usar o JSX com o React confira esta página a partir dos documentos, e para o documentação padrão do JSX você pode dar uma olhada no wiki do JSX.

Criar elementos React

Reagir tem um arquitetura baseada em componentes em que os desenvolvedores criam componentes reutilizáveis para resolver problemas diferentes. Um componente React é formado por alguns ou muitos Reagir elementos que são as menores unidades de aplicativos React.

Abaixo, você pode ver um exemplo simples de um elemento React que adiciona um botão Clique em mim a uma página HTML. No HTML, adicionamos um

recipiente com o "myDiv" ID que será preenchido com o elemento React. Criamos nosso elemento React dentro de um

   Nós renderizamos nosso elemento React com o ReactDOM.render () método qual leva dois parâmetros requeridos, a Reagir elemento () e seu contêiner (document.getElementById ('myDiv')). Você pode ler mais sobre como funcionam os elementos React no “Elementos de renderização” seção dos documentos.
 Crie componentes
 Reagir componentes está Unidades de interface do usuário reutilizáveis e independentes em que você pode atualizar facilmente os dados. Um componente pode ser feito de um ou vários elementos React. Adereços está entradas arbitrárias você pode usar para passar dados para um componente. Um componente React funciona de forma semelhante às funções JavaScript - toda vez que é invocado, gera algum tipo de saída.
 Você pode usar o sintaxe de função clássica ou o novo Sintaxe da classe ES6 para definir um componente React. Neste artigo, vou usar o último, já que o Babel nos permite usar o ECMAScript 6. Se você estiver interessado em como criar um componente sem o ES6, dê uma olhada na página Componentes e Adereços dos documentos..
 Abaixo, você pode ver o componente simples Reagir vamos criar como exemplo. É uma notificação básica que o usuário vê depois de fazer login em um site. Existem três partes de dados que mudar de caso para caso: o nome do usuário, o número de mensagens e o número de notificações. como adereços.
  
Cada componente React é uma classe JavaScript que estende o React.Component classe base. Nosso componente será chamado Estatísticas como ele fornece ao usuário uma estatística básica. Nós primeiro criar o Estatísticas classe com o class Stats extends React.Component … sintaxe, então nós renderizá-lo para a tela chamando o ReactDOM.render () método (já usamos o último na seção anterior).
  A classe Stats extends React.Component render () return (  Olá this.props.name, você tem this.props.notifications novas notificações e this.props.messages novas mensagens. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 O primeiro argumento do ReactDOM.render () método consiste em o nome do nosso componente React () e seus adereços (nome, notificações, e mensagens) com seus valores. Quando declaramos os valores dos objetos, as strings devem ser entre aspas (gostar "John Doe") e valores numéricos dentro de chaves (gostar 3).
 Note que por causa do JavaScript, nós usava nome da classe ao invés de classe a fim de passar um atributo de classe para uma tag HTML (className = "summary").
 A página HTML correspondente é a seguinte:
          
    
 Nos documentos do React, há muitos outros exemplos interessantes sobre como construir e gerenciar componentes React, e o que mais saber sobre adereços.
 Leitura adicional
 Com o React, o Facebook introduziu um novo tipo de estrutura no desenvolvimento front-end que desafia o padrão de design MV *. Se você quiser entender melhor como funciona e o que você pode e não pode alcançar com isso, aqui estão alguns artigos interessantes que podem ajudar:
 Postagem do blog do Facebook em porque eles construíram o React.
 O blog brilhante de Andrew Ray sobre o bem e o mal de Reagir.
 Codificador ou como Reagir e AngularJS comparar.
 O artigo da FreeCodeCamp sobre se MVC está morto no front-end.
 Artigo do HackerNoon sobre como otimizar o desempenho relacionado ao React.