Criando um List Generator com React
Tags: react, webdev, javascript, reactjsdevelopment
Published: 2023-04-28 13:00:00

**React** é uma biblioteca JavaScript popular e amplamente utilizada no desenvolvimento de aplicativos web modernos. Seu uso simplifica o processo de criação de interfaces de usuário interativas e dinâmicas. Neste artigo, vamos explorar como criar um **List Generator** usando **React**.

## O que é um **List Generator**?

Um **List Generator** é uma ferramenta que ajuda a gerar listas de elementos dinâmicos. Com isso, podemos criar uma lista de tarefas, lista de compras, lista de contatos e muito mais. Com a ajuda do **React**, podemos criar um **List Generator** que permita aos usuários adicionar, remover e editar itens da lista em tempo real.

## Criando um Projeto **React**

Para criar um **List Generator** com **React**, precisamos seguir alguns passos. 

Primeiro, precisamos criar um novo projeto **React**. Podemos fazer isso usando o create-react-app. Lembre-se que, para isso, é necessário ter o Node.js e o NPM instalados.

[Aprenda a criar um servidor Node.js do zero em apenas 10 minutos! ](https://dev.to/rodrigozan/como-criar-um-servidor-nodejs-3kdj)

Abra o terminal ou prompt de comando e execute o seguinte comando para instalar o Create **React** App:

```bash
npm install -g create-react-app

# ou

yarn global add create-react-app
```

Navegue até a pasta onde deseja criar o projeto e execute o seguinte comando para criar um novo projeto **React** com o nome "meu-projeto":

```bash
npx create-react-app meu-projeto

# ou

yarn create react-app-app meu-projeto
```

Aguarde até que todas as dependências sejam instaladas. Quando o processo estiver concluído, navegue até o diretório do projeto:

```bash
cd meu-projeto
```

Instale o `@material-ui/core` para o design do projeto:

```bash
npm install @material-ui/core

# ou

yarn add @material-ui/core
```

Execute o seguinte comando para iniciar o servidor de desenvolvimento:

```bash
npm start

# ou

yarn start
```

Aguarde até que o servidor de desenvolvimento seja iniciado e, em seguida, abra o navegador em [Localhost 3000)[http://localhost:3000). Você verá a página inicial do projeto **React**.

## Criando o formulário e listando os dados

Em seguida, precisamos criar um componente de formulário que permita aos usuários adicionar itens à lista. Este formulário deve incluir um campo de entrada de texto e um botão de envio.

Uma vez que o usuário tenha adicionado um item à lista, precisamos exibi-lo na tela. Podemos fazer isso criando outro componente que renderize cada item da lista em um elemento da lista HTML. Podemos usar a função de mapeamento do JavaScript para iterar sobre a lista de itens e renderizar cada um deles em um elemento da lista HTML.

Vamos primeiro criar o componente TodoItem, que conterá a informação de cada dado do array.

```javascript
import **React** from '**React**';

function TodoItem(props) {
  return (
    <div>
      {props.text}
    </div>
  );
}

export default TodoItem;

```

Agora criaremos o componente TodoList, que percorrerá o array e listará os dados.

```javascript
import **React** from '**React**';
import TodoItem from './TodoItem';

function TodoList(props) {
  return (
    <div>
      {props.items.map((item, index) => (
        <TodoItem key={index} text={item} />
      ))}
    </div>
  );
}

export default TodoList;
```

Por fim, o código do nosso app.js

```javascript
import **React**, { useState } from '**React**';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import TodoList from './components/TodoList';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: '25ch',
    },
  },
  button: {
    margin: theme.spacing(1),
  },
}));

function App() {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState('');
  const [items, setItems] = useState([]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = () => {
    setItems([...items, inputValue]);
    setInputValue('');
  };

  return (
    <div className="App">
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          id="standard-basic"
          label="Adicionar tarefa"
          value={inputValue}
          onChange={handleInputChange}
        />
        <Button
          variant="contained"
          color="primary"
          onClick={handleButtonClick}
          className={classes.button}
        >
          Adicionar
        </Button>
      </form>
      <TodoList items={items} />
    </div>
  );
}

export default App;

```

## Conclusão

Criar um **List Generator** com **React** pode ser uma tarefa muito útil para projetos que envolvem a criação de listas de elementos dinâmicos. Com a ajuda do **React**, podemos criar um componente que permita aos usuários adicionar, remover e editar itens da lista em tempo real. Isso pode ser muito útil para uma variedade de projetos, desde listas de tarefas simples até aplicativos de gerenciamento de projetos mais complexos.