Search results

Getting Started with Syncfusion React UI component in Create React App CLI

Refer the following steps to start using Syncfusion React UI components in React.

Prerequisites

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

  • React versions supported: Greater than 15.5.4

Preparing the application

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

npm install -g 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

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

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

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>
    );
  }
}

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

Now run the npm start command in the console, it will run your application and open the browser window. Output will appears as follows.

Source
Preview
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'));
<!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>