Escriba aplicaciones React con Ignite UI para componentes JavaScript React

Configurando el proyecto

Puede descargar el proyecto inicial para esta lección haciendo clic aquí. (También puedes descargar el proyecto final haciendo clic aquí).

Este proyecto ya está configurado para funcionar con React e Ignite UI para los componentes JavaScript React, y todas las referencias se han agregado al proyecto. Para obtener más información, consulte Cómo utilizar los componentes Ignite UI con React.

En el proyecto inicial de esta lección, además de las bibliotecas de componentes React React e Ignite UI para JavaScript, encontrará los siguientes archivos:

1. index.html: contiene referencias y marcado de la aplicación.
2. index.js: contiene código de reacción.
3. data.js: contiene datos que se utilizarán como fuente de datos para la cuadrícula Ignite UI para JavaScript.

En el proyecto, data.js contiene datos que se representarán en la cuadrícula Ignite UI. El archivo Index.js contiene el componente Aplicación. En index.js, puede encontrar la clase de componente creada como se muestra en la siguiente lista:

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")
);

La clase de componente de aplicación anterior contiene dos funciones:

1. La función getInitialState() simplemente devuelve un objeto de estado inicial.
2. La función render() devuelve la descripción de lo que desea renderizar. En los siguientes pasos, representaremos una cuadrícula Ignite UI en la función de renderizado del componente de la aplicación.

Puede obtener más información sobre la API React.createClass.

En index.html, como se muestra en la siguiente lista, encontrará que se hace referencia a index.js como script de babel:

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

En index.html, también encontrará referencias de React y la Ignite UI para las bibliotecas de JavaScript.

Después de descargar el proyecto, navegue hasta el directorio y ejecute los siguientes comandos:

• npm install
• npm start

Ejecute el comando npm install para instalar las dependencias del servidor lite (servidor web) y ejecute el comando npm start para ejecutar la aplicación React. Si todo está correcto, encontrará una aplicación React ejecutándose en el navegador como se muestra a continuación:

Paso 1 Inicializar el estado inicial

Para inicializar la cuadrícula, es posible que desee establecer valores para varias propiedades de la cuadrícula, como fuente de datos, ancho, estilos de fila, etc. Puede configurar estas propiedades de la cuadrícula en la función getInitialState(). Abra el archivo index.js y modifique la función getInitialState() con el siguiente código:

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

Está creando propiedades para establecer el ancho de la cuadrícula, el estilo de fila y la fuente de datos. Además, encontrará que ya existe una matriz llamada "acciones" en la aplicación.

Step 2 Render the Grid

Para renderizar la grilla, debes devolverla desde la función render() de la clase de componente. Para devolver IgGrid, abra index.js y modifique la función de renderizado como se muestra a continuación:

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

Está configurando las propiedades dataSource, width y AlternativeRowStyles con las propiedades del objeto devuelto por la función getInitialState().

Navegue hasta la aplicación para encontrar la aplicación React que se ejecuta con la cuadrícula Ignite UI para JavaScript como se muestra a continuación:

Paso 3 Configurar las columnas de la cuadrícula

En el paso anterior, configuró autoGenerateColumns en verdadero para crear una cuadrícula. También puede configurar columnas seleccionadas del conjunto de datos para mostrar. Para hacerlo, debe configurar columnas para la Ignite UI para JavaScript Grid estableciendo la propiedad autoGenerateColumns en falso y agregando la propiedad de columnas en la cuadrícula. Modifique IgGrid en la función render() como se muestra en el siguiente listado:

<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 hasta la aplicación para encontrar que se ha configurado una cuadrícula con las columnas.