Java para Web

O React.js é uma biblioteca/framework javascript voltada para a criação de interfaces de usuário na web.

• Stateful: todo funcionamento do framework é em torno de estados.
• Renderização fragmentada: apenas as partes da interface que sofrem alteração são atualizadas
• Baseado em componentes: os elementos da inferface podem ser encapsulados em componentes, facilitando a abstração e reutilização de componentes.
• Implementação gradual: o React pode ser inserido gradualmente na aplicação através da adaptação dos componentes

Este é um exemplo de um componente do React:

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 }
    }

    tick() {
        this.setState(state => ({
            seconds: state.seconds + 1
        }))
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        return (
            <div>
                Segundos: {this.state.seconds}
            </div>
        )
    }
}

No React, todos os elementos de uma página podem ser separados em componentes específicos, permitindo uma melhor organização e reutilização dos elementos.

const titulo = <h1>React</h1>

Apesar de lembrar as marcações do HTML, a sintaxe anterior não representa HTML ou mesmo uma string. Essa sintaxe é uma extensão do javascript chamada JSX, utilizada com o objetivo de oferecer uma linguagem de template, usada em conjunto com todo o poder do javascript.

O uso do JSX não é obrigatório ao trabalhar com o React, porém permite maior praticidade no desenvolvimento e correção de erros.

Um dos recursos úteis do JSX é permitir a inserção de variáveis dentro do conteúdo a ser renderizado.

const universidade = 'UNESC'
const titulo = <h1>Bem vindo à {universidade}</h1>

Podemos inserir qualquer expressão javascript válida em JSX, como funções e cálculos:

function conta(nome){
    return nome.length
}

const elemento = <p>Número de letras: {conta("Twitter")}</p>
const soma = <div>Soma: {2 + 2}</div>

Você pode usar aspas para especificar atributos dentro das tags no JSX:

const menu = <nav posicao="0"></nav>
const bemvindo = <div usuario={conta.nomeUsuario}></div>

JSX usa camelCase para nome de propriedades

Uma tag JSX pode conter elementos filhos:

const pagina = (
    <div>
        <nav>Menu</nav>
        <footer>Rodape</footer>
    </div>
)

No entanto, é obrigatório que exista um único nó raiz para os elementos:

// ISTO NÃO É PERMITIDO!
const pagina = (
    <nav>Menu</nav>
    <footer>Rodape</footer>
)

O JSX previne ataque de injeção. Todo código que não foi explicitamente escrito na aplicação, será convertido para string antes de ser renderizado.

Por padrão, toda classe precisa da declaração ``export default NomeClasse`` ao final da sua implementação, de modo que possa ser importada para outros arquivos usando a declaração:

import NomeClasse from './caminho/NomeClasse' // ES6

A utilização de classes exige a criação de estratégias para manipulação dos atributos, já que, por padrão, as funções e métodos do javascript "sobrescrevem" o escopo da classe. Dessa forma, podemos usar as arrow functions para tornar essa tarefa mais transparente (leia-se menos dores de cabeça):

atualiza() {
    this.setState({ nome: "Venson" }) // ERRO
}

atualiza = () => {
    this.setState({ nome: "Venson" }) // OK
}

A implementação tradicional de uma função também pode ser resolvida utilizando o comandobind():

constructor(props){
    super(props)
    this.atualiza = this.atualiza(this)
}

atualiza() {
    this.setState({ nome: "Venson" })
}

Os métodos implementados na classe principal React.Component são:

• constructor(props): executado na construção do objeto
• render(): executado ao realizar a renderização
• componentDidUpdate(): executado após alguma atualização nos dados
• componentDidMount(): executado após o componente entrar no DOM
• componentDidUnmount(): executado após o componente ser removido do DOM

Mais na Documentação

Podemos personalizar o comportamento de um componente React utilizando asprops. Dessa forma, um botão, formulário ou caixa de diálogo pode usar a mesma abstração para diferentes tipos de saída:

class Caixa extends React.Component{
    render() {
        return "Olá, " + this.props.usuario
    }
}

const elemento = (
    <div>
        <Caixa usuario="Ramon" />
        <Caixa usuario="Alice" />
        <Caixa usuario="Ted" />
    </div>
)

Imprime respectivamente:

Olá, Ramon Olá, Alice Olá, Ted

As props de um componente são podem ser sobrescritas. Para realizar alterações no estado de um componente, usaremos o conceito de state

O state de um componente é simular às props, porém é privado e totalmente controlado pelo componente, podendo ser sobreescrito a qualquer momento, inclusive por eventos.

Inicializando State

this.state = { nome: "Ramon" }

Atualizando State

this.setState({ nome: "Alice" })

Nunca atualize diretamente um state usandothis.state = novoestado, pois isso pode ser anulado caso osetState() seja executado em seguida. Assuma sempre que o state é privado.

import React from 'react';

class Relogio extends React.Component{
    constructor(props){
        super(props)
        this.state = { time: new Date() }
    }

    componentDidMount(){
        setInterval(() => {
            this.setState({ time: new Date() })
        }, 1000)
    }

    render(){
        return "A hora atual é " + this.state.time
    }
}

export default Relogio

No exemplo do anterior, ao ser montado em na aplicação usando a tag<Relogio />, os seguintes metodos serão executados:

• O construtor de relógio será chamado, inicializando o estado com o atributotime e a hora atual (new Date())
• Em seguida, o React executa o método render() para que o elemento"A hora atual é " + this.state.time seja renderizado no DOM.
• Ao ser inserido no DOM, o React chama então o métodocomponentDidMount(), que cria um timer que será executado de 1 em 1 segundo.
• O timer gerado executa a função this.setState() atualizando o atributotime com a nova hora atual.
• A atualização de estado faz com que o React execute novamente atualize a árvore DOM, renderizando apenas o componente que foi atualizado.

Dicas de Uso do State

• Não modifique um state usando this.state.usuario = "joaozinho", use semprethis.setState({ usuario: "joaozinho" }). Ao contrário, o estado não será renderizado novamente.
• States são atualizados de maneira assíncrona. Evite usá-los como contadores diretamente.
• States são atualizados de maneira fragmentada pelo React. Isso significa que um componente será atualizado apenas nos atributos que foram atualizados.

Uma ótima maneira de iniciar um novo projeto com React sem necessidade de configurações adicionais é o script create-react-app. Este script é mantido pelo facebook e permite inicializar um novo projeto rapidamente através do comando:

npx create-react-app nome-app

E em seguida podemos iniciar a execução do app usando:

npm start

O create-react-app configura alguns pacotes que geralmente utilizamos no processo de desenvolvimento de interfaces baseadas no React, como `React`, `JSX`, `ES6`, `TypeScript`, `Flow`, `Babel`, `ESLint` e `Git`.

• Babel Javascript - mgmcdermott.vscode-language-babel
• React Simple Snippets - burkeholland.simple-react-snippets

Implemente uma interface usando React para gerenciar um sistema de ar condicionado. O sistema deve apresentar as informações sobre temperatura, modo de funcionamento (ventilar,refrigerar,aquecer) e velocidade (1, 2 e 3), permitindo alterar todas estas variáveis. Cada infomação deverá ser encapsulada em um único componente.

Implemente uma interface usando React que gere uma lista de computadores contendo `hostname`, `processador`, `memoria`, `armazenamento` e `estado` a partir de um arquivo JSON. A interface deve incluir ainda uma forma de adicionar e deletar computadores, atualizando o arquivo JSON no servidor. Toda atualização deverá ser realizada também no front-end.