Commit e9c292ed authored by Thomas Roos's avatar Thomas Roos

Initial commmit

parents
/*
./.babelrc
*/
{
"presets":[
"react",
"flow"
],
"plugins": [
"syntax-dynamic-import"
]
}
\ No newline at end of file
[ignore]
[include]
[libs]
[lints]
[options]
[strict]
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
/*
./client/components/App.jsx
*/
import React from 'react'
import Header from './Header.jsx'
import Main from './Main.jsx'
const App = () => (
<div>
<Header />
<Main />
</div>
)
export default App
import React from 'react'
import { Link } from 'react-router-dom'
// The Header creates links that can be used to navigate
// between routes.
const Header = () => (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/roster'>Roster</Link></li>
<li><Link to='/schedule'>Schedule</Link></li>
</ul>
</nav>
</header>
)
export default Header
import React from 'react'
const Home = () => (
<div>
<h1>Welcome to the Tornadoes Website!</h1>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
</ul>
</div>
)
export default Home
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home.jsx'
// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
</Switch>
</main>
)
export default Main
import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = () => {
return (
<nav className="navbar" role="navigation" aria-label="dropdown navigation">
<div className="navbar-brand">
<div className="navbar-item has-text-info">
<span className="icon">
<i className="fa fa-edit fa-3x"></i>
</span>
</div>
<div className="navbar-item has-text-info">
<b>Zesje</b>
</div>
</div>
<div className="navbar-menu">
<div className="navbar-start">
<Link className="navbar-item" to='/'>Home</Link>
<Link className="navbar-item" to='/grade'>grade</Link>
<Link className="navbar-item" to='/upload'>upload</Link>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">
People
</a>
<div className="navbar-dropdown">
<Link className="navbar-item" to='/addstudents'>Add students</Link>
<Link className="navbar-item" to='/checkstudents'>Check students</Link>
<hr className="navbar-divider" />
<Link className="navbar-item" to='/addgraders'>Add graders</Link>
</div>
</div>
</div>
<div className="navbar-end">
<Link className="navbar-item has-text-info" to='/reset'>reset</Link>
<div className="navbar-item">
<i>Version 0.6.4</i>
</div>
</div>
</div>
</nav>
)
}
export default NavBar;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zesje™</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
/*
./client/index.js
which is the webpack entry file
*/
// @flow
import 'bulma/css/bulma.css';
import 'font-awesome/css/font-awesome.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Loadable from 'react-loadable';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
const Loading = () => <div>Loading...</div>;
const Home = Loadable({
loader: () => import('./views/Home'),
loading: Loading,
});
const Grade = Loadable({
loader: () => import('./views/Grade'),
loading: Loading,
});
const Upload = Loadable({
loader: () => import('./views/Upload'),
loading: Loading,
});
const AddStudents = Loadable({
loader: () => import('./views/AddStudents'),
loading: Loading,
});
const CheckStudents = Loadable({
loader: () => import('./views/CheckStudents'),
loading: Loading,
});
const AddGraders = Loadable({
loader: () => import('./views/AddGraders'),
loading: Loading,
});
const Reset = Loadable({
loader: () => import('./views/Reset'),
loading: Loading,
});
ReactDOM.render((
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/grade" component={Grade} />
<Route path="/upload" component={Upload} />
<Route path="/addstudents" component={AddStudents} />
<Route path="/checkstudents" component={CheckStudents} />
<Route path="/addgraders" component={AddGraders} />
<Route path="/reset" component={Reset} />
</Switch>
</Router>
), document.getElementById('root'));
import React from 'react';
import NavBar from '../components/NavBar';
const AddGraders = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de AddGraders
</div>
)
}
export default AddGraders;
import React from 'react';
import NavBar from '../components/NavBar';
const AddStudents = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de AddStudents
</div>
)
}
export default AddStudents;
\ No newline at end of file
import React from 'react';
import NavBar from '../components/NavBar';
const CheckStudents = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de CheckStudents
</div>
)
}
export default CheckStudents;
\ No newline at end of file
import React from 'react';
import NavBar from '../components/NavBar';
const Grade = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de Grade
</div>
)
}
export default Grade;
\ No newline at end of file
import React from 'react';
import NavBar from '../components/NavBar';
const Home = () => {
return (
<div>
<NavBar />
<section className="hero is-primary">
<div className="hero-body">
<p className="title">
Documentation
</p>
<p className="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
<h1>React Router demo</h1>
Hoi dit de homepagina
</div>
)
}
export default Home;
import React from 'react';
import NavBar from '../components/NavBar';
const Reset = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de Reset
</div>
)
}
export default Reset;
\ No newline at end of file
import React from 'react';
import NavBar from '../components/NavBar';
const Upload = () => {
return (
<div>
<NavBar />
<h1>React Router demo</h1>
Hoi dit de Upload
</div>
)
}
export default Upload;
\ No newline at end of file
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div className="title">
<h1>React Router demo</h1>
Hoi, hier vertel ik wat over mijzelf
</div>
)
}
export default Home;
webpackJsonp([0],{
/***/ 76:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_router_dom__ = __webpack_require__(34);
const Home = () => {
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'title' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'h1',
null,
'React Router demo'
),
'Hoi dit de homepagina',
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'ul',
null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["b" /* Link */],
{ to: '/' },
'Home'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
null,
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["b" /* Link */],
{ to: '/about' },
'About'
)
)
)
);
};
/* harmony default export */ __webpack_exports__["default"] = (Home);
/***/ })
});
\ No newline at end of file
webpackJsonp([1],{
/***/ 77:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react_router_dom__ = __webpack_require__(34);
const Home = () => {
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'title' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'h1',
null,
'React Router demo'
),
'Hoi, hier vertel ik wat over mijzelf'
);
};
/* harmony default export */ __webpack_exports__["default"] = (Home);
/***/ })
});
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App Setup</title>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript" src="index_bundle.js"></script></body>
</html>
This diff is collapsed.
{
"name": "negenje",
"version": "0.0.1",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bulma": "^0.6.2",
"css-loader": "^0.28.8",
"file-loader": "^1.1.6",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.30.1",
"path": "^0.12.7",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-loadable": "^5.3.1",
"react-router-dom": "^4.2.2",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"flow-bin": "^0.63.1",
"webpack-dev-server": "^2.10.1"
}
}
/*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './client/index.js',
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{ test: /\.(jsx|js)$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }] },
{ test: /\.(png|jpg|gif)$/, loader: "file-loader" },
{ test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, loader: "file-loader" },
]
},
plugins: [HtmlWebpackPluginConfig]
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment