[REACT] - Perguntas, Respostas e Colaborações

Oi pessoal, queria compartilhar com vocês o comando abaixo. Basta substituir ComponentName pelo nome de sua preferência:

npx generate-react-cli component ComponentName

Com ele podemos criar um componente por meio da linha de comando do terminal. Algumas perguntas pedem para informar se desejamos que arquivos adicionais sejam criados, como por exemplo o de CSS do componente. Abs!!!

5 Likes

Bem interessante essa maneira de criar componentes! :clap:

1 Like

Minha contribuição é uma ferramenta para criar o projeto de uma maneira mais eficiente, seja react ou outros frameworks. Chama-se Vite. Se comparado com o creat-react-app , o Vite é bem melhor, possuindo um build de 14x mais rápido e o tamanho é consideravelmente menor. Segue o link com explicações e passo a passo de como usar: https://rayza-ocr.medium.com/vitejs-create-react-app-7c21672c3fa3

2 Likes

Pessoal,
Essa colaboração começou lá no slack. Trouxe para cá porque acho que pode interessar a vocês também. A Beatriz queria formatar a lista de repositórios do github desenvolvida na aula de React do instrutor Guilherme Ramos.

React + Bootstrap
Pessoal, fiquei curioso e fui pesquisar. Minha abordagem foi verificar se poderiamos usar o Bootstrap para formatar a lista de repositórios, então fiz uns testes começando pequeno(hahaha) pelo button. Deu certo! Então estou compartilhando até onde fui porque podemos ir juntos, sequiserem, a partir de agora. Fiz o seguinte com base no link que deixo no final:
1 - executei no terminal:
npm install react-bootstrap bootstrap
2 - Em gamagit/src/index.js incluí a seguinte linha:
import ‘bootstrap/dist/css/bootstrap.min.css’;
3 - Em gamagit/src/pages/Home/index.js troquei a tag para

O botão ficou como na imagem abaixo. Agora é verificar o que o bootstrap oferece para a tag

1 Like

React + Bootstrap
Pessoal, consegui estilizar a lista da seguinte forma:
1 - Inclui os seguintes imports em gamagit/src/Repositories/Repositories.js:

import ListGroup from 'react-bootstrap/ListGroup';
import ListGroupItem from 'react-bootstrap/ListGroupItem';

2 - Substitui a tag ul por ListGroup.
3 - Substitui a tag li por ListGroupItem.
4 - criei uma variável (colocar nas primeiras linhas da função)

let colored = false;:

5 - Substirui o retorno da função por:

return (
    <div class='container'>
      <h2>List of Repositories {typeof repositoriesName}</h2>
      <ListGroup>       
        {repositories.map(repository => {
          colored = !colored;
          if (colored) {
            return (
              <ListGroupItem className='list-group-item-primary'>{ repository }</ListGroupItem>
              )
          } else {            
              return (
                <ListGroupItem>{ repository }</ListGroupItem>
                )
          }          
          })
        }
      </ListGroup>
      < Link to="/">Home</Link>
    </div>
  )

Ficou assim:
Captura de tela de 2022-05-18 16-34-27

1 Like

Pessoal, esse post do @ThiagoLp está bem legal. É um tutorial ensinando como limpar o app criado automaticamente pelo comando npx create-react-app.

1 Like

Dica do @induzt

Dica do @Willian_Messias

Pessoal,

Sabem o motivo do professor ter nomeado o arquivo .js de componentes diferentes com o nome index.js?
Aprendi agora que da mesma forma que ao abrirmos um site se houver um arquivo index.html ele é aberto por padrão, da mesma forma se na pasta do componente existir um arquivo index.js ele é carregado por padrão. Por isso poderiamos ter uma estrutura assim:

./pages
          |_ /Home
              |_ index.js

          |_ /Products
              |_ index.js

          |_ /About
              |_ index.js

Pessoal,
Sabem porque não usamos uma variável comum para atualizar a interface e sim useState?
Aprendi agora que em React variáveis comuns não têm o poder de passar seu valor para atualizar a interface. Por isso, se quisessemos passar um valor digitado para um h1 na tela, em vez de:
Obs: o retorno do html foi omitido para deixar em destaque as linhas mais importantes do código.

let minhaVariavel = '';
function handleDigitacao(valorDigitado) {
    minhaVariavel = valorDigitado;
}
<input onChange = { e => handleDigitacao(e.target.value) }/>
<h1>{ minhaVariavel }</h1>

Devemos usar, por exemplo:

import React, { useEffect, useState } from 'react'; // (1)
const [minhaVariavel, setMinhaVariavel] = useState(); // (2) 
<input onChange = { e => setMinhaVariavel(e.target.value) }/>
<h1>{ minhaVariavel }</h1>

(1) Aqui é importado o useState, que é uma função (Hook) que força a renderização (atualização) toda vez que seu valor muda.()
(2) Aqui são definidos pelo desenvolvedor o nome da variável que vai guardar o valor e o nome da função que altera esse valor.
(
) A atualização constante não tira performance do aplicativo porque o React usa um algoritmo de reconciliação que permite a atualização somente do que foi alterado na página.

Posso alterar diretamente a minhaVariavel? Não.
Devemos usar sempre a função definida para esse propósito, no código acima seMinhaVariavel. Como?
Para substituir o valor:
Obs: o retorno do html foi omitido para deixar em destaque as linhas mais importantes do código.

let novoValor = ''; 
setMinhaVariavel('Hello, ');
<h1>{ minhaVariavel }</h1>
---------------------------
Na tela aparecerá:
Hello, 

Para acrescentar um valor novo sem perder o anterior:

let novoValor = ''; 
setMinhaVariavel('Hello, ');
novoValor = 'Dev!';
setMinhaVariavel(prevState => prevState + novoValor);
<h1>{ minhaVariavel }</h1>
---------------------------
Na tela aparecerá:
Hello, Dev!

Obs: prevState é apenas uma convenção de nome. Podemos usar o nome que for melhor mas prevState é bem informativo porque avisa que estamos usando o valor do estado anterior (prévio).