parcel, react

Subin·2021년 5월 10일
0

note

목록 보기
2/2

SETUP

pakage.json

yarn init -y

parcel 및 react 설치

yarn add -D parcel-bundler
yarn add react react-router

index.html

mkdir public
touch index.html
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React, Parcel</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- src 폴더에 index.tsx을 만들어 줍니다 -->
    <script src="../src/index.tsx" type="text/javascript"></script>
  </body>
</html>

index.tsc

mkdir src
touch index.tsx
// src/index.tsc
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<div>Parcel with React!</div>, document.getElementById('root'));
// package.json
...
"scripts": {
    "dev": "parcel ./public/index.html"
},

실행

yarn dev
profile
정확하게 알고, 제대로 사용하자

0개의 댓글