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:

https://help.syncfusion.com/reactjs/overview#getting-started-with 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 https://help.syncfusion.com/js/installation-and-deployment. 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:

http://www.syncfusion.com/downloads/support/directtrac/general/ze/webpack.config-1368596260.zip

 

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