├── .idea
├── .name
├── vcs.xml
├── modules.xml
├── jsLibraryMappings.xml
├── reactdemo.iml
├── libraries
│ └── react_webpack_demos_node_modules.xml
├── misc.xml
├── watcherTasks.xml
└── workspace.xml
├── README.md
├── src
├── HelloSayer.js
├── entry.jsx
└── Hello.js
├── index.html
├── app.less
├── package.json
├── webpack.config.js
└── static
└── bundle.js
/.idea/.name:
--------------------------------------------------------------------------------
1 | reactdemo
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ###安装使用
2 |
3 | ```js
4 |
5 | $ npm install
6 | $ webpack --watch
7 |
8 |
9 | ```
10 |
11 | open http://localhost:8080
12 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/HelloSayer.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var HelloSayer = React.createClass({
4 | render() {
5 | return (
Hello {this.props.name}!
);
6 | }
7 | });
8 |
9 | module.exports = HelloSayer;
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React+Webpack+ES6实例
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/entry.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by trigkit4 on 16/3/18.
3 | */
4 | //var HelloForm = require('./Hello');
5 | import HelloForm from './Hello';
6 | //var React = require('react');
7 | import React from 'react';
8 | require('../app.less');
9 | var $ = function (id) {
10 | return document.getElementById(id);
11 | };
12 | React.render(, $('example'));
--------------------------------------------------------------------------------
/.idea/jsLibraryMappings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/reactdemo.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/app.less:
--------------------------------------------------------------------------------
1 | body{
2 | background-color: #e0e8e0;
3 | opacity: .6;
4 | }
5 | input[type=text]{
6 | position: absolute;
7 | left: 50%;
8 | top: 10%;
9 | color: darkkhaki;
10 | font-size: 1.4rem;
11 | outline: none;
12 | width: 300px;
13 | height: 40px;
14 | margin-left: -150px;
15 | margin-top: -20px;
16 | }
17 | p{
18 | position: absolute;
19 | width: 400px;
20 | color: rosybrown;
21 | margin-left: -200px;
22 | font-size: 1.6rem;
23 | left: 50%;
24 | top: 20%;
25 | }
26 |
--------------------------------------------------------------------------------
/.idea/libraries/react_webpack_demos_node_modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/Hello.js:
--------------------------------------------------------------------------------
1 | //var HelloSayer = require('./HelloSayer');
2 | import HelloSayer from './HelloSayer'
3 | var React = require('react');
4 |
5 | var HelloForm = React.createClass({
6 | getInitialState() {
7 | return {
8 | name: 'trigkit4'
9 | };
10 | },
11 | render() {
12 | return (
13 |
14 |
15 |
16 |
17 | );
18 | },
19 | onChange(e) {
20 | this.setState({
21 | name: e.target.value
22 | });
23 | }
24 | });
25 |
26 | module.exports = HelloForm;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactdemo",
3 | "version": "1.0.0",
4 | "description": "reactdemos",
5 | "main": "./src/index.jsx",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "trigkit4",
10 | "license": "ISC",
11 | "dependencies": {
12 | "babel-preset-react": "^6.3.13",
13 | "react": "^0.14.5",
14 | "react-dom": "^0.14.5"
15 | },
16 | "devDependencies": {
17 | "babel-core": "^6.3.26",
18 | "babel-loader": "^6.2.0",
19 | "babel-preset-es2015": "^6.3.13",
20 | "babel-preset-react": "^6.3.13",
21 | "browser-sync": "^2.11.1",
22 | "browser-sync-webpack-plugin": "^1.0.1",
23 | "webpack": "^1.12.9"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by trigkit4 on 15/12/31.
3 | */
4 | var webpack = require('webpack');
5 | var path = require('path');
6 | var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
7 | var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
8 |
9 | var config = {
10 | entry: path.resolve(__dirname,'./src/entry'),
11 | output: {
12 | path: path.resolve(__dirname,'./static'),
13 | filename: 'bundle.js'
14 | },
15 |
16 | resolve: {
17 | extensions: ['', '.js', '.jsx','.es6','css','scss','png','jpg']
18 | },
19 | module:{
20 | loaders:[
21 | {
22 | test:/\.js[x]?$/,
23 | loader: 'babel-loader',
24 | exclude:/node_modules/,
25 | query:{presets: ['es2015','react']}
26 | },
27 | {
28 | test: /\.less$/,
29 | loader: 'style!css!less'
30 | }
31 | ]
32 | },
33 | plugins: [
34 | new uglifyJsPlugin({
35 | compress: {
36 | warnings: false
37 | }
38 | }),
39 | new BrowserSyncPlugin({
40 | host: 'localhost',
41 | port: 8080,
42 | server: {baseDir:'./'}
43 | })
44 | ]
45 | };
46 |
47 | module.exports = config;
--------------------------------------------------------------------------------
/.idea/watcherTasks.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 | true
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 | true
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | 1451527827672
230 |
231 | 1451527827672
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
--------------------------------------------------------------------------------
/static/bundle.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),a=o(r),i=n(3),s=o(i);n(160);var u=function(e){return document.getElementById(e)};s["default"].render(s["default"].createElement(a["default"],null),u("example"))},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=n(2),a=o(r),i=n(3),s=i.createClass({displayName:"HelloForm",getInitialState:function(){return{name:"trigkit4"}},render:function(){return i.createElement("div",null,i.createElement("input",{type:"text",onChange:this.onChange}),i.createElement(a["default"],{name:this.state.name}))},onChange:function(e){this.setState({name:e.target.value})}});e.exports=s},function(e,t,n){"use strict";var o=n(3),r=o.createClass({displayName:"HelloSayer",render:function(){return o.createElement("p",null,"Hello ",this.props.name,"!")}});e.exports=r},function(e,t,n){"use strict";e.exports=n(4)},function(e,t,n){"use strict";var o=n(5),r=n(150),a=n(154),i=n(41),s=n(159),u={};i(u,a),i(u,{findDOMNode:s("findDOMNode","ReactDOM","react-dom",o,o.findDOMNode),render:s("render","ReactDOM","react-dom",o,o.render),unmountComponentAtNode:s("unmountComponentAtNode","ReactDOM","react-dom",o,o.unmountComponentAtNode),renderToString:s("renderToString","ReactDOMServer","react-dom/server",r,r.renderToString),renderToStaticMarkup:s("renderToStaticMarkup","ReactDOMServer","react-dom/server",r,r.renderToStaticMarkup)}),u.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=o,u.__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=r,e.exports=u},function(e,t,n){(function(t){"use strict";var o=n(7),r=n(8),a=n(73),i=n(47),s=n(30),u=n(20),c=n(52),l=n(56),p=n(148),d=n(93),f=n(149),h=n(27);a.inject();var v=u.measure("React","render",s.render),m={findDOMNode:d,render:v,unmountComponentAtNode:s.unmountComponentAtNode,version:p,unstable_batchedUpdates:l.batchedUpdates,unstable_renderSubtreeIntoContainer:f};if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject&&__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({CurrentOwner:o,InstanceHandles:i,Mount:s,Reconciler:c,TextComponent:r}),"production"!==t.env.NODE_ENV){var g=n(11);if(g.canUseDOM&&window.top===window.self){"undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&(navigator.userAgent.indexOf("Chrome")>-1&&-1===navigator.userAgent.indexOf("Edge")||navigator.userAgent.indexOf("Firefox")>-1)&&console.debug("Download the React DevTools for a better development experience: https://fb.me/react-devtools");var y=document.documentMode&&document.documentMode<8;"production"!==t.env.NODE_ENV?h(!y,'Internet Explorer is running in compatibility mode; please add the following tag to your HTML to prevent this from happening: '):void 0;for(var E=[Array.isArray,Array.prototype.every,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,Date.now,Function.prototype.bind,Object.keys,String.prototype.split,String.prototype.trim,Object.create,Object.freeze],N=0;N1)for(var n=1;n"+p+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=i.getNode(this._rootNodeID);o.updateTextContent(r,n)}}},unmountComponent:function(){a.unmountIDFromEnvironment(this._rootNodeID)}}),e.exports=p}).call(t,n(6))},function(e,t,n){(function(t){"use strict";function o(e,t,n){var o=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,o)}var r=n(10),a=n(18),i=n(20),s=n(21),u=n(22),c=n(15),l={dangerouslyReplaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup,updateTextContent:u,processUpdates:function(e,n){for(var i,l=null,p=null,d=0;d when using tables, nesting tags like