vikingmute / webpack-react-kit

a simple webpack react starter kit

webpack-react-kit

another simple webpack react starter kit to help you get to know webpack better

Update

• using new React Hot Loader 3 (https://github.com/gaearon/react-hot-loader) to replace deprecated react-hmre (https://github.com/gaearon/react-transform-hmr)
• using Enzyme to replace karma test launcher (TODO)
• add ESlint with (airbnb react plugin) to validate JSX style(TODO)

Features

• Hot Module Replacement for React Component
• Babel for js/jsx processing
• Bootstrap4 framework with SCSS support
• Testing with Enzyme (TODO)
• ESlint to validate JSX style (TODO)

Demo

With this demo, you can search the github users with keyword

How to work

install the deps

npm install

run the dev server

npm run dev

then open http://localhost:8080 to see how it works

testing

TODO...

webpack-react-kit's Issues

没法运行项目

node版本是6.3

npm run dev

[email protected] dev /Users/yh/我的坚果云/code/webpack-react-kit
node server.js

module.js:442
throw err;
^

Error: Cannot find module 'webpack-dev-server'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/Users/yh/我的坚果云/code/webpack-react-kit/server.js:2:24)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-react-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack-react-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webpack-react-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/yh/我的坚果云/code/webpack-react-kit/npm-debug.log

keyword 获取后为啥请求时q=${keyword}没有替换

let keyword = nextProps.keyword;

    this.setState({"loading":true,"firstView":false});
    let url = 'https://api.github.com/search/users?q=${keyword}';

keyword 获取后为啥请求时q=${keyword}没有替换
发出的请求还是https://api.github.com/search/users?q=${keyword}

这个是怎么回事

页面能正常跑，但是为什么修改jsx不会刷新页面

我在return里面加了个1111，页面一直没反应，修改scss或者其他文件都没反应，不知道怎么回事；
还有你的pageage.json里面貌似少了一句 new webpack.HotModuleReplacementPlugin(),不然会报错

每次修改页面会出现重复内容

请问有出现这个情况吗？

修改jsx，页面刷新但是出现重复内容

不能运行项目

$ node -v
v6.3.0

$ npm run dev

[email protected] dev F:\react_abc\book_react_quanzhan\jiaoshoujia\webpack-react-kit
node server.js

E:\node\node_cache\webpack-dev-server:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (F:\react_abc\book_react_quanzhan\jiaoshoujia\webpack-react-kit\server.js:2:24)
at Module._compile (module.js:541:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "E:\node\node.exe" "E:\node\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-react-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack-react-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webpack-react-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! F:\react_abc\book_react_quanzhan\jiaoshoujia\webpack-react-kit\npm-debug.log