fisrt version

react-ld · Jul 20, 2016 · e017c3d · e017c3d
commit e017c3d
Show file tree

Hide file tree

Showing 9 changed files with 269 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,45 @@
+React started
+=====================
+
+### Usage
+
+```
+npm install
+npm start
+open http://localhost:3000
+```
+
+Now edit `src/App.js`.  
+Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
+
+### Linting
+
+This boilerplate project includes React-friendly ESLint configuration.
+
+```
+npm run lint
+```
+
+### Using `0.0.0.0` as Host
+
+You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
+
+### Missing Features
+
+This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
+
+### Dependencies
+
+* React
+* Webpack
+* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
+* [babel-loader](https://github.com/babel/babel-loader)
+* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
+
+### Resources
+
+* [Demo video](http://vimeo.com/100010922)
+* [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
+* [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
+* [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
+* Ping dan_abramov on Twitter or #reactjs IRC
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Sample App</title>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "react-started",
+  "version": "1.0.0",
+  "description": "Boilerplate for ReactJS project with hot code reloading",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lidianhao123/react-started.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "boilerplate",
+    "hot",
+    "reload",
+    "hmr",
+    "live",
+    "edit",
+    "webpack"
+  ],
+  "author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lidianhao123/react-started/issues"
+  },
+  "homepage": "https://github.com/lidianhao123/react-started",
+  "devDependencies": {
+    "babel-core": "^6.0.20",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^6.0.1",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-react": "^6.0.15",
+    "babel-preset-stage-0": "^6.0.15",
+    "babel-preset-stage-1": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.6.2",
+    "file-loader": "^0.9.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "postcss-loader": "^0.9.1",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "dependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err);
+  }
+
+  console.log('Listening at http://localhost:3000/');
+});
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+      <h1>Hello, world.lidian</h1>
+      </div>
+    );
+  }
+}
diff --git a/src/components/LImage.jsx b/src/components/LImage.jsx
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react'
+import { findDOMNode } from 'react-dom'
+
+export default class LImage extends Component {
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount(){
+    let {src, defaultPath, loading } = this.props,
+      dom = findDOMNode(this),
+    	tempImg = new Image();
+
+    console.info("defaultPath",src) 
+    //图片路径为空 null undefined
+    if(!src){
+      return
+    }
+    tempImg.onload = () => {
+      dom.src = src
+    }
+    tempImg.onerror = () =>{
+      console.info("onerror")
+      dom.src = defaultPath
+    }
+    tempImg.src = src;
+    if(loading){
+      dom.src = loading;
+    }
+  }
+  //TODO 当组件为update时存在无法更新图片的bug
+  componentDidUpdate(prevProps, prevState) {
+    console.info("defaultPath",prevProps.src) 
+  }
+
+
+  render() {
+    const {src, defaultPath, loading, ...other} = this.props
+
+    //如果图片src为空 null undefined 并且 defaultPath存在，则直接显示defaultPath
+    if(!src && defaultPath){
+      return  <img {...other} src={defaultPath} />
+    }
+    if(loading){
+      return <img {...other} src={loading} />
+    }
+    if(defaultPath){
+      return  <img {...other} src={defaultPath} />
+    }
+  }
+} 
+
+LImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  defaultPath: PropTypes.string,
+  loading: PropTypes.string
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,48 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+  // devtool: 'cheap-module-eval-source-map',
+  // devtool: 'source-map',
+  entry: [
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias:[
+      'components'
+    ].reduce((acc, dir) => ((acc[dir] = path.resolve(__dirname, './src/'+dir)) && acc), {})
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.(js|jsx)$/,
+        loaders: ['react-hot', 'babel'],
+        include: path.join(__dirname, 'src')
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader!postcss-loader'
+      },
+      {
+        test: /\.less/,
+        loader: 'style-loader!css-loader!postcss-loader!less-loader'
+      },
+      {
+        test: /\.(gif|jpg|png|woff|svg|eot|ttf)$/,
+        loader: 'url-loader?limit=8192'
+      }
+    ]
+  }
+};