Skip to content

Commit ee40c56

Browse files
author
Didier Franc
committed
Add example
1 parent be9c64d commit ee40c56

10 files changed

Lines changed: 1029 additions & 26 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import Async from 'react-code-splitting'
3636

3737
import Login from './Login'
3838
const Home = () => <Async load={import('./Home')} />
39-
const LostPassword = (props) => <Async load={import('./LostPassword')} componentProps={props}/>
39+
const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/>
4040

4141
const App = ({ user }) => (
4242
<Body>
@@ -47,7 +47,7 @@ const App = ({ user }) => (
4747
)
4848
```
4949

50-
You can view this snippets in context [here](https://github.com/didierfranc/redux-react-starter/blob/master/src/components/App.js#L11) !
50+
You can view this snippets in context [here](https://github.com/didierfranc/redux-react-starter/blob/master/src/components/App.js#L12) !
5151

5252
## More
5353

‎dist/react-code-splitting.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-code-splitting.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/App/Fat.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from 'react'
2+
3+
export default () => <h1>{"I'm fat"}</h1>

‎example/App/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react'
2+
import { render } from 'react-dom'
3+
import Async from '../../dist/react-code-splitting.min'
4+
5+
6+
const Fat = () => <Async load={import('./Fat')} />
7+
8+
class App extends Component {
9+
state = {
10+
load: false
11+
}
12+
render() {
13+
return (
14+
<div>
15+
<button
16+
onClick={() => this.setState({ load: true })}
17+
>
18+
Load my fat component
19+
</button>
20+
{this.state.load && <Fat />}
21+
</div>
22+
)
23+
}
24+
}
25+
26+
27+
render(<App />, document.querySelector('react'))

‎example/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+
<meta charset="utf-8">
5+
<title>react-code-splitting</title>
6+
</head>
7+
<body>
8+
<react />
9+
<script src="bundle.js" charset="utf-8"></script>
10+
</body>
11+
</html>

‎example/webpack.config.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const { resolve } = require('path')
2+
const webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: [
6+
resolve(__dirname, './App'),
7+
],
8+
output: {
9+
filename: 'bundle.js',
10+
path: resolve(__dirname),
11+
publicPath: '/',
12+
},
13+
context: resolve(__dirname),
14+
devtool: 'inline-source-map',
15+
devServer: {
16+
host: '0.0.0.0',
17+
contentBase: resolve(__dirname),
18+
publicPath: '/',
19+
historyApiFallback: true,
20+
},
21+
module: {
22+
rules: [
23+
{
24+
test: /\.(js|jsx)$/,
25+
include: [resolve(__dirname, '../src'), resolve(__dirname)],
26+
use: 'babel-loader',
27+
},
28+
],
29+
},
30+
performance: { hints: false },
31+
}

‎package.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
{
22
"name": "react-code-splitting",
3-
"version": "1.1.1",
3+
"version": "1.2.0",
44
"description": "Code splitting won't be a nightmare anymore",
55
"main": "./dist/react-code-splitting.min.js",
66
"repository": "https://github.com/didierfranc/react-code-splitting",
77
"author": "Didier Franc",
88
"license": "MIT",
99
"scripts": {
10-
"build": "webpack"
10+
"build": "webpack",
11+
"start": "webpack-dev-server --open --config example/webpack.config.js"
1112
},
1213
"devDependencies": {
1314
"babel-cli": "^6.23.0",
1415
"babel-core": "^6.22.1",
1516
"babel-loader": "^7.1.1",
1617
"babel-preset-es2015": "^6.22.0",
1718
"babel-preset-react": "^6.22.0",
18-
"babel-preset-stage-0": "^6.22.0"
19+
"babel-preset-stage-0": "^6.22.0",
20+
"webpack": "^3.4.1",
21+
"webpack-dev-server": "^2.6.1"
1922
},
2023
"dependencies": {
2124
"prop-types": "^15.5.8",
22-
"webpack": "^3.4.1"
25+
"react": "^15.6.1",
26+
"react-dom": "^15.6.1"
2327
}
2428
}

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@ module.exports = {
3737
externals: [
3838
'react',
3939
'react-dom',
40+
'prop-types'
4041
]
4142
}

0 commit comments

Comments
 (0)