이슈 1 electron-webpack에 react 설치하기

2020/01/12 - [엥휴/프로젝트] - 빠른 개발의 시작, boilerplate

 

yarn add react react-dom를 통해 react와 react-dom을 설치했지만, 바로 사용할 수 없었다. webpack이 문제였다. webpack만으로는 react에서 주로 사용하는 JSX를 해석할 수 없었기 때문.

 

ERROR in ./src/renderer/index.js
Module build failed (from ./node\_modules/babel-loader/lib/index.js):
SyntaxError: /src/renderer/index.js: Unexpected token (6:16)

  5 | const rootElement = document.getElementById('app');
> 6 | ReactDOM.render(<App />, rootElement);

 

 

이를 해석기 babel을 사용하여 해결하였다. 먼저 아래 명령어를 실행한 후, package.json 안에 다음 JSON 코드를 추가한다.

 

yarn add @babel/preset-react

 

{
  // 이 부분을 추가합니다.
  "babel": {
    "presets": [ "@babel/preset-react" ]
  }
  // 여기까지 추가합니다.
}

 

 

추가로, 아래 코드의 state처럼 초기화 없이 클래스 변수를 사용하고 싶으면 plugin도 설정해주어야 한다.

 

class Example extends Component {
  // class 변수를 사용하고 싶다면 아래와 같이 plugins를 추가한다.
  state = {
    name: "EngHyu"
  }
  ...
}

 

yarn add @babel/plugin-proposal-class-properties

 

{
  // 여기부터
  "babel": {
    "presets": [ "@babel/preset-react" ],
    "plugins": [ "@babel/plugin-proposal-class-properties" ]
  }
  // 여기까지 추가합니다.
}

 

 

이렇게 package.json의 { }사이에 넣어줘도 되고, 따로 .babelrc 파일을 만들어도 된다.

 

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}