biblioteca

React 17 – Conheça o que vai mudar no JSX

Olá Web Developers! O React 17 foi lançado e não trouxe nenhuma funcionalidade nova. Porém, ele veio com algo que vai mudar como o JSX funciona e um detalhe de como você lida com ele.

Como o JSX funcionava até agora

Os navegadores não entendem JSX. Portanto, é necessário que uma ferramenta como Babel faça a “tradução” do JSX para JavaScript comum.

Isso significa que quando você escreve o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Teremos o seguinte resultado:

function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

Note que o JSX é substituído por React.createElement(). Por consequência, mesmo que você não fosse usar algo do React, era necessário importá-lo:

import React from 'react';

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Caso você não importasse, você teria um erro na hora da transpilação. E muitos iniciantes no mundo do React já tiveram esse mesmo problema, sem entender onde estavam errando.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O novo JSX Transform do React 17

No React 17 em diante não vamos mais precisar importar o React para apenas usar JSX. A fim de simplificar as coisas, o novo transformador de JSX irá injetar automaticamente as funções necessárias.

Então o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Vai se tranformar em:

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

E o melhor de tudo: você não precisa mudar nada no seu código, pois isso é compatível com os códigos já existentes!

Se acaso você quiser atualizar seu código, a própria equipe de desenvolvimento do React criou um script que remove automaticamente as importações não usadas do React. Basta executar npx react-codemod update-react-imports.

Mas existe alguma vantagem no novo JSX Transform?

Sim! Além de não precisarmos mais importar o React quando não formos usá-lo, também teremos uma melhora no tamanho dos arquivos.

// antigo
function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

// novo
function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

Além disso, também foi dito que o formato anterior não possibilitava certas melhorias e simplificações, que agora com o novo formato serão possíveis.

De acordo com a equipe de desenvolvimento do React, esse novo formato também vai permitir futuras melhorias e até a redução do número de conceitos que as pessoas precisam saber para aprender React.

Desenvolvedor React
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox.Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO

5 motivos para estudar React

Utilizada em milhares de aplicações, o JavaScript certamente está entre as linguagens de programação mais importantes. Isso tudo se deve também aos frameworks e bibliotecas que a tem como base, fazendo com que o JavaScript atinja novos patamares constantemente. Sendo assim, este artigo irá lhe apresentar cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React.

React está em alta no mercado

Podemos nos basear em dois indicadores de que algo está em alta no mercado: o alto número de pessoas que estão envolvidas e a quantidade de empresas que estão utilizando a ferramenta, sejam elas grandes, médias ou pequenas empresas. No caso do React, ambos estão em alta! Além disso, também podemos ver uma grande quantidade de oferta de vagas que pedem essa biblioteca. Aprender algo que tem uma boa aceitação no mercado é excelente.

Um dos fatores de sua popularidade é por ele ter sido criado pelo Facebook. Essa biblioteca de código aberto, que faz parte dos projetos open-source do Facebook, faz com que ele realmente ganhe muita visibilidade.

Segundo uma pesquisa do Stack Overflow deste ano (2020), podemos ver alguns indicadores. Ao focar puramente em estruturas da web, vemos que jQuery ainda é o líder, mas está lentamente perdendo terreno. Enquanto isso, o React vem aumentando sua participação no mercado.

Também podemos ver como os desenvolvedores gostam dessa biblioteca: ela está no topo entre os frameworks/bibliotecas mais amados e procurados.

Do React para o React Native

Ao aprender essa biblioteca, você não somente aprende como fazer interfaces web melhores, como pode usar os mesmos conceitos para fazer aplicativos para Android e iOS. Ao aprender o React, você pode complementar seus estudos com o React Native. O React Native também é disponibilizado de forma open-source pelo Facebook, permitindo criar aplicações móveis com interface nativa para iOS e Android. Ele se utiliza dos mesmos conceitos e design do React, exigindo baixo nível de esforço.

O React é flexível

Essa é uma ótima vantagem que resume bem um dos motivos para se aprender o React: ele é flexível e facilita a interface com outras bibliotecas e frameworks. Além disso, mesmo sendo uma bibioteca SPA, ele torna possível escrever aplicações que renderizam no servidor através do Next.js, fazendo com que as páginas carreguem mais rapidamente.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Uso de componentes reutilizáveis

Uma das suas principais características é a utilização de componentes que, em conjunto, criam uma interface. Com ele, você pode criar, reutilizar e combinar componentes no seu código. Um componente é como se fosse uma função JavaScript que permite dividir a interface em partes independentes e reutilizáveis, livre de outras dependências externas.

Nós podemos reutilizar um simples componente em múltiplas interfaces, onde componentes podem conter outros componentes. Isso facilita a manutenibilidade e o acompanhamento do código.

Facilidade no aprendizado

