Este tutorial aprseenta os Componentes de Dados React, uma biblioteca criada por Carlos Rocha para exibição de dados em aplicações React. Aqui você aprenderá a estrutura do projeto, como iniciá-lo e interpretar suas configurações principais, permitindo integrar esses componentes de forma eficiente.

1. Estrutura de Diretórios

A organização segue o padrão de projetos React, com pastas específicas para os componentes personalizados. Veja a estrutura principal:

react-data-components/
│
├── public/                  - Recursos estáticos (ex.: index.html)
├── src/                     - Código-fonte principal
│   ├── components/          - Biblioteca de componentes de dados
│   │   ├── DataTable        - Arquivos do componente de tabela
│   │   ├── DataChart        - Arquivos do componente de gráfico
│   │   └── ...              - Outros componentes
│   ├── index.js             - Ponto de entrada da aplicação
│   ├── App.css / App.js     - Estilos e lógica principal
│   ├── assets/              - Imagens, fontes etc.
│   └── config/              - Possíveis arquivos de configuração
├── package.json             - Dependências e scripts npm
├── README.md                - Documentação
└── yarn.lock / package-lock.json - Arquivo de bloqueio de dependências

2. Arquivo de Inicialização

O ponto de partida é src/index.js, que inicializa o React e renderiza o componente raiz no DOM. Exemplo adaptado:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

registerServiceWorker();

3. Arquivos de Configuração

package.json

Contém metadados, dependências e scripts. Os comandos comuns são definidos em scripts:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

.env (opcional)

Arquivo para variáveis de ambiente, como URLs de API. Devem seguir a nomenclatura REACT_APP_* para serem reconhecidas pelo React.

Configurações Específicas

Em projetos baseados em Create React App, a maior parte da configuração fica oculta. Caso seja necessário personalizar o webpack, utiliza-se o comando eject, que gera os arquivos de configuração no diretório config/.

Com esta visão geral, você pode navegar pelo projeto e começar a usar os compnoentes de dados React. Consulte a documentação oficial para detalhes adicionais.