03.일렉트론 프로젝트에 React 추가하기

02.일렉트론 퀵스타트에서 만든 프로젝트에 React를 추가하는 방법을 설명한다.

• 리액트 패키지를 추가
  npm install --save react react-dom
• 리액트 소스 폴더 만들기
  mkdir src/js
• index.html에 root id 생성

<div id="root"></div> 

• src/js/index.js 파일 만들기

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>Hello React App</h1>, document.getElementById('root'));

• 웹팩용 패키지 추가
  npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader sass-loader sass webpack webpack-cli
• webpack.common.js 추가(root 폴더)

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

• package.json에 webpack 스크립트 추가
  "watch": "webpack --config webpack.common.js --watch"

• 스크립트 실행 - 스크립트가 실행되면 build/js/app.js가 생성됨
  npm run watch

• index.html에 app.js 추가

<div id="root"></div>
<script src="./build/js/app.js"></script>

• 실행
  npm start
  

** React Component 만들기

• src/js/App.js 추가

import React from 'react';

export default function App() {
    return(
        <h1>I am App Component</h1>
    )
}

• src/js/index.js 수정

import App from './App';

ReactDom.render(<App/>, document.getElementById('root'));

• 저장
• 실행화면 창에서 Reload
  

<<강의자료>>
https://www.youtube.com/watch?v=JvSdzyoaRhg&list=PLeNJ9AVv90q0t7m-AE6aTSsyUaIWjpU_1&index=3