# SpreadJS with React

## Content

SpreadJS supports React - a JavaScript library that allows developers to build user interfaces for web applications and mobile applications by handling the view layer of the MVC framework.
With React, you can modify data without reloading the page while creating reusable components and large applications.

> **Note**: SpreadJS supports React versions 16, 17, and 18.

1. Using Node Package Manager
2. Using Traditional HTML

## Using Node Package Manager

This method involves the following steps:

1. **Create a React Project**
    Open the Command Prompt window and type the following commands:

    ```Shell
    npm install -g create-react-app
    create-react-app quick-start
    cd quick-start
    npm start    
    ```

    After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project, refer to [Create New React App](https://reactjs.org/docs/create-a-new-react-app.html)
2. **Install SpreadJS React modules in the project**
    Install SpreadJS React modules in your project using the following command:

    ```Shell
    npm install @grapecity/spread-sheets
    npm install @grapecity/spread-sheets-react
    ```
3. **Import SpreadJS CSS**
    Import the SpreadJS CSS in your index.js file using the following code:

    ```JavaScript
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    ```
4. **Use SpreadJS in React application and license SpreadJS**
    Modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. You can enter a valid SpreadJS license key before initializing the component. As an example, you can use the sample code given below:

    ```JSX
    import React, { Component } from 'react';
    import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
    import * as GC from "@grapecity/spread-sheets";
    
    // Licensing SpreadJS
    var SpreadJSKey = "xxx";          // Enter a valid license key.
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    class APP extends Component {
     constructor(props) {
      super(props);
      this.spreadBackColor = 'aliceblue';
      this.sheetName = 'Goods List';
      this.hostStyle =
      {
       width: '800px',
       height: '600px'
      };
      this.data = [
        {
          Name: "Apple",
          Category: "Fruit",
          Price: 1,
          "Shopping Place": "Wal-Mart",
        },
        {
          Name: "Potato",
          Category: "Fruit",
          Price: 2.01,
          "Shopping Place": "Other",
        },
        {
          Name: "Tomato",
          Category: "Vegetable",
          Price: 3.21,
          "Shopping Place": "Other",
        },
        {
          Name: "Sandwich",
          Category: "Food",
          Price: 2,
          "Shopping Place": "Wal-Mart",
        },
        {
          Name: "Hamburger",
          Category: "Food",
          Price: 2,
          "Shopping Place": "Wal-Mart",
        },
        {
          Name: "Grape",
          Category: "Fruit",
          Price: 4,
          "Shopping Place": "Sun Store",
        },
      ];
      this.columnWidth = 100;
     }
     render() {
      return (
       <div>
       <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}>
       <Worksheet name={this.sheetName} dataSource={this.data}>
       <Column dataField='Name' width={300}></Column>
       <Column dataField='Category' width={this.columnWidth}></Column>
       <Column dataField='Price' width={this.columnWidth}
       formatter="$#.00"></Column>
       <Column dataField='Shopping Place' width={this.columnWidth}></Column>
       </Worksheet>
       </SpreadSheets>
       </div>
      )
     }
    }
    export default APP    
    ```

## Using Traditional HTML

This method involves the following steps:

1. **Download the React HTML template.**
    You can download the react HTML template using the link [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html)
2. **Add SpreadJS and React - SpreadJS to HTML template.**
    Add references to the `gc.spread.sheets.all.*.*.*.min.js`, `gc.SpreadJS.*.*.*.css` and `gc.spread.sheets.react.*.*.*.js` files in the HTML template (i.e. your index.html file).
3. **Use SpreadJS in React application and license SpreadJS.**
    Now, you can use SpreadJS in your React application. You can enter a valid SpreadJS license key before initializing the component. As an example, you can use the sample code given below:

    ```HTML
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
            <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
            <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
            <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
        </head>
        <body>
            <div id="root"></div>
            <script type="text/babel">
            window.onload = function () {
    
            // Licensing SpreadJS
            GC.Spread.Sheets.LicenseKey = "xxx";       // Enter a valid license key.
    
                const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
                class App extends React.Component{
                     render(){
                       return (
                            <div style={{width: '800px',height: '600px'}}>
                                <SpreadSheets>
                                    <Worksheet name='first'>
                                        <Column dataField="Name"/>
                                    </Worksheet>
                                </SpreadSheets>
                            </div>
                        )
                    }
                }
                ReactDOM.render(
                    <App/>,
                    document.getElementById('root')
                );
             }
            </script>
        </body>
    </html>    
    ```

    The SpreadSheets, Worksheet, and Column are the basic elements of tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

    ```HTML
    <SpreadSheets>
      <Worksheet>
        <Column></Column>
        ...
      </Worksheet>
      ...
    </SpreadSheets>
    ```

    The following topics list the element directives.
    * [Using the SpreadSheets Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheSpreadSheetsElement)
    * [Using the Worksheet Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheWorksheetElement)
    * [Using the Column Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheColumnElement)
    * [Chart Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheChartElement)
    * [Excel IO Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheExcelIOElement)
    * [Shape Element](/spreadjs/docs/v16/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheShapeElement)

> **Note:** To use the ExcelIO element in SpreadJS with React, you need to import the Excel IO module and license it separately using the same license key, for more information refer to Excel IO Element.