Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

第一次使用WebPack来写React

Posted on 2016年3月11日 by 九九 / 3866 Views

本文目录

目录

*1.安装环境

*2.Hello World

*3.运行

1.安装环境

目前的环境是VS2015 Community + Win7x64

需要安装一下nodejs+react+webpack

安装nodejs:[Win]

安装VS2015 nodejs插件:Node.js Tools for VS

这样写require引用的时候会有提示

打开cmd命令行

安装webpack:

npm install -g webpack

安装解析jsx的:

npm install jsx-loader --save-dev

安装react

npm install --save react

安装react-dom

npm install react-dom

安装http-server 用于创建web服务

npm install --save-dev http-server
2.Hello World

(1)VS2015新建一个空白的ASP.NET项目:

project--
|
|--components
|       |
|       |--hello.jsx
|       |--index.jsx
|    
|--index.html
|--package.json
|--webpack.config.js

(2)在空白项目中新建文件夹 components 放置组件(hello.jsx,hello.jsx)

一个简单基本组件 hello.jsx

'use' strict
var React=require('react')
module.exports = React.createClass({
    displayName: 'HelloReact',
    render: function () {
        return <div>Hello React</div>
    }
});

创建 index.jsx 来封装组件

'use strict';

var React = require('react')
var ReactDOM=require('react-dom')
var Hello = require('./hello')

//废弃方法
//React.render(<Hello />, document.getElementById('content'))
//上面一个很早就废弃了,下面的虽然能正常使用,但提示说也已经废弃
//React.renderComponent(<Hello/>,document.getElementById('content'))
//于是改用react-dom
ReactDOM.render(<Hello/>,document.getElementById('content'))

配置一下 webpack

项目根目录下新建webpack的配置文件 webpack.config.js

module.exports = {
    entry: './components/index.jsx',//控件输出文件
    output: {
        filename: 'bundle.js', //默认名字,可以不用管 bundle
        // webpack-dev-server运行目录和端口,服务启动时候,bundle.js会生成到mytest目录下
        // 要注意这里的端口号 8889 和文件夹名称 mytest 可以自己随意取,但要和 package.json 和 index.html 引用的路径匹配 
        publicPath: 'http://localhost:8889/mytest'
    },
    module: {
        loaders: [
            {
                //告诉 webpack 用 jsx-loader 来解析所有的 *.jsx 文件
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    externals: {
        //不要捆绑 'react' npm 包到bundle.js
        //但是可以从全局 'React' 变量中取得
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

创建 index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello World</title>
    <meta charset="utf-8" />
    <script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
    <div id="content">

    </div>
    <!--注意这里的路径,要和配置文件端口设置一致-->
    <script src="http://localhost:8889/webpack-dev-server.js"></script>
    <script type="text/javascript" src="http://localhost:8889/mytest/bundle.js"></script>

</body>
</html>

创建 package.json 文件

{
  "scripts": {
    "start": "npm run server | npm run dev",
    "server": "./node_modules/.bin/http-server -p 8080",//注意端口号
    "dev": "webpack-dev-server --progress --colors --port 8889"//端口号要和index.html和webpack.config.js一致
  },
  "name": "hello-world",
  "version": "0.1.0",
  "main": "components/index.js",
  "dependencies": {
    "react": "^0.14.7"//这里配置的时候VS2015会搜索npm已经安装的版本
    //update 2016-07-18 当前react版本:15.2.1,已经不能再使用上述 "react":"^0.14.7"
    //在这里需要修改一下使用react-dom
    "react-dom": "^15.2.1"
  },
  "devDependencies": {
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "jsx-loader": "^0.13.2",
    "http-server": "^0.9.0"
  }
}
3.运行
npm run  start

如果一切没问题,在浏览器打开

http://localhost:8889/index.html

Hello React

使用React Developer Tools(Chrome的插件)可以看到生成的html代码

<HelloReact>
    <div>Hello React</div>
</HelloReact>

参考文档:

Webpack 配置 React 开发环境

React with webpack – part 1(这个教程已经不适用新版本的react了)

JS, React, Webpack
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
只能回忆
Newer post
博雅网的投票工具

标签云

2019ncov Android ASP.NET Baby C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2023年3月
  • 2023年2月
  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary