Search results

Getting Started with Syncfusion React UI component in Create React App CLI using NPM/Yarn

Refer the following steps to start using Syncfusion React UI components in React using NPM or Yarn Package Manager.

Prerequisites

To get started with Syncfusion React UI components, ensure the compatible version of React.

  • React versions supported: Greater than 15.5.4

  • NPM or Yarn Package Manager

Preparing the application

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

For NPM Package Manager,

npm install -g create-react-app

For Yarn Package Manager,

yarn global add create-react-app

Start a new project using create-react-app command as follows

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
create-react-app quickstart

cd quickstart

Adding Syncfusion packages

All Syncfusion React (Essential JS 2) packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use Button component.

To install Button component, use the following command

For NPM Package Manager,

npm install @syncfusion/ej2-react-buttons –save

For Yarn Package Manager,

 yarn add @syncfusion/ej2-react-buttons

Adding component to the Application

Now, you can start adding required components to the application. For getting started, we have added Button component in src/App.tsx file using following code.

import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import './App.css';

export default class App extends React.Component<{}, {}> {
  render() {
    return (
      <ButtonComponent type="primary">Button</ButtonComponent>
    );
  }
}
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import './App.css';
export default class App extends React.Component {
    render() {
        return (<ButtonComponent type="primary">Button</ButtonComponent>);
    }
}

Adding CSS Reference

Import the Button component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";

Running the application

Run the application.

For running your application using NPM, use the below command

npm start

For running your application using Yarn, use the below command

 yarn run start

The output will appears as follows.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
class App extends React.Component {
    render() {
        return (<ButtonComponent>Button</ButtonComponent>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

//Enable ripple effect
enableRipple(true);

class App extends React.Component<{}, {}> {
  render() {
    return (
      <ButtonComponent>Button</ButtonComponent>
    );
  }
}
ReactDom.render(<App />,document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>