使用React構建應用

webpack安裝,創建目錄reactDemo ,并且安裝hjs-webpack

npm install -g webpack
npm install -g webpack-dev-server

mkdir reactDemo 
cd reactDemo/

npm init -y
npm install hjs-webpack --save

npm -v

在項目根目錄下創建webpack.config.js

var getConfig = require('hjs-webpack')

module.exports = getConfig({
    // 入口JS文件的位置
    in : 'src/app.js',

    // 應用打包(build)之后將存放在哪個文件夾 
    out: 'public',

        // 是否在每次打包之前將之前的打包文件
        // 刪除
        clearBeforeBuild: true
})

創建src/app.js

import React from 'react'

// 加載CSS
require('./style.css')

class MyApp extends React.Component {
    render() {
        return <h1>Wonderful App</h1>
    }
}

React.render(<MyApp />,
    document.body)

啟動webpack的開發服務器

webpack-dev-server
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,947評論 18 139
  • Rekit 2.0 出了好用的新特性!文章翻譯來自:http://rekit.js.org/著作權歸作者所有。商業...
    moofyu閱讀 9,118評論 1 16
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,501評論 2 71
  • 貝多芬交響曲的現場 結合書中實例,來到樂團現場,聽貝多芬的室內樂團演繹。首先本次曲目是貝多芬第五交響曲,也是大家熟...
    咔辣辣閱讀 178評論 0 0
  • 女神維納斯的一只手臂是有殘缺的,她的殘缺暗含了西方對于美的認識——完整的不一定是美的,相反殘缺也可能帶來美的感受。...
    聽風的YiLei閱讀 474評論 0 0