# Excel IO Element

## Content

Using the Excel IO element in SpreadJS with React, you can quickly render and display the Excel sheets on the webpages while also executing the import and export operations without any hassle.

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 [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)
2. **Install SpreadJS React modules in 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 into index.js file**
    Import the SpreadJS CSS in your index.js file using the following code:

    ```TypeScript
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    ```
4. <strong>Install Excel IO React Module and FileSaver React Module in the Project</strong>Install the Excel I/O and file-saver modules in your project using the following commands:

    ```Shell
    npm install @grapecity/spread-excelio
    npm install file-saver --save
    ```
5. **Use Excel IO in React Application**
    Modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:
<br>
    This example shows how to use Excel IO elements in a React Application.

    ```TypeScript
    import React from 'react';
    import './App.css';
    import GC from '@grapecity/spread-sheets';
    import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
    
    // Import ExcelIO module
    import * as ExcelIO from "@grapecity/spread-excelio";
    
    // Import file-saver module
    import saveAs from 'file-saver';
    var SpreadJSKey = "xxx";
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    // You need to license the ExcelIO module separately using the same license key
    ExcelIO.LicenseKey = SpreadJSKey;
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.hostStyle =
                {
                    width: '1100px',
                    height: '800px'
                };
        }
    
    // Handling workbook initialized event
        workbookInit = (spread) => {
            this.setState({
                spread: spread
            });
        }
    // Import Excel
        importFile = () => {
            var excelFile = document.getElementById("fileDemo").files[0];
            // Get an instance of IO class
            let excelIO = new ExcelIO.IO();
            excelIO.open(excelFile, (json) => {
                this.state.spread.fromJSON(json);
            }, (e) => {
                console.log(e);
            });
        }
    // Export Excel
        exportFile = () => {
            // Get an instance of IO class
            let excelIO = new ExcelIO.IO();
            let fileName = document.getElementById("exportFileName").value;
            if (fileName.substr(-5, 5) !== '.xlsx') {
                fileName += '.xlsx';
            }
            var json = JSON.stringify(this.state.spread.toJSON());
            excelIO.save(json, (blob) => {
                saveAs(blob, fileName);
            }, (e) => {
                console.log(e);
            });
        }
        render() {
            return (
                <div>
                    <input type="file" name="files[]" id="fileDemo" accept=".xlsx" />
                    <input type="button" id="loadExcel" value="Import" onClick={this.importFile} />
                    <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} />
                    <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
                    <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
                        <Worksheet>
                        </Worksheet>
                    </SpreadSheets>
                </div>
            )
        }
    }
    export default App;
    ```