Categorias
Artigos Desenvolvimento web

React

React é uma biblioteca JavaScript para criação de interfaces de usuário. Ela separa os códigos de partes da interface em componentes. Neste tutorial, vamos apresentar os fundamentos do desenvolvimento de aplicações usando React.

Iniciando um novo projeto

No terminal, execute o comando:

npx create-react-app fundamentos-react

React utiliza node.js. Assim, ao executar esse comando, as dependências do projeto serão baixadas. A seguir, você deverá iniciar o servidor node. Navegue até o diretório meu-primeiro-app e execute o comando:

npm start

Podemos acessar o site em um navegador pelo endereço http://localhost:3000. Observe que uma página com um template padrão será carregada:

Página que será carregada no navegador.

Agora vamos editar nosso primeiro site com React.

Observe a estrutura de pastas padrão do React:

Vamos apagar todo o conteúdo da pasta src para que possamos começar um projeto do zero:

Limpando a pasta src.

Dentro de src, crie um novo arquivo denominado index.js. Agora adicione o seguinte código a este arquivo:

import react from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(
    <h1>Olá mundo, React!</h1>,
    document.getElementById('root')
)

Nesse código, é feita a importação do react e do react-dom, que permitirá o uso DOM para modificação de elementos na página. A seguir, é utilizado o método render( ) do ReactDOM para escrever na tela um código HTML. Observe que a segunda propriedade passada ao método render( ) corresponde ao elemento cujo o identificador corresponde à palavra ‘root’. Note ainda que não foi necessário passar o código HTML entre aspas. Isso ocorre porque o código foi escrito em JSX, que é considerada uma extensão de sintaxe para JavaScript.

Observe que na pasta public existe um arquivo denominado index.html. Nesse arquivo, existe uma div cujo ID é ‘root’:

Os arquivos padrão do React podem ser alterados, mas por enquanto vamos trabalhar com os elementos já existentes.

React irá carregar o valor enviado pelo método render diretamente na div indicada. Observe no navegador como ficou a página criada anteriormente:

Podemos modificar o estilo do nosso template, adicionando um arquivo denominado index.css na pasta src e fazendo a seguinte declaração na primeira linha de index.js:

import './index.css'

Em index.css, vamos adicionar os seguintes códigos:

body{
    background: #333;
    color:aliceblue; 
    text-align: center;
}

Observe como nossa página ficou:

Criando nosso primeiro componente

Agora vamos modificar o código anterior para que ele funcione a base de um componente.

Em src, crie uma pasta chamada components e, em seguida, um arquivo chamado “Componente.jsx” com o seguinte conteúdo:

import react from 'react'

function Componente(){
    return(
        <div>
            <h1>Meu primeiro componente</h1>
            <p>Isto é um exemplo de componente. Note que com JSX não é necessário inserir aspas.</p>
        </div>
    )
}

export default Componente

Observe que esse código deve retornar um único elemento pai (a div informada).

Agora vamos alterar nosso arquivo index.js para que ele exibe o componente criado:

import './index.css'

import react from 'react'
import ReactDOM from 'react-dom'

import Componente from './components/Componente'

ReactDOM.render(
    <Componente></Componente>,
    document.getElementById('root')
)

Observe como ficou nossa página:

Enviando parâmetros para componentes

Vamos criar um segundo componente chamado “Componente2.jsx”:

import react from 'react'

export default parametros =>
    <>
        <h3>{parametros.titulo}</h3>
        <p>{parametros.subtitulo}</p>
    </>

Agora vamos alterar nosso index.js para que ele possa exibir o nosso novo componente com valores personalizados:

import './index.css'

import react from 'react'
import ReactDOM from 'react-dom'

import Componente from './components/Componente'
import Componente2 from './components/Componente2'

ReactDOM.render(
    <div>
        <Componente></Componente>
        <Componente2 
          titulo="Parâmetros em components" 
        subtitulo="Podemos passar parâmetros para alterar um component"
        ></Componente2>
    </div>,
    document.getElementById('root')
)

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *