Conheça o ExtReact

Olá pessoal, tudo certo?

Hoje, irei falar sobre o React a biblioteca javascript do momento, e o ExtReact e por que usá-los e como fazer essas tecnologias rodar em sua máquina.

O que é React?

Se você não conhece o que é o React, ele é uma biblioteca JavaScript super popular mais conhecida por ser utilizada pelo facebook e é usada para criar interfaces com o usuário. É a camada de visualização para aplicativos da web.

Foi criado pela primeira vez por Jordan Walke, um engenheiro de software que trabalha para o Facebook.

O React foi implantado pela primeira vez no feed de notícias do Facebook em 2011 e no Instagram.com em 2012, e em 2013, o código foi aberto para a comunidade, o que colaborou para sua grande popularização.

O React permite que os desenvolvedores criem grandes aplicativos da Web que podem alterar dados, sem recarregar a página. O principal objetivo do React é ser rápido, escalável e simples. Funciona apenas em interfaces de usuário no aplicativo. Isso corresponde à exibição no modelo MVC. Ele pode ser usado com uma combinação de outras bibliotecas ou estruturas JavaScript, como o Angular JS no MV

No coração de todas as aplicações do React estão os componentes . Um componente é um módulo independente que renderiza alguma saída. Podemos escrever elementos de interface como um botão ou um campo de entrada como um componente React.

Estrutura

Suporte Sistema de Tipos

React vem com uma maneira embutida para validar adereços, estes são chamados propTypes. Os componentes do React podem fazer parte de uma hierarquia de componentes maiores, portanto, uma boa prática é validar os tipos de dados prop. Pense em propTypes como a construção de um sistema fortemente tipado dentro de cada componente. Esse tipo de sistema adiciona clareza nos componentes do React.

Para declarar um validador propType, digamos que você tenha um componente MyReactComponent. Este componente React possui um prop requerido chamado myComponentPropertyde string de tipo.

Por exemplo:

MyReactComponent.propTypes = {
myComponentProperty: PropTypes.string.isRequired
};

Ao declarar propTypes, é fácil para qualquer programador que examine o código entender sua intenção. Esses validadores lançarão erros que aparecem no console quando você passa o tipo errado.

O React suporta muitos validadores propType que aprimoram o sistema de tipos. Tenha em mente que você pode encadear isRequired para garantir que um aviso seja exibido quando o suporte estiver faltando.

Aqui está a lista completa de tipos de props :

• PropTypes.array: prop deve ser uma matriz

• PropTypes.bool: prop deve ser um booleano

• PropTypes.func: prop deve ser uma função

• PropTypes.number: prop deve ser um número

• PropTypes.object: prop deve ser um objeto

• PropTypes.symbol: prop deve ser um símbolo

• PropTypes.string: prop deve ser uma string

PropTypes correspondem ao sistema de tipos primitivos dentro do JavaScript. Pense em propTypes como um superconjunto do sistema de tipos primitivos que agora valida o tipo que você passa para o componente.

Componentes

O React combina a interface do usuário e o comportamento dos componentes. Alguns componentes do ExtReact de forma exemplificada.

Recursos

JSX: Seu código e feito com formato jsx, que nada mais é do que um javascript com “splash” pra html, porém também podemos escrever em JavaScript puro e usar frameworks por exemplo o Ext JS.

Native React: É uma estrutura JavaScript para escrever aplicativos móveis reais e nativos para iOS e Android. Ele é baseado no React, a biblioteca JavaScript do Facebook para criar interfaces de usuário, mas em vez de segmentar o navegador, ele segmenta plataformas móveis. Em outras palavras: os desenvolvedores da web agora podem escrever aplicativos móveis que parecem verdadeiramente “nativos”, tudo a partir do conforto de uma biblioteca JavaScript que já conhecemos e amamos. Além disso, como a maior parte do código que você escreve pode ser compartilhado entre as plataformas, o React Native facilita o desenvolvimento simultâneo para Android e iOS.

Componentes Flexíveis e Reutilizáveis

Significa que a sua aplicação pode ser dividida em pequenos blocos / componentes. Eles anda podem ser mantidos e escaláveis ​​após serem divididos.

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.

