React - Uma introdução bem básica

React - Uma introdução bem básica - XII

Neste artigo vou apresentar uma introdução bem básica ao React.

Hoje vamos criar um projeto React mostrando como usar props.(veja o artigo anterior aqui)

Vamos usar o template de linha de comando create-react-app.

Abra um prompt de comando e digite : create-react-app usandoprops (usandoprops é o nome da aplicação React que iremos criar)

Abaixo temos a estrutura do projeto criado:

Vamos criar uma pasta chamada components e nesta pasta criar o arquivo testeprops.jsx que vai ser o nosso componente.

A seguir vamos criar dois componentes neste componente :

MeuButton - que exibe o texto 'clique aqui'
MinhaLabel - que exibe o texto 'Minha Label'

Vamos usar os dois componentes no component TesteProps, e, finalmente para poder usar os componentes vamos definir o código abaixo no arquivo Index.js :

Executando : npm start iremos obter no navegador :

Muito bem...

Seu eu quiser reaproveitar o meus componentes basta referenciá-los mais de uma vez conforme mostra o código abaixo:

Agora o resultado obtido mostra 3 botões :

Agora vamos usar props para alterar os textos dos botões pois estão todos iguais...

As props são parâmetros que passamos para os nosso componentes e no React passamos props para o componente como um atributo de tag HTML.

Para isso vamos alterar o código do nosso componente conforme abaixo:

Agora estamos usando props em nossos componentes MinhaLabel e MeuButton obtendo o valor do parâmetro passado :

this.props.nome
this.props.texto

Todo o componente tem acesso intrínseco a this.props e a this.state. No exemplo estamos usando this.props para obter os valores passados como parâmetros :

Veja o resultado obtido: