Webpack 2 實作筆記 (6) — 安裝 React 和 Babel

如何安裝 React 和 Babel。

Webpack 2 — How to install React and Babel

安裝 reactreact-dom

$ yarn add react react-dom

安裝 Babel 相關套件:

$ yarn add -D babel babel-preset-react babel-preset-es2015

安裝 Babel webpack loader:

$ yarn add -D babel-loader babel-core

src/app.js 加上 React 語法:

...
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

然後在 src/index.hml 加上:

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

設定 webpack-config.js

module: {
rules: [
...
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
],
},

執行 yarn run dev 就可以到 localhost:8080 看到成果。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.