Para entender melhor essa proposta, vamos analisar a página principal da Udacity:

Pensando em uma hierarquia, é possível organizar a página em componentes da seguinte maneira:

• Barra Newsletter (1)

• Menu Superior (2)

• Botão Menu (3)

• Botão Chamada (4)

• Painel Principal (5)

• Painel Lateral (6)

• Patrocinadores (7)

Esse é apenas um dos possíveis modos de organização, claro: cabe ao desenvolvedor pensar como será a estrutura dos componentes.

O importante aqui é entender que cada um desses componentes pode ser reutilizado em qualquer outra página do site, como o Menu Superior.

Uma vez que o desenvolvedor esteja familiarizado com a abstração proposta pelo React, o trabalho se torna muito mais fácil e menos tempo é gasto na criação das aplicações.

Demonstração de um simples jogo desenvolvido com React

Motivos para escolher React

Curva de Aprendizado

Se você já possui alguma experiência com JavaScript, HTML e CSS vai aprender facilmente o React, enquanto Angular e Ember são referidos como ‘Linguagem específica de domínio’, o que significa que é difícil aprendê-los.

Ligação de dados unidirecional

É sempre fácil ver os dados mudando de lugar, isso ajuda a monitorar, e depurar componentes independentes do React rapidamente, especialmente em grandes aplicações.

Utilizado pelo Facebook

É muito bom ter uma empresa desse porte utilizando essa tecnologia só demonstra como ela é poderosa, e que vale a pena ser testada.

Renderização no lado do servidor (one-way-data-binding)

O recurso mencionado acima fornece a criação de aplicativos da web isomórficos / universais. Ele acelera os carregamentos da página inicial porque os usuários não precisam esperar por carregamentos de JavaScript antes de exibir sites.

Como instalar em sua máquina

Se interessou e e quer testar?

basta ter a ultima versão do Node.js instalada em sua máquina, e seguir os seguintes passos no Cmd

npx create-react-app 'nome da pasta do projeto'

cd 'nome da pasta do projeto' 'nome da pasta do projeto' code

e pronto sua primeira aplicação em React já estará instalada agora para executa-lá basta digitar em seu prompt de comando

npm start

Se os passos foram feitos corretamente uma Tela como essa sera gerada em seu localhost

Facilitando seu desenvolvimento com ExtReact

O React não inclui nenhum componente pré construído, seus desenvolvedores precisam escolher construir esses componentes a partir do zero ou pegar um componente pronto da comunidade. Porém usando o ExtReact da Sencha, você pode desenvolver aplicativos da Web mais rapidamente. O ExtReact inclui mais de 115 componentes de interface pré-configurados e pré-testados. Você pode encontrar dois tipos de pacotes que oferecem recursos padrão e premium.

O ExtReact também possui uma ampla documentação sobre como usar e personalizar esses componentes. Exceto isso, você pode encontrar alguns temas estilizados prontos para seus aplicativos futuros.

Com Suporte a IE11+, Chrome, Chrome/Stock Browser on Android 4.4+, Firefox, Microsoft Edge no Windows 10, Safari no IOS9+, SAfari 9+, Opera.

Veja algumas telas exemplos abaixo:

Aqui estão algumas estasticas sobre a Sencha, empresa que desenvolveu o ExtReact:

Implementando o ExtReact em sua Máquina

Requisitos do ExtReact

Requisitos do ExtReact

⦁ Node 8.11+

⦁ NPM 6+

⦁ Java 8 e 11

⦁ Sencha Cmd

para utilizar o ExtReact primeiro você deve ter o Sencha CMD instalado em sua máquina, e o Sencha Cmd tem seus requisitos mínimos que listei abaixo, vamos para os passos:

Instale o Ruby, e em seu terminal de comando digite:

Instalação do Sencha Cmd

Faça o download do Sencha Cmd , e instale em sua máquina,

Você também precisará instalar o Ruby para compilar temas e aplicativos que usam o Sass. Ruby difere pelo sistema operacional:

Windows : Faça o download do Ruby Obtenha a “.exe” versão do arquivo do software e instale-o.

