アルゴリズムとかオーダーとか

仕事で勉強したことなどをまとめてます

parcelとbabelつかってReactしてみる

node.js React parcel

前回の記事 に早速コメントでparcelおすすめされたのと、最近社内でもparcel便利だよーっていう声を聞いたので早速webpackから乗り換えてみました。

まずはReactアプリを準備

まずはいつものhello worldなreactアプリを作ります。

react-sample
|--app
|  |--app.js
|  |--index.html
|  |--index.js
|--package.json
  • app.jsの中身
import React from 'react'

export default class App extends React.Component {
  render() {
    return <h1>Hello, world!</h1>
  }
}
  • index.jsの中身
import React  from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(
    <App />,
    document.getElementById('root')
)
  • index.htmlの中身
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
  <script type='text/javascript' src="index.js" ></script>
</body>
</html>

reactとbabelとparcelをインストールする

まずはnpmの初期化

npm init -y

最初にreactをインストール

npm i react react-dom

次にbabel

npm i babel-core babel-loader babel-plugin-transform-react-jsx

最後にparcel

npm i parcel-bundler

.babelrcを準備

以下の内容で.babelrcを作成

{
	"plugins": ["babel-plugin-transform-react-jsx"]
}

parcelを起動

node_modules/.bin/parcel app/index.html

であとはhttp://localhost:1234にアクセスしたらReactアプリが起動してます。

感想

めちゃくちゃ簡単でした。まだ凝ったことしてないのであれですが、一度parcel体験するとwebpackには戻れない気がします。

参考