The following section explains the required steps to build the simple ListView component with its basic usage in step by step procedure.
Install the below required dependent packages to render the ListView component.
+-- @syncfusion/ej2-react-lists
|-- @syncfusion/ej2-react-base
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
You can use create-react-app
to setup the
applications.
To install create-react-app
run the following command.
npm install -g create-react-app
Start a new project using create-react-app
command as follows
create-react-app quickstart --typescript
cd quickstart
create-react-app quickstart
cd quickstart
All the available Essential JS 2 packages are published in
npmjs.com
public registry. Now, we are going to render
ListView
component from these packages.
To install ListView
component, use the following command.
npm install @syncfusion/ej2-react-lists --save
The above command installs ListView dependencies
which are required to render the component in the React
environment.
Now, you can add ListView
component in the application.
For getting started, add ListView
component in src/App.tsx
file using the following code snippet.
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './App.css';
function App() {
return (
//specifies the tag to render the ListView component
<ListViewComponent id='list' />
);
}
export default App;
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './App.css';
function App() {
return (
//specifies the tag to render the ListView component
<ListViewComponent id='list'/>);
}
export default App;
Import ListView
component required theme references at the top of src/App.css
.
/* import the ListView dependency styles */
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-lists/styles/material.css";
CheckList
behavior in ListView, we need to add Button
component’s styles as given below in src/App.css
file@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
Populate the data in ListView using dataSource
property. Here, an array of JSON values passed to
ListView
component.
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './App.css';
function App() {
// define the array of Json
let arts: { [key: string]: string }[] = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={arts} />
);
}
export default App;
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './App.css';
function App() {
// define the array of Json
let arts = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }
];
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={arts}/>);
}
export default App;
Now use the npm start
command to run the application in the browser.
npm start
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// define the array of Json
let arts = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }
];
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={arts}></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
// define the array of Json
let arts: { [key: string]: string }[] = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={arts} ></ListViewComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
N> You can refer to our React ListView feature tour page for its groundbreaking feature representations. You can also explore our React ListView example to know how to render and configure the listview.