Setting up the Project
You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)
- index.html: contains application markup and references.
- index.js: contains react code.
In the project, data.js contains data to be rendered in the Ignite UI grid. File Index.js contains the App component. In index.js, you can find component class created as shown in the listing below:
var App = React.createClass(
<h2>Ignite UI Grid will be rendered here</h2>
The above App component class contains two functions:
- The getInitialState() function simply returns an Object of initial state.
- The render() function returns the description of what you want to render. In the next steps, we will render an Ignite UI grid in the render function of the App component.
You can learn more about the React.createClass API.
On the index.html, as shown in the listing below, you will find that index.js has been referenced as babel script:
<script type="text/babel" src="index.js">
After downloading the project, navigate to the directory and run the commands below:
Execute the npm install command to install lite server (web server) dependencies, and execute the npm start command to run the React application. If everything is correct, you will find a React application running in the browser as shown below: