Search results

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

17 Sep 2021 / 2 minutes to read

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 set up the applications. To install create-react-app run the following command.

For NPM Package Manager,

Copied to clipboard
npm install -g create-react-app

For Yarn Package Manager,

Copied to clipboard
yarn global add create-react-app

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

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart

Adding Syncfusion packages

All Syncfusion React (Essential JS 2) packages are published on 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 the Button component, use the following command

For NPM Package Manager,

Copied to clipboard
npm install @syncfusion/ej2-react-buttons --save

For Yarn Package Manager,

Copied to clipboard
 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 the following code.

Copied to clipboard
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>
);
  }
}
Copied to clipboard
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.

Copied to clipboard
@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

Copied to clipboard
npm start

For running your application using Yarn, use the below command

Copied to clipboard
 yarn run start

The output will appears as follows.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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'));
Copied to clipboard
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'));
Copied to clipboard
<!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>