Articles in this section
Category / Section

How to import the Syncfusion ReactJS components using webpack?

1 min read


To import the dependent scripts for the specific ReactJS component into the JSX file. Follow the below steps to configure the Syncfusion React components.

1) Create a new application with React using the following link: react


2) Open the command prompt and navigate to the application root folder then install webpack, react by using the below commands.

$ npm install --save-dev webpack  
$ npm install react 
$ npm install react-dom 
$ npm install --save-dev babel-preset-es2015 
$ npm install babel-loader babel-core babel-preset-env    webpack --save-dev 


3)Configure the Syncfusion JavaScript components through npm This will fetch Syncfusion dependent files through node.

4)Import the dependent scripts in JSX file as like as below:

import React from 'react';
import ReactDOM from 'react-dom';
import 'syncfusion-javascript/Scripts/ej/web/ej.rte.min'
import 'syncfusion-javascript/Scripts/ej/common/ej.web.react.min'
class Sample extends React.Component { 
  render() {
     return <EJ.RTE id="rteDef"></EJ.RTE>
ReactDOM.render(<Sample/>, document.getElementById('autocomplete-default'));


5)Compile the application and run the demo to render the Syncfusion React components by using the below command,

 $ webpack


Refer to the following sample:


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment