React é uma das bibliotecas JavaScript mais populares para a construção de interfaces de usuário.
Se você quer se tornar um desenvolvedor front-end ou encontrar um trabalho de desenvolvimento web, você provavelmente se beneficiaria de aprender React in-depth.
Neste post, você vai aprender alguns dos conceitos básicos do React como criar um componente, a sintaxe JSX e os Props. Se você não tem nenhuma ou pouca experiência com React, este post é para você.
Para começar, aqui está como você pode instalar React.
O que é JSX?
A primeira coisa que você vai perceber depois de instalar seu primeiro projeto React é que uma função JavaScript retorna algum código HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Esta é uma extensão de sintaxe especial e válida para React que é chamada JSX (JavaScript XML). Normalmente, em projetos relacionados à interface, mantemos o código HTML, CSS e JavaScript em arquivos separados. Contudo no React, isto funciona um pouco diferente.
Em projectos React, nós não criamos ficheiros HTML separados, porque o JSX permite-nos escrever HTML e JavaScript combinados no mesmo ficheiro, como no exemplo acima. Você pode, no entanto, separar seu CSS em outro arquivo.
No início, JSX pode parecer um pouco estranho. Mas não se preocupe, você vai se acostumar com isso.
JSX é muito prático, porque também podemos executar qualquer código JavaScript (lógica, funções, variáveis, etc.) dentro do HTML diretamente usando chaves encaracoladas { }, como esta:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Ainda, você pode atribuir tags HTML a variáveis JavaScript:
const message = <h1>React is cool!</h1>;Or você pode retornar HTML dentro da lógica JavaScript (como casos if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Não entrarei em mais detalhes do JSX, mas certifique-se de considerar as seguintes regras ao escrever o JSX:
- HTML e tags de componentes devem ser sempre fechadas < />
- Alguns atributos como “class” tornam-se “className” (porque class refere-se a classes JavaScript), “tabindex” torna-se “tabIndex” e deve ser escrito camelCase
- Não podemos retornar mais de um elemento HTML de uma só vez, portanto certifique-se de envolvê-los dentro de uma tag pai:
return ( <div> <p>Hello</p> <p>World</p> </div>);- ou como alternativa, você pode envolvê-los com tags vazias:
return ( <> <p>Hello</p> <p>World</p> </>);Você também pode assistir ao meu tutorial Reage for Beginners para mais informações:
O que são Funcionais & Componentes de Classe?
Depois de se habituar à sintaxe JSX, a próxima coisa a entender é a estrutura baseada em componentes do React.
Se você revisitar o código de exemplo no topo deste post, você verá que o código JSX está sendo retornado por uma função. Mas a função App( ) não é uma função comum – na verdade é um componente. Então o que é um componente?
O que é um Componente?
Um componente é um bloco de código independente e reutilizável que divide a IU em partes menores. Por exemplo, se estivéssemos construindo a IU do Twitter com React:
Rather do que construir a IU inteira sob um único arquivo, podemos e devemos dividir todas as seções (marcadas com vermelho) em peças independentes menores. Em outras palavras, estes são componentes.
React tem dois tipos de componentes: funcionais e de classe. Vamos olhar cada um agora com mais detalhes.
Componentes funcionais
O primeiro e recomendado tipo de componente em React é componentes funcionais. Um componente funcional é basicamente uma função JavaScript/ES6 que retorna um elemento React (JSX). De acordo com os documentos oficiais do React, a função abaixo é um componente funcional válido:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Alternativamente, você também pode criar um componente funcional com a definição da função seta:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Esta função é um componente React válido porque aceita um único argumento de objeto “props” (que significa propriedades) com dados e retorna um elemento React. – reactjs.org
Para poder usar um componente mais tarde, você precisa primeiro exportá-lo para poder importá-lo para outro lugar:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Após importá-lo, você pode chamar o componente como neste exemplo:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Então um Componente Funcional no React:
- é uma função JavaScript/ES6
- deve retornar um elemento React (JSX)
- sempre começa com uma letra maiúscula (convenção de nomes)
- assume os adereços como parâmetro se necessário
O que são Componentes de Classe?
O segundo tipo de componente é o componente de classe. Os componentes de classe são classes ES6 que retornam JSX. Abaixo, você vê nossa mesma função Welcome, desta vez como um componente de classe:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Diferente dos componentes funcionais, os componentes de classe devem ter um método de render( ) adicional para retornar JSX.
Por que usar componentes de classe?
Usamos componentes de classe por causa do “estado”. Nas versões antigas do React (versão < 16.8), não era possível usar state dentro de componentes funcionais.
Por isso, precisávamos de componentes funcionais para renderizar apenas UI, enquanto usávamos componentes de classe para gerenciamento de dados e algumas operações adicionais (como métodos de ciclo de vida).
Isso mudou com a introdução dos Ganchos de Reacção, e agora também podemos usar estados em componentes funcionais. (Eu estarei cobrindo estado e ganchos nos meus seguintes posts, então não se importe com eles por enquanto).
A Class Component:
- é uma classe ES6, será um componente uma vez que ele ‘estende’ um componente React.
- props (no construtor) se necessário
- devem ter um método de render( ) para retornar JSX
>
O que são Propsos em React?
Outro conceito importante de componentes é como eles se comunicam. React tem um objeto especial chamado adereço (significa propriedade) que usamos para transportar dados de um componente para outro.
Mas tenha cuidado – os adendos só transportam dados em um fluxo unidirecional (somente dos componentes dos pais para os filhos). Não é possível com props passar dados de filho para pai, ou para componentes no mesmo nível.
Vamos revisitar a função App( ) acima para ver como passar dados com props.
Primeiro, precisamos definir um adereço no componente de boas-vindas e atribuir um valor a ele:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Props são valores personalizados e eles também tornam os componentes mais dinâmicos. Como o componente Welcome é o filho aqui, precisamos definir props em seu pai (App), para que possamos passar os valores e obter o resultado simplesmente acessando o “nome” dos props:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
So React developers use props to pass data and they are useful for this job. Mas e quanto ao gerenciamento de dados? Os adereços são usados para passar dados, não para manipulá-los. Vou cobrir o gerenciamento de dados com React nos meus futuros posts aqui no freeCodeCamp.
Entretanto, se você quiser saber mais sobre React & Desenvolvimento Web, sinta-se livre para assinar meu canal no YouTube.
Obrigado por ler!