Getting Started with the React TreeView Component in the Preact Framework
4 Apr 202515 minutes to read
This article provides a step-by-step guide for setting up a Preact project and integrating the Syncfusion® React TreeView component.
Preact is a fast and lightweight JavaScript library for building user interfaces. It’s often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors.
Prerequisites
System requirements for Syncfusion® React UI components
Set up the Preact project
To create a new Preact project, use one of the commands that are specific to either NPM or Yarn.
npm init preactor
yarn init preactUsing one of the above commands will lead you to set up additional configurations for the project, as below:
1. Define the project name: We can specify the name of the project directly. Let’s specify the name of the project as my-project for this article.
T Preact - Fast 3kB alternative to React with the same modern API
|
* Project directory:
| my-project
—2. Choose JavaScript as the framework variant to build this Preact project using JavaScript and React.
T Preact - Fast 3kB alternative to React with the same modern API
|
* Project language:
| > JavaScript
| TypeScript
—3. Then configure the project as below for this article.
T Preact - Fast 3kB alternative to React with the same modern API
|
* Use router?
| Yes / > No
—
|
* Prerender app (SSG)?
| Yes / > No
—
|
* Use ESLint?
| Yes / > No
—5. Upon completing the aforementioned steps to create my-project, run the following command to jump into the project directory:
cd my-projectNow that my-project is ready to run with default settings, let’s add Syncfusion® components to the project.
Add the Syncfusion® React packages
Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.
This article uses the React TreeView component as an example. To use the React TreeView component in the project, the @syncfusion/ej2-react-navigations package needs to be installed using the following command:
npm install @syncfusion/ej2-react-navigations --saveor
yarn add @syncfusion/ej2-react-navigationsImport Syncfusion® CSS styles
You can import themes for the Syncfusion® React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to theme’s in a React project.
In this article, the Material 3 theme is applied using CSS styles, which are available in installed packages. The necessary Material 3 CSS styles for the TreeView component and its dependents were imported into the src/style.css file.
/* import the TreeView dependency styles */
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";The order of importing CSS styles should be in line with its dependency graph.
Add the Syncfusion® React component
Follow the below steps to add the React TreeView component to the Vite project:
1. Before adding the TreeView component to your markup, import the TreeView component in the src/index.jsx file.
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';2. Then, define the TreeView component with the dataSource property. Declare the values for the dataSource property.
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { render } from 'preact';
import './style.css';
function App() {
// define the array of data
const hierarchicalData = [
{
id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: '7-Zip' },
{ id: '01-01-02', name: 'Git' },
{ id: '01-01-03', name: 'IIS Express' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
{
id: '02', name: 'Local Disk (D:)',
subChild: [
{
id: '02-01', name: 'Personals',
subChild: [
{ id: '02-01-01', name: 'My photo.png' },
{ id: '02-01-02', name: 'Rental document.docx' },
{ id: '02-01-03', name: 'Pay slip.pdf' },
]
},
{
id: '02-02', name: 'Projects',
subChild: [
{ id: '02-02-01', name: 'ASP Application' },
{ id: '02-02-02', name: 'TypeScript Application' },
{ id: '02-02-03', name: 'React Application' },
]
},
{
id: '02-03', name: 'Office',
subChild: [
{ id: '02-03-01', name: 'Work details.docx' },
{ id: '02-03-02', name: 'Weekly report.docx' },
{ id: '02-03-03', name: 'Wish list.csv' },
]
},
]
},
{
id: '03', name: 'Local Disk (E:)', icon: 'folder',
subChild: [
{
id: '03-01', name: 'Pictures',
subChild: [
{ id: '03-01-01', name: 'Wind.jpg' },
{ id: '03-01-02', name: 'Stone.jpg' },
{ id: '03-01-03', name: 'Home.jpg' },
]
},
{
id: '03-02', name: 'Documents',
subChild: [
{ id: '03-02-01', name: 'Environment Pollution.docx' },
{ id: '03-02-02', name: 'Global Warming.ppt' },
{ id: '03-02-03', name: 'Social Network.pdf' },
]
},
{
id: '03-03', name: 'Study Materials',
subChild: [
{ id: '03-03-01', name: 'UI-Guide.pdf' },
{ id: '03-03-02', name: 'Tutorials.zip' },
{ id: '03-03-03', name: 'TypeScript.7z' },
]
},
]
}
];
const fields = { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
return (
// specifies the tag for render the TreeView component
<TreeViewComponent fields={fields}/>);
}
render(<App />, document.querySelector('#app'));Run the project
To run the project, use the following command:
npm run devor
yarn run devThe output will appear as follows:
