js

O que é o React Native?

Criado pelo Facebook em 2015 sobre a licença MIT, o React Native é um Framework para desenvolvimento de aplicativos móveis multiplataforma.

Um Framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Baseado no React, framework JS para desenvolvimento web, o React Native possibilita a criação de aplicações móvel multiplataforma (Android e iOS) utilizando apenas Javascript. Porém, diferente de outros frameworks com esta mesma finalidade (Cordova, por exemplo), todo o código desenvolvido com o React Native é convertido para linguagem nativa do sistema operacional, o que torna o app muito mais fluido.

React Native - Fundamentos
Curso de React Native - Fundamentos
CONHEÇA O CURSO

Características

O React Native possui diversas características marcantes e fundamentais para sua ampla adoção, como podemos ver abaixo:

  • Acessar a interface e os recursos nativos do Android e iOS utilizando JavaScript;
  • O código produzido é semelhante ao React para Web;
  • Possui a base de conhecimento compartilhada entre o desenvolvimento mobile e front-end;
  • Todo código desenvolvido é convertido para a linguagem nativa do sistema operacional;
  • Com o React Native conseguimos desenvolver aplicações para Android e iOS utilizando um código único;
  • Por ser multiplataforma, podemos desenvolver aplicações com React Native utilizando qualquer sistema operacional (Windows, macOS ou Linux).

Empresas que o utilizam

Por ser amplamente adotado na comunidade mobile, o React Native atraiu a atenção de diversas empresas, que fizeram questão de utilizá-lo em suas soluções mobile. Dentre estas empresas, podemos citar:

  • AirBnb: O AirBnb é uma das principais empresas a utilizar o React Native para seu aplicativo móvel;
  • Wix: O Wix, plataforma online de criação de sites, também utiliza o React Native em seu aplicativo mobile;
  • Facebook: Claro que o Facebook, empresa por trás do React Native, também iria utilizá-la para seu aplicativo móvel;
  • Tesla: A Tesla, principal montadora de carros elétricos, também utiliza esta tecnologia para seu aplicativo móvel;
  • Instagram: Além do Facebook, o Instagram (rede social do mesmo grupo), também utiliza o React Native para o desenvolvimento do seu app.

Como vimos acima, a adoção do React Native por grandes empresas é bem nítida, o que o torna ainda mais completo e utilizado por todo o mundo.

React Native - Componentes nativos
Curso de React Native - Componentes nativos
CONHEÇA O CURSO

Sintaxe

Apesar de ser baseado no React, o React Native não utiliza tags HTML para a criação de seus elementos. Ao invés disso, os elementos são criados utilizando tags nativas do React Native, como podemos ver no trecho de código abaixo:

import React from 'react';
import { Text } from 'react-native';

export default function Ola() {
  return (
    <Text>Olá, mundo!</Text>
  );
}

O Component serve para exibir um texto no aplicativo. Este componente é nativo do React Native, além de tantos outros que podem ser vistos em sua documentação oficial.

Podemos concluir que…

É notável a crescente demanda do uso de aplicativos móveis nos últimos anos. Pensando nisso, diversas empresas desenvolvem suas soluções para facilitar a criação destes aplicativos. Com o React Native, o Facebook lançou uma solução incrível para o desenvolvimento multiplataforma utilizando apenas código Javascript, o que facilita (e muito) os desenvolvedores que já possuem conhecimento em desenvolvimento web e até os que não possuem, já que é um framework com alta curva de aprendizado.

Desenvolvedor React Native Júnior
Formação: Desenvolvedor React Native Júnior
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 iniciar nossos estudos em React Native e depois aprender a acessar APIs nativas, incluindo o desenvolvimento de nosso próprio código nativo (Java e Objective-C) e integrá-lo ao JavaScript.
CONHEÇA A FORMAÇÃO

Utilizando arquivos estáticos no Flask

No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask.

Criando diretório dos arquivos estáticos

É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo:


Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima.

Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template.

Flask - Fundamentos
Curso de Flask - Fundamentos
CONHEÇA O CURSO

Utilizando arquivos estáticos no template

Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag link no head do arquivo HTML e referenciar nosso arquivo bootstrap.min.css:

Agora, no href do link, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em static/css/bootstrap.min.css. Sendo assim, temos que passar, como primeiro parâmetro do método url_for, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo filename, como vemos acima.

Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema Jumbotron do bootstrap, conseguimos criar uma página com todo o poder do framework:

Concluindo

A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método url_for do Jinja2.

Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série 🙂

© 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