Added mobservable / mobservable-react to the project
This commit is contained in:
parent
c61046f3f2
commit
45001f9aec
4 changed files with 33 additions and 5 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
# React-TypeScript
|
# React-TypeScript
|
||||||
|
|
||||||
Minimal boilerplate for a single-page app using React, TypeScript 1.6 with TSX, and Visual Studio Code.
|
Minimal boilerplate for a single-page app using Mobservable, Mobservable-React, React, TypeScript 1.6 with TSX, and Visual Studio Code.
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
|
|
||||||
|
|
@ -15,3 +15,7 @@ To view the app:
|
||||||
* `npm install -g http-server`
|
* `npm install -g http-server`
|
||||||
* `http-server`
|
* `http-server`
|
||||||
* Open [http://localhost:8080/](http://localhost:8080/) in your browser of choice.
|
* Open [http://localhost:8080/](http://localhost:8080/) in your browser of choice.
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
This repo has been forked from the [React Typescript boilerplate](https://github.com/bvanreeven/react-typescript) repo.
|
||||||
23
app/app.tsx
23
app/app.tsx
|
|
@ -1,6 +1,8 @@
|
||||||
/// <reference path="../typings/react/react.d.ts" />
|
/// <reference path="../typings/react/react.d.ts" />
|
||||||
|
|
||||||
import React = require('react');
|
import React = require('react');
|
||||||
|
import {observable} from 'mobservable';
|
||||||
|
import {observer} from 'mobservable-react';
|
||||||
|
|
||||||
class DemoProps {
|
class DemoProps {
|
||||||
public name: string;
|
public name: string;
|
||||||
|
|
@ -12,11 +14,30 @@ class Demo extends React.Component<DemoProps, any> {
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>Hello {this.props.name}!</div>
|
<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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
React.render(
|
React.render(
|
||||||
<Demo name="World" />,
|
<Demo name="World" />,
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "react-typescript",
|
"name": "mobservable-react-typescript",
|
||||||
"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": "Minimal boilerplate for a single-page app using React, TypeScript with JSX (TSX), and Visual Studio Code.",
|
||||||
"repository": "bvanreeven/react-typescript",
|
"repository": "mweststrate/mobservable-react-typescript",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"mobservable": "^1.0.0",
|
||||||
|
"mobservable-react": "^1.0.1",
|
||||||
"react": "^0.13.3"
|
"react": "^0.13.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"declaration": false,
|
"declaration": false,
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": false,
|
||||||
"removeComments": true,
|
"removeComments": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
"noLib": false,
|
"noLib": false,
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"outDir": "./temp"
|
"outDir": "./temp"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue