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/
|
||||
typings/
|
||||
public/js/bundle.js
|
||||
static/bundle.js
|
||||
17
README.md
17
README.md
|
|
@ -1,22 +1,9 @@
|
|||
# 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
|
||||
* `npm install -g tsd`
|
||||
* `npm install`
|
||||
* `tsd install`
|
||||
|
||||
Build:
|
||||
|
||||
* `npm run build`
|
||||
|
||||
To view the app:
|
||||
|
||||
* `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",
|
||||
"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": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mweststrate/mobservable-react-typescript.git"
|
||||
"url": "https://github.com/mobxjs/mobx-react-typescript-boilerplate.git"
|
||||
},
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"mobservable": "^1.1.4",
|
||||
"mobservable-react": "^2.1.0",
|
||||
"mobservable-react-devtools": "^2.0.4",
|
||||
"react": "^0.14",
|
||||
"react-dom": "^0.14"
|
||||
"keywords": [
|
||||
"react",
|
||||
"reactjs",
|
||||
"boilerplate",
|
||||
"mobx",
|
||||
"starter-kit"
|
||||
],
|
||||
"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": {
|
||||
"browserify": "^11.1.0",
|
||||
"http-server": "^0.8.5",
|
||||
"tsify": "^0.13.1",
|
||||
"typescript": "^1.6.2"
|
||||
"react-hot-loader": "^1.2.7",
|
||||
"ts-loader": "^0.8.1",
|
||||
"typescript": "^1.8.2",
|
||||
"webpack": "^1.9.6",
|
||||
"webpack-dev-server": "^1.8.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "browserify src/index.tsx -p tsify -o public/js/bundle.js",
|
||||
"start": "cd public && http-server -o index.html"
|
||||
},
|
||||
"author": "Michel Weststrate",
|
||||
"license": "MIT"
|
||||
"dependencies": {
|
||||
"mobx": "^2.0.0",
|
||||
"mobx-react": "^3.0.0",
|
||||
"mobx-react-devtools": "^4.0.0",
|
||||
"react": "^0.14.0",
|
||||
"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');
|
||||
import ReactDOM = require('react-dom');
|
||||
import {observable} from 'mobservable';
|
||||
import {observer} from 'mobservable-react';
|
||||
declare var require;
|
||||
const DevTools = require('mobx-react-devtools').default; // Use import see #6, add typings
|
||||
|
||||
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
|
||||
class Timer extends React.Component<{}, {}> {
|
||||
render() {
|
||||
return (
|
||||
<span>Seconds passed: {timerState.secondsPassed}</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
class TimerView extends React.Component<{appState: AppState}, {}> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.onReset}>
|
||||
Seconds passed: {this.props.appState.timer}
|
||||
</button>
|
||||
<DevTools />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function render() {
|
||||
ReactDOM.render(
|
||||
<Demo name="World" />,
|
||||
document.getElementById('app')
|
||||
);
|
||||
}
|
||||
onReset = () => {
|
||||
this.props.appState.resetTimer();
|
||||
}
|
||||
};
|
||||
|
||||
render();
|
||||
const appState = new AppState();
|
||||
ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));
|
||||
|
|
@ -10,7 +10,8 @@
|
|||
"jsx": "react",
|
||||
"outDir": "dist"
|
||||
},
|
||||
"files": [
|
||||
"src/index.tsx"
|
||||
"exclude": [
|
||||
"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