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:

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:

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’:

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')
)