react + webpack +es6 hello world

Posted 2020-06-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react + webpack +es6 hello world相关的知识，希望对你有一定的参考价值。

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/

以上是关于react + webpack +es6 hello world的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 React + ES6 + webpack 导入和导出组件？

react + webpack +es6 hello world

webpack + react + es6, 并附上自己碰到的一些问题

webpack+react+es6开发模式

webpack React+ES6

React 16 - ES6 - Webpack - 错误：模块不是加载器（必须具有正常或俯仰功能）