Mac OS : Ruby é pré-instalado. Você pode verificar se o Ruby está instalado com o comando Ruby -v .

Ubuntu : Use o sudo apt-get install ruby2.0.0 para baixar o Ruby.

Se você usar o Cordova ou o PhoneGap, talvez tenha outros requisitos para essas ferramentas.

O instalador adicionará uma entrada à sua variável de ambiente em seu PATH.

Verique a instalação

Para ver se o seu Sencha Cmd está funcionando digite abra seu prompt de comando e digite:

sencha

Veja se retorna essa resposta

Sencha Cmd v6.7.0.63

Para verificar se há alguma atualização no do Secha Cmd disponível digite:

sencha upgrade --check

E para fazer uma atualização da versão mais recente digite o comando:

sencha upgrade

se você deseja saber um pouco mais sobre o sencha Cmd ja escrevemos um post sobre ele no blog confira: leia

Instalação do ExtReact

Agora que você já tem o React e o Sencha Cmd instalados em sua máquina (se não instalou leia alguns paragrafos acima com o passo a passo de instalação do React e do Sencha Cmd) e depois prossiga para o ExtReact.

Etapa 1: inscreva-se

Comece com a versão Trial por 30 dias ou compre a licença, Preencha o formulário para se registrar e peça o download, um e-mail sera enviado para seu e-mail com informações de seu login e senha (importante para instalação) pois o ExtReact trabalha com Registro Npm Privado que oferece acesso imediato aos pacotes do ExtReact e aos pré-lançamentos antecipadamente.

Versão Trial :

Comece gratuitamente por um periodo de 30 dias.

Nota: Clientes Ext JS, já tem acesso ao ExtReact

Etapa 2: faça o login no repositório do NPM

Depois de se inscrever ou comprar o produto, comece fazendo login no repositório com o @senchaescopo.

npm login --registry=https://npm.sencha.com --scope=@sencha

Nota: Seu login é seu e-mail porém no lugar do @ a Sencha troca por .., você vai notar essa diferença quando a Sencha enviar seu login para seu e-mail já com essa alteração, mais vale citar para não gerar confusão.

Etapa 3: instalar a CLI do App Generator

Em seguida, instale o comando CLI do gerador de aplicativos ExtReact ext-react-gen. Isso permitirá que você crie rapidamente um aplicativo ExtReact.

npm install -g @sencha/ext-react-gen

Etapa 4: criar um aplicativo

Existem 2 formas para se criar sua aplicação ExtReact:

A que eu usei esse comando que achei ser mais rápido que o QuickStart.

`ext-react-gen app -n NomedoseuApp`

Ao finalizar o passo 3, seu prompt de comando vai recomendar um QuickStart desse comando.

`ext-react-gen app -i`

Se você quiser ver e alterar os padrões para package.json clique digite y do contrario digite n

Digitando y você podera mudar o nome padrão de seu app, o tema (desing) que ele deve seguir, se você quer usar linguagem JavaScript ou TypeScript.

Nota: se o comando ext-react-gen retornar o erro não é reconhecido como nome de cmdlet, verifique se seu path de variável de ambiente esta apontando corretamente o caminho da onde esta o arquivo ext-react-gen.

Etapa 5: execute o novo aplicativo

Inicie o aplicativo recém-criado no navegador padrão com esses comandos.

cd ./nome-do-seu-app 

npm start

Uma tela como essa sera gerada.

Nota: se na sua aplicação der erro de internal/child_process se copie e cole todo o conteúdo do seu sencha Cmd que esta localizado na pasta 6.7.0.63(versão do cmd que utilizei), para a pasta SeuApp\node_modules\@sencha\cmd de seu aplicativo, isso ira resolver o problema.

O repositório do ExtReact contem vários aplicativos, vale a pena conferir para aprender mais: github

Conclusão

O React é atraente porque abrange muitas práticas de programação disponíveis no JavaScript além de ter uma biblioteca leve e com a ajuda dos componentes pre construídos do ExtReact você consegue criar aplicações ricas com um código limpo e de alta qualidade.