Escrever aplicativos React com Ignite UI para componentes de React JavaScript

Configurando o projeto

Você pode baixar o projeto inicial desta lição clicando aqui. (Você também pode baixar o projeto final clicando aqui.)

Este projeto já está configurado para funcionar com componentes React React e Ignite UI para JavaScript e todas as referências foram adicionadas ao projeto. Para obter mais informações, consulte Como usar componentes Ignite UI com React.

No projeto inicial desta lição, além das bibliotecas de componentes React e Ignite UI para JavaScript React, você encontrará os seguintes arquivos:

1. index.html: contém marcação e referências do aplicativo.
2. index.js: contém código react.
3. data.js: contém dados a serem usados como fonte de dados para a grade Ignite UI para JavaScript.

No projeto, data.js contém dados a serem renderizados na grade Ignite UI. O Index.js do arquivo contém o componente App. Em index.js, você pode encontrar a classe de componente criada conforme mostrado na listagem abaixo:

var App = React.createClass(
{
  getInitialState: function()
  {
    return{
    }
  },
  render: function()
  {
    return(
     <h2>Ignite UI Grid will be rendered here</h2>
    )
  }
});
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

A classe de componente App acima contém duas funções:

1. A função getInitialState() simplesmente retorna um objeto de estado inicial.
2. A função render() retorna a descrição do que você deseja renderizar. Nas próximas etapas, renderizaremos uma grade Ignite UI na função de renderização do componente App.

Você pode saber mais sobre a API React.createClass.

No index.html, conforme mostrado na lista abaixo, você descobrirá que index.js foi referenciado como script babel:

<div id="app"> <script type="text/babel" src="index.js"> </script> </div>

Em index.html, você também encontrará referências de React e Ignite UI para bibliotecas JavaScript.

Após baixar o projeto, navegue até o diretório e execute os comandos abaixo:

• npm install
• npm start

Execute o comando npm install para instalar as dependências do servidor lite (servidor web) e execute o comando npm start para executar o aplicativo React. Se tudo estiver correto, você encontrará um aplicativo React em execução no navegador, conforme mostrado abaixo:

Passo 1 Inicializar o estado inicial

Para inicializar a grade, você pode definir valores para várias propriedades da grade, como fonte de dados, largura, estilos de linha etc. Você pode definir essas propriedades de grade na função getInitialState(). Abra o arquivo index.js e modifique a função getInitialState() com o código abaixo:

getInitialState: function()
{
  return{
    data: stocks,
    gridWidth: "100%",
    alternateRowStyles: true
  }
},

Você está criando propriedades para definir a largura, o estilo de linha e a fonte de dados da grade. Além disso, você descobrirá que já existe uma matriz chamada "estoques" no aplicativo.

Step 2 Render the Grid

Para renderizar a grade, você deve retorná-la da função render() da classe component. Para retornar o IgGrid, abra index.js e modifique a função de renderização conforme mostrado abaixo:

render: function()
{
  return(
    <div>
      <IgGrid id="grid1"
              autoGenerateColumns={true}
              dataSource={this.state.data}
              width={this.state.gridWidth}
              alternateRowStyles={this.state.alternateRowStyles} />
    </div>
  )
}

Você está definindo as propriedades dataSource, width e alternateRowStyles com as propriedades do objeto retornado da função getInitialState().

Navegue até o aplicativo para localizar o aplicativo React em execução com a grade Ignite UI para JavaScript, conforme mostrado abaixo:

Passo 3 Configurar colunas da grade

Na etapa anterior, você define autoGenerateColumns como true para criar uma grade. Você também pode configurar colunas selecionadas do conjunto de dados para exibição. Para fazer isso, você deve configurar colunas para o Ignite UI para JavaScript Grid definindo a propriedade autoGenerateColumns como false e adicionando a propriedade columns na grade. Modifique o IgGrid na função render() conforme mostrado na listagem abaixo:

<igGrid id="grid1" autoGenerateColumns={false} dataSource={this.state.data} width={this.state.gridWidth} alternateRowStyles={this.state.alternateRowStyles} columns={[ { headerText: "CLOSE", key: "Close", dataType: "number" }, { headerText: "DATE", key: "Date", dataType: "date", format: "dateTime" }, { headerText: "HIGH", key: "High", dataType: "number" }, { headerText: "LOW", key: "Low", dataType: "number"}, { headerText: "OPEN", key: "Open", dataType: "number"}, { headerText: "VOLUME", key: "Volume", dataType: "number"}, ]} />

Navegue até o aplicativo para descobrir que uma grade foi configurada com as colunas.