react + webpack +es6 hello world

最新推荐文章于 2025-09-12 17:28:06 发布

转载最新推荐文章于 2025-09-12 17:28:06 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/txiao/p/5265724.html

文章标签：

#webpack #javascript #git #ViewUI

本文详细介绍如何使用React和Webpack构建前端应用的全过程，包括创建项目结构、配置Webpack、安装依赖包、编写React组件等内容。

1,目录

首先建立package.json文件

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "repository": {
    "type": "git",
    "url": ".."
  },
  "keywords": [
    "react",
    "webpack"
  ],
  "author": "txiao",
  "devDependencies": {
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.12.1",
    "react": "^0.13.3",
    "react-hot-loader": "^1.3.0",
    "react-router": "^0.13.3",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.11.0"
  },
  "dependencies": {
    "lodash": "~3.10.1",
    "react-kendo": "~0.13.11"
  }
}

View Code

创建打包配置文件

var webpack = require('webpack');
module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
       new webpack.HotModuleReplacementPlugin()
    ]
};

View Code

建立入口文件app.js

import React from 'react';
import MyHello from "./hello";
import MyWorld from "./world";
import MyImg from "./image";

React.render(
        <div>
            <MyImg/>
            <MyHello value="hello"/>
            <MyWorld value="world"/>
        </div>,
         document.getElementById('content')
    );

View Code

建立hello组件

import React from 'react';

var hello= React.createClass({
    render:function(){
        return (<div className= "hello" >{this.props.value}</div>);
    }
});

export default hello;

View Code

建立world组件

import React from 'react';

var world= React.createClass({
    render:function(){
        return (<div className="world" > {this.props.value}!</div>);
    }
});

export default world;

View Code

建立图片测试组件

import React from 'react';
var img = React.createClass({
    render:function(){
        return(<img src="./img/part1.png" />)
    }
});
export default img;

View Code

建立index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyReact</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>
  <body>
      <div id="content"></div>
    <script src="./build/bundle.js"></script>
  </body>
</html>

View Code

进入项目根目录执行插件包的安装 npm install

执行打包webpack

执行测试服务 npm start

访问 http://localhost:8080/webpack-dev-server/

转载于:https://www.cnblogs.com/txiao/p/5265724.html