# Create React App에서 SpreadJS 시작하기

## Content

SpreadJS는 개별 모듈과 플러그인을 함께 사용하는 것을 Create React App 개발 환경에서 지원합니다.

### 모듈과 플러그인을 함께 사용하기

이는 다음 단계를 포함합니다:

1. **Create React App 프로젝트 생성**
    명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

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

    완료하면 Create React App 프로젝트가 지정된 위치에 생성됩니다. Create React App 프로젝트 생성 방법에 대한 자세한 정보는 [Create React App](https://create-react-app.dev/docs/getting-started/)을 참조하세요.
2. **프로젝트에 SpreadJS 모듈과 플러그인 설치하기**
    다음 명령어를 사용하여 SpreadJS NPM 모듈과 플러그인을 설치하세요:

    ```shell
    npm run eject
    npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print @mescius/spread-sheets-react
    ```
3. Create React App 애플리케이션에서 SpreadJS 사용하기
    다음 코드를 사용하여 `App.js` 파일을 수정하세요.
    변경 사항은 브라우저 창을 새로 고침하면 반영됩니다.

    ```javascript
    import "@mescius/spread-common";
    import "@mescius/spread-calc-engine";
    import "@mescius/spread-sheets-core";
    import "@mescius/spread-sheets-calc-engine";
    import "@mescius/spread-sheets-print";
    import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
    import './App.css';
    import '../node_modules/@mescius/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;
    ```

    다음 코드를 사용하여 `App.css` 파일을 수정하세요:

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

    `web.config.js`에서 `alias`를 검색한 후, 아래와 같이 하나의 alias를 추가하세요:

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