Criando um List Generator com React

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!

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

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":

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:

cd meu-projeto

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

npm install @material-ui/core

# ou

yarn add @material-ui/core

Execute o seguinte comando para iniciar o servidor de desenvolvimento:

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.

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.

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

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.