Parcel react boilerplate

parcel 로 react 기반 개발환경 셋팅하기

react
router
babel
scss
autoprefix
postcss

parcel-bundler 설치

npm i -g parcel-bundler

package.json 생성

yarn init -y

y 칠 필요없이 자동 생성

실행 script 추가 (package.json)

  "scripts": {
    "start": "parcel index.html"
  }

react module 설치

npm install --save-dev react react-dom
npm i -D react react-dom

yarn add --save-dev react react-dom
yarn add -D react react-dom

babel 설치

yarn add -D babel-preset-env babel-preset-react
npm install --save-dev babel-preset-env babel-preset-react

src/App.js

import React, { Component } from 'react';
import './style.css';

class App extends Component {
    render() { 
        return ( 
            <div id="App">
                hello ?
            </div>
         );
    }
}
 
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App.js';

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

모듈 import 시 {} 말고 그냥 가져올것

scss 사용

현재 css 파일을 scss 확장자로 바꾸고 css 파일을 import 했던 부분을 scss로 바꿔주면

Parcel이 자동으로 node-sass를 설치하며 적용된다.

PostCSS

yarn add postcss-modules autoprefixer

.postcssrc 생성

{
  "modules": false,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

“modules”: false 로 하면 설정한 네이밍 그대로 컴파일

package.json browserslist 설정 추가

"browserslist": [
  ">1%",
  "last 4 versions"
]

빌드시 기존파일 clean

yarn add -D parcel-plugin-clean-dist

router 사용하기 index.js

react-router-dom 설치 후 index.js 에서 App 랩핑

yarn add -D react-router-dom

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App.js';
import { BrowserRouter } from 'react-router-dom';

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

라우트 설정

src/App.js

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import './style.scss';

import Songs from './Songs';
import Hello from './Hello';

class App extends Component {
    render() { 
        return ( 
            <div id="App">
                App.js

                <Route exact path="/songs" component={Songs}/>
                <Route exact path="/hello" component={Hello}/>
            </div>
         );
    }
}
 
export default App;

Link 설정

import { Link } from 'react-router-dom';

import React from 'react';
import { Link } from 'react-router-dom';

const Nav = () => {
    return ( 
        <ul>
            <li>
                <Link to="/hello">Hello</Link>
            </li>
            <li>
                <Link to="/songs">Songs</Link>
            </li>
        </ul>
     );
}
 
export default Nav;

parcel kit

설정 참고

Published 18 Oct 2019

ui code labUI-Dev on github