React, antes de tudo, é JavaScript. Se você já tem experiência com JavaScript, é possível absorver toda a proposta do React facilmente, criando aplicações modernas com pouco tempo de estudo. Considerando todos os itens acima, podemos afirmar que hoje, certamente, ele está entre os melhores frameworks JavaScript disponíveis no mercado.

Desenvolvedores iniciantes, antes de iniciarem seus estudos em algum framework ou biblioteca (no caso do React), devem adquirir uma boa base de front-end. Estude primeiro os fundamentos, conceitos, HTML, CSS e JavaScript. Aí sim depois você estará pronto para iniciar no mundo do React.

Qual a diferença entre Framework e Biblioteca?

Olá Web Developers! Você sabe qual a diferença entre Framework e Biblioteca? Pois esta é uma dúvida muito comum em programadores de vários níveis. Vamos entender melhor as características de cada um para finalmente entender do que se tratam.

O que são Bibliotecas?

Estantes em uma biblioteca com vários livros

Vamos imaginar que precisamos calcular quantos dias existem entre duas datas utilizando JavaScript. Mas no momento não há uma funcionalidade da linguagem que faça este cálculo para nós. Então teremos que criar uma função em que a gente passe duas datas e ela nos retornará a quantidade de dias.

E depois pode aparecer a necessidade de pegar uma data e adicionar um certo número de dias. Que data teremos como resultado? E se precisarmos adicionar horas ou minutos?

A príncipio podem parecer funções sem conexão, mas note que estamos falando de cálculos que nos remetem a tempo. Com o intuito de deixar o código mais organizado, podemos juntar estas funções em uma “coleção” de funções relacionadas ao cálculo de tempo.

Em conclusão, podemos dizer que uma biblioteca (do inglês library, não confundir com livraria que em inglês é book store) é uma coleção de códigos voltados a resolver um determinado tipo de problema.

Exemplos de Bibliotecas JavaScript

  • Moment.js: Biblioteca para converter, validar, manipular e exibir datas e horários
  • Chart.js: Biblioteca para a criação de gráficos
  • Voca: Biblioteca para trabalhar com Strings
  • mo.js: Biblioteca para criar animações incríveis com SVG. Já fizemos um post sobre como começar com o mo.js
  • React: Biblioteca para criar interfaces de usuário. Se quiser conhecer um pouquinho, temos um post aqui no blog para você conhecer o React
React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O que são Frameworks?

Já fizemos um post sobre o propósito dos frameworks. Mas vamos fazer uma pequena recapitulação.

Um framework possui várias funcionalidades prontas, e normalmente já possuem um fluxo de trabalho ou estrutura a serem seguidos. É algo bem mais abstrato do que uma biblioteca. Isso realmente confunde muitas pessoas. Por exemplo, o jQuery se autodenominava um framework, mas já faz um bom tempo que ele se chama de biblioteca.

O foco dos frameworks é mais amplo que das bibliotecas. Aliás, um framework pode ser feito a partir de uma coleção de padrões, APIs e até mesmo de bibliotecas.

Só para exemplificar, o Angular, framework JavaScript para desenvolvimento de aplicações, é feito a partir de bibliotecas de animação, requisições http, internacionalização, testes, tratamento de dados em formulários, reatividade, roteamento, etc.

Exemplos de Frameworks JavaScript

  • Angular: Framework para criação de aplicações web
  • Vue.js: Framework também para criação de aplicações web
  • Ionic: Framework para criar aplicativos mobile com Angular, React ou Vue
  • Express: Framework para criar aplicações com Node.js
  • LoopBack: Framework para criar APIs e microserviços com Node.js
Angular - Tópicos avançados
Curso de Angular - Tópicos avançados
CONHEÇA O CURSO

Mas então, qual a diferença entre Framework e Biblioteca?

Por mais que a gente tenha visto características de framework e biblioteca, ainda assim há confusão, pois nem sempre as funções do software deixa claro a sua natureza. É provável até que não seja nenhum dos dois. Bem como também é comum ver lugares chamando Angular de biblioteca e React de framework, sendo que na verdade é ao contrário.

Antes de tudo, algo que podemos notar além das diferenças já mostradas aqui é que normalmente as bibliotecas são usadas pelos nossos códigos, enquanto os frameworks é quem costumam utilizar os nossos códigos.

Por isso podemos diferenciar React de Angular. Se acaso você já usou os dois verá as seguintes diferenças:

No React nós temos basicamente funções para a criação de componentes e criação de estados. Estamos no controle o tempo todo, nós chamamos as funções do React, podemos decidir qual será a estrutura da nossa aplicação e o fluxo com o qual ela funciona. Se acaso a gente precisar de funcionalidades de roteamento, animações, internacionalização, etc, precisaremos buscar bibliotecas para isso.

function App(props) {
    return (
      <div>
        Olá, {this.props.name}!
      </div>
    );
}

ReactDOM.render(
  <App name="Taylor" />,
  document.getElementById('hello-example')
);

