Migrated to Webpack, MobX
This commit is contained in:
Michel Weststrate
parent
c1ae765a16
commit
1256b8e27c
13 changed files with 2445 additions and 7203 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,3 +1,2 @@
|
||||||
node_modules/
|
node_modules/
|
||||||
typings/
|
static/bundle.js
|
||||||
public/js/bundle.js
|
|
||||||
17
README.md
17
README.md
|
|
@ -1,22 +1,9 @@
|
||||||
# React-TypeScript
|
# React-TypeScript
|
||||||
|
|
||||||
Minimal boilerplate for a single-page app using Mobservable, Mobservable-React, React, TypeScript 1.6 with TSX, and Visual Studio Code.
|
Minimal boilerplate for a single-page app using MobX, React and TypeScript with TSX.
|
||||||
|
|
||||||
Initial install:
|
Initial run:
|
||||||
|
|
||||||
* Install Node.js
|
* Install Node.js
|
||||||
* `npm install -g tsd`
|
|
||||||
* `npm install`
|
* `npm install`
|
||||||
* `tsd install`
|
|
||||||
|
|
||||||
Build:
|
|
||||||
|
|
||||||
* `npm run build`
|
|
||||||
|
|
||||||
To view the app:
|
|
||||||
|
|
||||||
* `npm start`
|
* `npm start`
|
||||||
|
|
||||||
## Credits
|
|
||||||
|
|
||||||
This repo has been forked from the [React Typescript boilerplate](https://github.com/bvanreeven/react-typescript) repo.
|
|
||||||
9
index.html
Normal file
9
index.html
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>MobX Boilerplate</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script src="/static/bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
package.json
50
package.json
|
|
@ -1,29 +1,39 @@
|
||||||
{
|
{
|
||||||
"name": "mobservable-react-typescript",
|
"name": "mobx-react-typescript-boilerplate",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Minimal boilerplate for a single-page app using React, TypeScript with JSX (TSX), and Visual Studio Code.",
|
"description": "Boilerplate for MobX + React project with Typescript, ES6 compilation and hot code reloading",
|
||||||
|
"scripts": {
|
||||||
|
"start": "node server.js"
|
||||||
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/mweststrate/mobservable-react-typescript.git"
|
"url": "https://github.com/mobxjs/mobx-react-typescript-boilerplate.git"
|
||||||
},
|
},
|
||||||
"main": "index.js",
|
"keywords": [
|
||||||
"dependencies": {
|
"react",
|
||||||
"mobservable": "^1.1.4",
|
"reactjs",
|
||||||
"mobservable-react": "^2.1.0",
|
"boilerplate",
|
||||||
"mobservable-react-devtools": "^2.0.4",
|
"mobx",
|
||||||
"react": "^0.14",
|
"starter-kit"
|
||||||
"react-dom": "^0.14"
|
],
|
||||||
|
"author": "Michel Weststrate <mweststrate@gmail.com> (http://github.com/mweststrate)",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/mobxjs/mobx/issues"
|
||||||
},
|
},
|
||||||
|
"homepage": "http://mobxjs.github.com/mobx",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browserify": "^11.1.0",
|
"react-hot-loader": "^1.2.7",
|
||||||
"http-server": "^0.8.5",
|
"ts-loader": "^0.8.1",
|
||||||
"tsify": "^0.13.1",
|
"typescript": "^1.8.2",
|
||||||
"typescript": "^1.6.2"
|
"webpack": "^1.9.6",
|
||||||
|
"webpack-dev-server": "^1.8.2"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"dependencies": {
|
||||||
"build": "browserify src/index.tsx -p tsify -o public/js/bundle.js",
|
"mobx": "^2.0.0",
|
||||||
"start": "cd public && http-server -o index.html"
|
"mobx-react": "^3.0.0",
|
||||||
},
|
"mobx-react-devtools": "^4.0.0",
|
||||||
"author": "Michel Weststrate",
|
"react": "^0.14.0",
|
||||||
"license": "MIT"
|
"react-dom": "^0.14.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
7086
public/css/bootstrap.css
vendored
7086
public/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1,19 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Mobservable-React-Typescript boilerplate project</title>
|
|
||||||
<link rel="stylesheet" href="css/bootstrap.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>Mobservable-React-Typescript boilerplate project</h1>
|
|
||||||
<div id="app"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/bundle.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
15
server.js
Normal file
15
server.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var WebpackDevServer = require('webpack-dev-server');
|
||||||
|
var config = require('./webpack.config');
|
||||||
|
|
||||||
|
new WebpackDevServer(webpack(config), {
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
hot: true,
|
||||||
|
historyApiFallback: true
|
||||||
|
}).listen(3000, 'localhost', function (err, result) {
|
||||||
|
if (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Listening at localhost:3000');
|
||||||
|
});
|
||||||
|
|
@ -1,51 +1,42 @@
|
||||||
/// <reference path="../typings/tsd.d.ts" />
|
import * as React from 'react';
|
||||||
|
import * as ReactDOM from 'react-dom';
|
||||||
|
import {observable} from 'mobx';
|
||||||
|
import {observer} from 'mobx-react';
|
||||||
|
|
||||||
import React = require('react');
|
declare var require;
|
||||||
import ReactDOM = require('react-dom');
|
const DevTools = require('mobx-react-devtools').default; // Use import see #6, add typings
|
||||||
import {observable} from 'mobservable';
|
|
||||||
import {observer} from 'mobservable-react';
|
|
||||||
|
|
||||||
import "mobservable-react-devtools";
|
class AppState {
|
||||||
|
@observable timer = 0;
|
||||||
class DemoProps {
|
|
||||||
public name: string;
|
constructor() {
|
||||||
|
setInterval(() => {
|
||||||
|
appState.timer += 1;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTimer() {
|
||||||
|
this.timer = 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Demo extends React.Component<DemoProps, any> {
|
|
||||||
constructor(props: DemoProps) {
|
|
||||||
super(props);
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>Hello {this.props.name}!</div>
|
|
||||||
<Timer/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var timerState = observable({
|
|
||||||
secondsPassed: 0
|
|
||||||
});
|
|
||||||
|
|
||||||
setInterval(() => timerState.secondsPassed++, 1000);
|
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
class Timer extends React.Component<{}, {}> {
|
class TimerView extends React.Component<{appState: AppState}, {}> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<span>Seconds passed: {timerState.secondsPassed}</span>
|
<div>
|
||||||
)
|
<button onClick={this.onReset}>
|
||||||
}
|
Seconds passed: {this.props.appState.timer}
|
||||||
}
|
</button>
|
||||||
|
<DevTools />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function render() {
|
onReset = () => {
|
||||||
ReactDOM.render(
|
this.props.appState.resetTimer();
|
||||||
<Demo name="World" />,
|
}
|
||||||
document.getElementById('app')
|
};
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render();
|
const appState = new AppState();
|
||||||
|
ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));
|
||||||
|
|
@ -10,7 +10,8 @@
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"outDir": "dist"
|
"outDir": "dist"
|
||||||
},
|
},
|
||||||
"files": [
|
"exclude": [
|
||||||
"src/index.tsx"
|
"node_modules",
|
||||||
|
"static"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
15
tsd.json
15
tsd.json
|
|
@ -1,15 +0,0 @@
|
||||||
{
|
|
||||||
"version": "v4",
|
|
||||||
"repo": "borisyankov/DefinitelyTyped",
|
|
||||||
"ref": "master",
|
|
||||||
"path": "typings",
|
|
||||||
"bundle": "typings/tsd.d.ts",
|
|
||||||
"installed": {
|
|
||||||
"react/react.d.ts": {
|
|
||||||
"commit": "62eedc3121a5e28c50473d2e4a9cefbcb9c3957f"
|
|
||||||
},
|
|
||||||
"react-dom/react-dom.d.ts": {
|
|
||||||
"commit": "62eedc3121a5e28c50473d2e4a9cefbcb9c3957f"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
66
typings/react/react-dom.d.ts
vendored
Normal file
66
typings/react/react-dom.d.ts
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
// Type definitions for React v0.14 (react-dom)
|
||||||
|
// Project: http://facebook.github.io/react/
|
||||||
|
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
|
||||||
|
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||||
|
|
||||||
|
/// <reference path="react.d.ts" />
|
||||||
|
|
||||||
|
declare namespace __React {
|
||||||
|
namespace __DOM {
|
||||||
|
function findDOMNode<E extends Element>(instance: ReactInstance): E;
|
||||||
|
function findDOMNode(instance: ReactInstance): Element;
|
||||||
|
|
||||||
|
function render<P>(
|
||||||
|
element: DOMElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (element: Element) => any): Element;
|
||||||
|
function render<P, S>(
|
||||||
|
element: ClassicElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
|
||||||
|
function render<P, S>(
|
||||||
|
element: ReactElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (component: Component<P, S>) => any): Component<P, S>;
|
||||||
|
|
||||||
|
function unmountComponentAtNode(container: Element): boolean;
|
||||||
|
|
||||||
|
var version: string;
|
||||||
|
|
||||||
|
function unstable_batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
|
||||||
|
function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
|
||||||
|
function unstable_batchedUpdates(callback: () => any): void;
|
||||||
|
|
||||||
|
function unstable_renderSubtreeIntoContainer<P>(
|
||||||
|
parentComponent: Component<any, any>,
|
||||||
|
nextElement: DOMElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (element: Element) => any): Element;
|
||||||
|
function unstable_renderSubtreeIntoContainer<P, S>(
|
||||||
|
parentComponent: Component<any, any>,
|
||||||
|
nextElement: ClassicElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
|
||||||
|
function unstable_renderSubtreeIntoContainer<P, S>(
|
||||||
|
parentComponent: Component<any, any>,
|
||||||
|
nextElement: ReactElement<P>,
|
||||||
|
container: Element,
|
||||||
|
callback?: (component: Component<P, S>) => any): Component<P, S>;
|
||||||
|
}
|
||||||
|
|
||||||
|
namespace __DOMServer {
|
||||||
|
function renderToString(element: ReactElement<any>): string;
|
||||||
|
function renderToStaticMarkup(element: ReactElement<any>): string;
|
||||||
|
var version: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "react-dom" {
|
||||||
|
import DOM = __React.__DOM;
|
||||||
|
export = DOM;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "react-dom/server" {
|
||||||
|
import DOMServer = __React.__DOMServer;
|
||||||
|
export = DOMServer;
|
||||||
|
}
|
||||||
2254
typings/react/react.d.ts
vendored
Normal file
2254
typings/react/react.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
30
webpack.config.js
Normal file
30
webpack.config.js
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
var path = require('path');
|
||||||
|
var webpack = require('webpack');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
devtool: 'eval',
|
||||||
|
entry: [
|
||||||
|
'webpack-dev-server/client?http://localhost:3000',
|
||||||
|
'webpack/hot/only-dev-server',
|
||||||
|
'./src/index'
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, 'dist'),
|
||||||
|
filename: 'bundle.js',
|
||||||
|
publicPath: '/static/'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
new webpack.NoErrorsPlugin()
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
extensions: ['', '.js', '.ts', '.tsx']
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
loaders: [{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
loaders: ['react-hot', 'ts-loader'],
|
||||||
|
include: path.join(__dirname, 'src')
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue