Skip to content

Commit 2f3e1c7

Browse files
author
jfusco
committed
Refactoring components and routes - updating dependencies - adding a home page
1 parent 85090d9 commit 2f3e1c7

14 files changed

Lines changed: 90 additions & 61 deletions

File tree

‎.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"presets": [
33
"react",
4-
"es2015"
4+
"es2015",
5+
"stage-2"
56
]
67
}

‎README.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# react-webpack-es6-chunking
22

3-
[![npm][npm-version-image]][npm-url]
3+
![npm][npm-version-image]
44
[![Dependency Status][dep-image]][dep-url]
55
[![devDependency Status][dev-dep-image]][dev-dep-url]
66

7-
> ES6 react + webpack + react-router + code-chunking starter project.
7+
> React + react-router code-chunking example
88
9-
This repository was created to demonstrate a simple application that lazy loads views/scripts using the latest [React](https://www.npmjs.com/package/react) and [React-Router](https://www.npmjs.com/package/react-router). Bundling and chunking gets handled with [Webpack](https://www.npmjs.com/package/webpack) and is written in ES6.
9+
This repository was created to demonstrate a dead simple application that lazy loads views/scripts using the latest [React](https://www.npmjs.com/package/react) and [React-Router](https://www.npmjs.com/package/react-router). Bundling and chunking gets handled with [Webpack](https://www.npmjs.com/package/webpack) and is written using ES6 modules.
1010

1111
## Requirements
1212
The following tools are required to get this running.
@@ -35,11 +35,10 @@ $ npm install
3535

3636
### Run project
3737
```sh
38-
$ npm run compile
38+
$ npm run dev
3939
```
40-
**Open your browser and navigate to http://127.0.0.1:8080/**
40+
**Open your browser and navigate to localhost:8080**
4141

42-
[npm-url]: https://npmjs.com/package/es6-event-emitter
4342
[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
4443
[dev-dep-image]: https://david-dm.org/JFusco/react-webpack-es6-chunking/dev-status.svg
4544
[dev-dep-url]: https://david-dm.org/JFusco/react-webpack-es6-chunking#info=devDependencies

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>React + Webapack + ES6 Starter</title>
5+
<title>React + react-router code-chunking example</title>
66
</head>
77
<body>
88
<div id="application"></div>

‎package.json‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
{
2-
"name": "react-webpack-es6-chunking",
3-
"version": "1.0.0",
4-
"description": "ES6 react + webpack + react-router + code-chunking starter project",
2+
"name": "react-router-code-chunking-example",
3+
"version": "1.1.0",
4+
"description": "React + react-router code-chunking example",
55
"repository": {
66
"type": "git",
7-
"url": "https://github.com/JFusco/react-webpack-es6-chunking"
7+
"url": "https://github.com/JFusco/react-router-code-chunking-example"
88
},
99
"dependencies": {
10-
"react": "~15.2.1",
11-
"react-router": "~2.5.2",
12-
"react-dom": "~15.2.1"
10+
"react": "~15.3.0",
11+
"react-dom": "~15.3.0",
12+
"react-router": "~2.6.1"
1313
},
1414
"devDependencies": {
1515
"babel-cli": "^6.10.1",
16-
"babel-core": "^6.10.4",
17-
"babel-loader": "^6.2.4",
18-
"babel-register": "^6.9.0",
19-
"babel-preset-react": "^6.11.1",
20-
"babel-preset-es2015": "^6.9.0",
21-
"http-server": "^0.9.0",
22-
"webpack": "^1.13.1"
16+
"babel-core": "^6.10.4",
17+
"babel-loader": "^6.2.4",
18+
"babel-preset-es2015": "^6.9.0",
19+
"babel-preset-react": "^6.11.1",
20+
"babel-preset-stage-2": "^6.11.0",
21+
"babel-register": "^6.9.0",
22+
"webpack": "^1.13.1",
23+
"webpack-dev-server": "^1.14.1"
2324
},
2425
"scripts": {
25-
"serve": "http-server ./",
26-
"compile": "webpack --display-chunks --display-modules --progress --colors && npm run serve"
26+
"dev": "./node_modules/.bin/webpack-dev-server --content-base ./ --inline --hot",
27+
"test": "echo \"Error: no test specified\" && exit 1"
2728
}
2829
}

src/js/pages/about.js renamed to src/js/components/About.js

File renamed without changes.

src/js/components/app.js renamed to src/js/components/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import React, { Component } from 'react';
44
import { Router, Route, Link } from 'react-router';
5-
import Nav from './nav';
5+
import Nav from './Nav';
66

77
class App extends Component {
88
constructor(props){

src/js/pages/contact.js renamed to src/js/components/Contact.js

File renamed without changes.

‎src/js/components/Home.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
import React from 'react';
4+
5+
const Home = () => {
6+
return (
7+
<div>
8+
<h2>Home page</h2>
9+
</div>
10+
);
11+
};
12+
13+
export default Home;

‎src/js/index.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
import React from 'react';
44
import { Router, browserHistory } from 'react-router'
55
import { render } from 'react-dom';
6-
import appRoutes from './routes/app.routes';
6+
import routes from './routes';
7+
8+
const app = document.getElementById('application');
79

810
render((
9-
<Router history={browserHistory} routes={appRoutes} />
10-
), document.getElementById('application'));
11+
<Router history={browserHistory} routes={routes}/>
12+
), app);

‎src/js/routes/about.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
3+
export default {
4+
path: '/about',
5+
getComponent(loc, cb){
6+
require.ensure([], (require) => {
7+
cb(null, require('../components/About').default);
8+
});
9+
}
10+
}

0 commit comments

Comments
 (0)