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 :

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 :

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 :

<MinhaLabel texto="Macoratti .net"/>
<MeuButton nome="Botão 1"/>
<MeuButton nome="Botão 2"/>
<MeuButton nome="Botão 3"/>

Veja o resultado obtido:

No exemplo temos dois componentes separados dentro de outro componente:

Assim estamos passando parâmetros entre componentes usando props.

Na próxima parte do artigo vamos abordar os Forms no ReactJs.

"Jesus respondeu, e disse-lhe: Se alguém me ama, guardará a minha palavra, e meu Pai o amará, e viremos para ele, e faremos nele morada."
João 14:23

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti