Skip to content
This repository was archived by the owner on Nov 9, 2017. It is now read-only.

Commit a05dcb4

Browse files
baransubaransu
committed
Add React scaffold
1 parent 2afa8df commit a05dcb4

18 files changed

+5629
-0
lines changed

‎.flowconfig

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[ignore]
2+
<PROJECT_ROOT>/node_modules/fbjs/.*
3+
4+
[include]
5+
6+
[libs]
7+
8+
[options]

‎.gitignore

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log*
16+
yarn-debug.log*
17+
yarn-error.log*
18+

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Erlang Performance Lab UI
2+
3+
* [ ] travis
4+
* [ ] redux
5+
* [ ] react router (checkout 4?)
6+
* [ ] bootstrap 4 (source or not)

‎__tests__/App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import App from '../src/App.js';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
render(<App />, div);
8+
});

‎package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "erlangpl-ui",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"flow-bin": "^0.39.0",
7+
"react-scripts": "0.9.0"
8+
},
9+
"dependencies": {
10+
"bulma": "^0.3.1",
11+
"font-awesome": "^4.7.0",
12+
"react": "^15.4.2",
13+
"react-dom": "^15.4.2",
14+
"react-redux": "^5.0.2",
15+
"react-router-dom": "^4.0.0-beta.6",
16+
"react-router-redux": "^4.0.8",
17+
"redux": "^3.6.0"
18+
},
19+
"scripts": {
20+
"flow": "flow",
21+
"start": "react-scripts start",
22+
"build": "react-scripts build",
23+
"test": "react-scripts test --env=jsdom",
24+
"eject": "react-scripts eject"
25+
}
26+
}

‎public/favicon.ico

24.3 KB
Binary file not shown.

‎public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎src/App.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// @flow
2+
import React from 'react';
3+
import Router from 'react-router-dom/BrowserRouter';
4+
import Route from 'react-router/Route';
5+
import { Provider } from 'react-redux';
6+
import { syncHistoryWithStore } from 'react-router-redux';
7+
import createHistory from 'history/createBrowserHistory';
8+
9+
import Navigation from './components/Navigation';
10+
import Home from './components/Home';
11+
import Page from './components/Page';
12+
import About from './components/About';
13+
import store from './store';
14+
15+
const history = syncHistoryWithStore(createHistory(), store);
16+
17+
const App = () => {
18+
return (
19+
<Provider store={store}>
20+
<Router history={history}>
21+
<div>
22+
23+
{/* TODO (baransu) maybe pass routes as param? */}
24+
<Navigation />
25+
26+
<Route exact path="/" component={Home} />
27+
<Route path="/page" component={Page} />
28+
<Route path="/about" component={About} />
29+
</div>
30+
</Router>
31+
</Provider>
32+
);
33+
};
34+
35+
export default App;

‎src/components/About.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @flow
2+
import React from 'react';
3+
4+
const About = () => {
5+
return (
6+
<section className="hero is-medium is-primary is-bold">
7+
<div className="hero-body">
8+
<div className="container">
9+
<h1 className="title">
10+
About
11+
</h1>
12+
</div>
13+
</div>
14+
</section>
15+
);
16+
};
17+
18+
export default About;

‎src/components/Home.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @flow
2+
import React from 'react';
3+
4+
const Home = () => {
5+
return (
6+
<section className="hero is-medium is-primary is-bold">
7+
<div className="hero-body">
8+
<div className="container">
9+
<h1 className="title">
10+
Dashboard
11+
</h1>
12+
</div>
13+
</div>
14+
</section>
15+
);
16+
};
17+
18+
export default Home;

‎src/components/Navigation.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @flow
2+
import React from 'react';
3+
import Link from 'react-router-dom/Link';
4+
5+
import logo from '../images/erlangpl_header.png';
6+
7+
const tabs = [
8+
{ path: '/', text: 'Dashboard' },
9+
{ path: '/page', text: 'Page' },
10+
{ path: '/about', text: 'About' },
11+
];
12+
13+
const Navigation = () => {
14+
return (
15+
<div style={{ marginBottom: '50px' }}>
16+
<img src={logo} alt="Erlang Performance Lab" />
17+
<div className="tabs is-boxed">
18+
<ul>
19+
{tabs.map((tab, i) => (
20+
<li key={i}>
21+
<Link to={tab.path}>
22+
{tab.text}
23+
</Link>
24+
</li>
25+
))}
26+
</ul>
27+
</div>
28+
</div>
29+
);
30+
};
31+
32+
export default Navigation;

‎src/components/Page.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// @flow
2+
import React from 'react';
3+
4+
const Page = () => {
5+
return (
6+
<section className="hero is-medium is-primary is-bold">
7+
<div className="hero-body">
8+
<div className="container">
9+
<h1 className="title">
10+
Page
11+
</h1>
12+
</div>
13+
</div>
14+
</section>
15+
);
16+
};
17+
18+
export default Page;

‎src/images/erlangpl_header.png

13.2 KB
Loading

‎src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎src/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// @flow
2+
import React from 'react';
3+
import { render } from 'react-dom';
4+
5+
import App from './App';
6+
7+
// CSS imports
8+
import 'bulma/css/bulma.css';
9+
import 'font-awesome/css/font-awesome.min.css';
10+
import './index.css';
11+
12+
render(<App />, document.getElementById('root'));

‎src/reducers/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @flow
2+
import { combineReducers } from 'redux';
3+
import { routerReducer } from 'react-router-redux';
4+
5+
const rootReducer = combineReducers({
6+
routing: routerReducer,
7+
});
8+
9+
export default rootReducer;

‎src/store.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @flow
2+
import { createStore } from 'redux';
3+
import rootReducer from './reducers';
4+
5+
const INITIAL_STATE = {};
6+
7+
const store = createStore(rootReducer, INITIAL_STATE /*, middleware */);
8+
9+
export default store;

0 commit comments

Comments
 (0)