Em contrapartida no Angular todas essas funcionalidades já vêm inclusas. Há uma estrutura que devemos seguir (componentes, serviços, pipes, rotas, módulos), e o Angular é quem vai chamar o nosso código seguindo seu próprio fluxo. Essa característica de já ter uma estrutura é o principal diferencial entre um framework e uma biblioteca. Você pode notar que em nenhum momento nós chamamos alguma função como Angular.nomeFuncao(). Eventualmente, caso queira fazer algo num fluxo ou estrutura diferente, o Angular não vai entender e você terá um erro.

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {

}

Veja como já temos uma estrutura a seguir. É como se no framework nós precisássemos preencher os campos que ele pede, é ele quem está no controle de tudo.

Qual o melhor? Framework ou Biblioteca?

Podemos concluir que enquanto na biblioteca nós mesmos criamos a base e o fluxo, no framework já temos toda a estrutura pronta para utilizarmos e seguirmos. Mas isso não significa necessariamente que um é melhor do que o outro. São ferramentas diferentes para propósitos diferentes.

Ao passo que no Angular nós já temos toda a estrutura pronta, nos poupando desse trabalho, teremos menos liberdade para certas escolhas. Em contrapartida, no React temos que definir coisas comuns como arquitetura e fluxo, mas teremos mais liberdade de escolher cada biblioteca responsável por cada funcionalidade em nossa aplicação.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

O que é Redux?

Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript, criado por Dan Abramov. Ele nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional. Quando desenvolvemos aplicações utilizando Javascript, sempre temos que lidar com o gerenciamento de estado. O Redux veio para suprir essa necessidade de simplificar o controle dos estados de uma aplicação. Compartilhar estados entre vários componentes diferentes se torna uma coisa muito fácil quando o utilizamos.

React - Redux e Redux-Saga
Curso de React - Redux e Redux-Saga
CONHEÇA O CURSO

Ele basicamente tira a responsabilidade de cada um dos componentes de armazenar os estados, deixando tudo isso centralizado, sendo utilizado ao mesmo tempo por todos os componentes de forma compartilhada. Ele também roda em diferentes ambientes como servidor, cliente e nativo.

Fazendo o uso do Redux todos esses estados ficarão armazenados em uma árvore de objetos através do store. Para que isso aconteça, o Redux utiliza 3 recursos:

  • Store: você pode pensar em store como um container ou um grande centro de informações, que tem disponibilidade para receber e entregar o que o seu componente requisita. A store armazena de forma centralizada todos os estados da aplicação. Vale ressaltar que a store é imutável.
  • Actions: São ações disparadas da aplicação para o store. Elas são criadas através das action creators. As actions são a única forma de acionar uma mudança de estados no store.
  • Reducers: Cada dado da store deve ter o seu próprio reducer. Ele é encarregado de lidar com todas as ações e especificam como o estado da aplicação irá mudar de acordo com a action que foi enviada para o store.

O fluxo geralmente funciona da seguinte forma: um componente gera uma interação através de um clique dado pelo usuário na interface – por exemplo, assim, um action creator é acionado e dispara uma ação para o store. Essa ação chega até um reducer que irá processar e fazer a alteração do estado no store. Assim um novo estado será disponibilizado para o componente.

Também é importante saber que o Redux tem 3 princípios, sendo:
Todos os estados estarão disponíveis exclusivamente através do store: todo o estado da sua aplicação vai estar armazenado nesse store que é único, onde todos os componentes vão consultar nesse store.
Os estados são somente leitura: os componentes não podem fazer uma manipulação direta nas informações que estão nele.
As alterações são feitas através de funções puras: o Redux utiliza o conceito de programação funcional, por isso toda alteração no store é feita através de uma função pura, chamada de reducer. O reducer recebe o estado e a ação, onde com essa ação nós visualizamos o que precisa ser alterado no estado e o reduce entrega uma nova store do nosso estado da aplicação.

Por ser uma biblioteca o Redux pode até ser utilizado sozinho, mas ele é normalmente implementado em um conjunto de outras libs ou frameworks JavaScript (Ember, Vue, Angular…). Mas o comum mesmo, que você até já deve ter visto, é vê-lo em funcionamento com o React. É muito comum ver projetos e exemplos de React com Redux juntos, mas é bom deixar claro que o Redux não depende do React.

Até a próxima!

Desenvolvedor React Native
Formação: Desenvolvedor React Native
O React Native nos permite criar aplicativos mobile realmente nativos com JavaScript para Android e iOS. Ele vem sendo usado em aplicativos como Facebook, Instagram e Uber.Nesta formação vamos aprender a acessar APIs nativas, incluindo o desenvolvimento de nosso próprio código nativo (Java e Objective-C), integrá-lo ao JavaScript. Além de aprenderemos a trabalhar com aplicativos offline, como estilar nossos componentes, criar layouts responsivos e animados e como integrar o React Native com o Firebase.
CONHEÇA A FORMAÇÃO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200