# SpreadJS with Create React App

## Content

SpreadJS supports using individual module and plugin together in create react app development environment.

### Using Module and Plugin together

This involves the following steps:

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

    ```shell
    npx create-react-app my-app
    cd my-app 
    npm start
    ```

    After you finish, the create react app project will be created at the specified location in the directory. For more information on how to create a create react app project, refer to [Create React App](https://create-react-app.dev/docs/getting-started/).
2. **Install SpreadJS modules and plugins in the project**
    Install the SpreadJS NPM modules and plugins using the following commands:

    ```shell
    npm run eject
    npm install @grapecity/spread-common @grapecity/spread-calc-engine @grapecity/spread-sheets-core @grapecity/spread-sheets-calc-engine @grapecity/spread-sheets-print @grapecity/spread-sheets-react
    ```
3. **Use SpreadJS in Create React App application**
    Modify the App.js file using the following code.
    Changes will be reflected when the browser window is refreshed.

    ```javascript
    import "@grapecity/spread-common";
    import "@grapecity/spread-calc-engine";
    import "@grapecity/spread-sheets-core";
    import "@grapecity/spread-sheets-calc-engine";
    import "@grapecity/spread-sheets-print";
    import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
    import './App.css';
    import '../node_modules/@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
    function App() {
        let initSpread = function (value) {
            let spread = window.spread = value;
            let sheet = spread.getActiveSheet();
            sheet.setValue(0, 0, "Hello SpreadJS");
        }
        let printSpread = function () {
            let spread = window.spread;
            spread.print();
        }
        return (<div className="sample-tutorial">
            <div className="sample-spreadsheets">
                <SpreadSheets workbookInitialized={spread => initSpread(spread)}>
                    <Worksheet></Worksheet>
                </SpreadSheets>
            </div>
            <div id="testButton" onClick={() => printSpread()}>Print</div>
        </div>);
    }
    export default App;
    ```

    Modify the App.css using the following code:

    ```css
    .sample-tutorial {
        position: relative;
        height: 400px;
        overflow: hidden;
    } 
    .sample-spreadsheets {
        width: 100%;
        height: 300px;
    }
    body {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    } 
    #testButton {
        margin-top: 10px;
        text-align: center;
        width: 100px;
        height: 30px; 
        border: 1px solid gray; 
        background-color: lightblue;
    }
    ```

    In web.config.js, search alias, and add one alias as mentioned below:

    ```javascript
    .....
    alias:{
       "@grapecity/spread-sheets": require.resolve("@grapecity/spread-common"),
       .......
    }
    .....
    ```