Skip to content

Commit 17b3db6

Browse files
author
jfusco
committed
Adding initial codebase
1 parent 40f8258 commit 17b3db6

13 files changed

Lines changed: 266 additions & 1 deletion

File tree

‎.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
"react",
4+
"es2015"
5+
]
6+
}

‎.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is for unifying the coding style for different editors and IDEs.
2+
3+
# No .editorconfig files above the root directory
4+
root = true
5+
6+
# All files unicode
7+
[*]
8+
charset = utf-8
9+
10+
# Main styles for our files
11+
[{src/**/*.{js,scss,html},package.json,gulpfile.babel.js,.babelrc,.scsslint.yml,webpack.config.babel.js}]
12+
indent_style = tab
13+
end_of_line = lf
14+
trim_trailing_whitespace = true
15+
insert_final_newline = true
16+
indent_size = 4

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules/
2+
/.idea/
3+
/build/
4+
*.DS_Store
5+
npm-debug.log

‎README.md‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,33 @@
11
# react-webpack-es6-chunking
2-
ES6 react + webpack + react-router + code-splitting starter project
2+
> ES6 react + webpack + react-router + code-chunking starter project.
3+
4+
## Requirements
5+
The following tools are required to get this running.
6+
7+
### Dev tools
8+
* [Node](https://nodejs.org/en/) `~6.2.2` *~NPM will install automatically*
9+
* NPM `~3.9.5`
10+
* [Webpack](https://webpack.github.io/) `~1.13.1`
11+
12+
13+
## Installation
14+
### Install Node
15+
Visit [here](https://nodejs.org/en/) - download and install the latest, stable version.
16+
This will install `npm` automatically.
17+
18+
### Install Webpack globally
19+
```sh
20+
sudo npm install -g webpack
21+
```
22+
23+
### Install dependencies
24+
`cd` into the root of the project and run this command
25+
```sh
26+
$ npm install
27+
```
28+
29+
### Run project
30+
```sh
31+
$ npm run compile
32+
```
33+
**Open your browser and navigate to http://127.0.0.1:8080/**

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>React + Webapack + ES6 Starter</title>
6+
</head>
7+
<body>
8+
<div id="application"></div>
9+
10+
<script type="text/javascript" src="/build/bundles/vendor.bundle.js"></script>
11+
<script type="text/javascript" src="/build/bundles/main.bundle.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "react-webpack-es6-chunking",
3+
"version": "1.0.0",
4+
"description": "ES6 react + webpack + react-router + code-chunking starter project",
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/JFusco/react-webpack-es6-chunking"
8+
},
9+
"dependencies": {
10+
"react": "~15.2.1",
11+
"react-router": "~2.5.2",
12+
"react-dom": "~15.2.1"
13+
},
14+
"devDependencies": {
15+
"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"
23+
},
24+
"scripts": {
25+
"serve": "http-server ./",
26+
"compile": "webpack --display-chunks --display-modules --progress --colors && npm run serve"
27+
}
28+
}

‎src/js/components/app.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use strict';
2+
3+
import React, { Component } from 'react';
4+
import { Router, Route, Link } from 'react-router';
5+
import Nav from './nav';
6+
7+
class App extends Component {
8+
constructor(props){
9+
super(props);
10+
11+
this.navItems = ['about', 'contact'];
12+
}
13+
14+
render(){
15+
return (
16+
<div>
17+
<h1>Multipage application</h1>
18+
19+
{/* Main navigation */}
20+
<Nav data={this.navItems} />
21+
22+
{/* Page container */}
23+
<div role="main">
24+
{this.props.children}
25+
</div>
26+
</div>
27+
);
28+
}
29+
}
30+
31+
export default App;

‎src/js/components/nav.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use strict';
2+
3+
import { Link } from 'react-router';
4+
import React from 'react';
5+
6+
const Nav = ({data}) => {
7+
return (
8+
<nav>
9+
<ul role="menu">
10+
{data.map(item => {
11+
return (
12+
<li key={item}>
13+
<Link to={`/${item}`} activeClassName="active">{item} page</Link>
14+
</li>
15+
)
16+
})}
17+
</ul>
18+
</nav>
19+
);
20+
};
21+
22+
export default Nav;

‎src/js/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
3+
import React from 'react';
4+
import { Router, browserHistory } from 'react-router'
5+
import { render } from 'react-dom';
6+
import appRoutes from './routes/app.routes';
7+
8+
render((
9+
<Router history={browserHistory} routes={appRoutes} />
10+
), document.getElementById('application'));

‎src/js/pages/about.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 About = () => {
6+
return (
7+
<div>
8+
<h2>About page</h2>
9+
</div>
10+
);
11+
};
12+
13+
export default About;

0 commit comments

Comments
 (0)