Skip to content

Commit e017c3d

Browse files
lidianhao123lidianhao123
committed
fisrt version
0 parents  commit e017c3d

File tree

9 files changed

+269
-0
lines changed

9 files changed

+269
-0
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Dan Abramov
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
React started
2+
=====================
3+
4+
### Usage
5+
6+
```
7+
npm install
8+
npm start
9+
open http://localhost:3000
10+
```
11+
12+
Now edit `src/App.js`.
13+
Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
14+
15+
### Linting
16+
17+
This boilerplate project includes React-friendly ESLint configuration.
18+
19+
```
20+
npm run lint
21+
```
22+
23+
### Using `0.0.0.0` as Host
24+
25+
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.
26+
27+
### Missing Features
28+
29+
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).
30+
31+
### Dependencies
32+
33+
* React
34+
* Webpack
35+
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
36+
* [babel-loader](https://github.com/babel/babel-loader)
37+
* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
38+
39+
### Resources
40+
41+
* [Demo video](http://vimeo.com/100010922)
42+
* [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
43+
* [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
44+
* [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
45+
* Ping dan_abramov on Twitter or #reactjs IRC

‎index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Sample App</title>
5+
</head>
6+
<body>
7+
<div id='root'>
8+
</div>
9+
<script src="/static/bundle.js"></script>
10+
</body>
11+
</html>

‎package.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "react-started",
3+
"version": "1.0.0",
4+
"description": "Boilerplate for ReactJS project with hot code reloading",
5+
"scripts": {
6+
"start": "node server.js",
7+
"lint": "eslint src"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/lidianhao123/react-started.git"
12+
},
13+
"keywords": [
14+
"react",
15+
"reactjs",
16+
"boilerplate",
17+
"hot",
18+
"reload",
19+
"hmr",
20+
"live",
21+
"edit",
22+
"webpack"
23+
],
24+
"author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
25+
"license": "MIT",
26+
"bugs": {
27+
"url": "https://github.com/lidianhao123/react-started/issues"
28+
},
29+
"homepage": "https://github.com/lidianhao123/react-started",
30+
"devDependencies": {
31+
"babel-core": "^6.0.20",
32+
"babel-eslint": "^4.1.3",
33+
"babel-loader": "^6.0.1",
34+
"babel-preset-es2015": "^6.0.15",
35+
"babel-preset-react": "^6.0.15",
36+
"babel-preset-stage-0": "^6.0.15",
37+
"babel-preset-stage-1": "^6.5.0",
38+
"css-loader": "^0.23.1",
39+
"eslint": "^1.10.3",
40+
"eslint-plugin-react": "^3.6.2",
41+
"file-loader": "^0.9.0",
42+
"less": "^2.7.1",
43+
"less-loader": "^2.2.3",
44+
"postcss-loader": "^0.9.1",
45+
"react-hot-loader": "^1.3.0",
46+
"style-loader": "^0.13.1",
47+
"url-loader": "^0.5.7",
48+
"webpack": "^1.12.2",
49+
"webpack-dev-server": "^1.12.1"
50+
},
51+
"dependencies": {
52+
"react": "^15.2.1",
53+
"react-dom": "^15.2.1"
54+
}
55+
}

‎server.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var webpack = require('webpack');
2+
var WebpackDevServer = require('webpack-dev-server');
3+
var config = require('./webpack.config');
4+
5+
new WebpackDevServer(webpack(config), {
6+
publicPath: config.output.publicPath,
7+
hot: true,
8+
historyApiFallback: true
9+
}).listen(3000, 'localhost', function (err, result) {
10+
if (err) {
11+
return console.log(err);
12+
}
13+
14+
console.log('Listening at http://localhost:3000/');
15+
});

‎src/App.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { Component } from 'react';
2+
3+
export default class App extends Component {
4+
render() {
5+
return (
6+
<div>
7+
<h1>Hello, world.lidian</h1>
8+
</div>
9+
);
10+
}
11+
}

‎src/components/LImage.jsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { Component, PropTypes } from 'react'
2+
import { findDOMNode } from 'react-dom'
3+
4+
export default class LImage extends Component {
5+
6+
constructor(props) {
7+
super(props)
8+
}
9+
10+
componentDidMount(){
11+
let {src, defaultPath, loading } = this.props,
12+
dom = findDOMNode(this),
13+
tempImg = new Image();
14+
15+
console.info("defaultPath",src)
16+
//图片路径为空 null undefined
17+
if(!src){
18+
return
19+
}
20+
tempImg.onload = () => {
21+
dom.src = src
22+
}
23+
tempImg.onerror = () =>{
24+
console.info("onerror")
25+
dom.src = defaultPath
26+
}
27+
tempImg.src = src;
28+
if(loading){
29+
dom.src = loading;
30+
}
31+
}
32+
//TODO 当组件为update时存在无法更新图片的bug
33+
componentDidUpdate(prevProps, prevState) {
34+
console.info("defaultPath",prevProps.src)
35+
}
36+
37+
38+
render() {
39+
const {src, defaultPath, loading, ...other} = this.props
40+
41+
//如果图片src为空 null undefined 并且 defaultPath存在，则直接显示defaultPath
42+
if(!src && defaultPath){
43+
return <img {...other} src={defaultPath} />
44+
}
45+
if(loading){
46+
return <img {...other} src={loading} />
47+
}
48+
if(defaultPath){
49+
return <img {...other} src={defaultPath} />
50+
}
51+
}
52+
}
53+
54+
LImage.propTypes = {
55+
src: PropTypes.string.isRequired,
56+
defaultPath: PropTypes.string,
57+
loading: PropTypes.string
58+
}

‎src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('root'));

‎webpack.config.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
4+
module.exports = {
5+
devtool: 'eval',
6+
// devtool: 'cheap-module-eval-source-map',
7+
// devtool: 'source-map',
8+
entry: [
9+
'webpack-dev-server/client?http://localhost:3000',
10+
'webpack/hot/only-dev-server',
11+
'./src/index'
12+
],
13+
output: {
14+
path: path.join(__dirname, 'dist'),
15+
filename: 'bundle.js',
16+
publicPath: '/static/'
17+
},
18+
resolve: {
19+
extensions: ['', '.js', '.jsx'],
20+
alias:[
21+
'components'
22+
].reduce((acc, dir) => ((acc[dir] = path.resolve(__dirname, './src/'+dir)) && acc), {})
23+
},
24+
plugins: [
25+
new webpack.HotModuleReplacementPlugin()
26+
],
27+
module: {
28+
loaders: [
29+
{
30+
test: /\.(js|jsx)$/,
31+
loaders: ['react-hot', 'babel'],
32+
include: path.join(__dirname, 'src')
33+
},
34+
{
35+
test: /\.css$/,
36+
loader: 'style-loader!css-loader!postcss-loader'
37+
},
38+
{
39+
test: /\.less/,
40+
loader: 'style-loader!css-loader!postcss-loader!less-loader'
41+
},
42+
{
43+
test: /\.(gif|jpg|png|woff|svg|eot|ttf)$/,
44+
loader: 'url-loader?limit=8192'
45+
}
46+
]
47+
}
48+
};

0 commit comments

Comments
 (0)