Skip to content

Commit 626025d

Browse files
mhegazymhegazy
committed
Merge pull request microsoft#37 from Microsoft/jsxSample
Add jsx/react sample
2 parents 120a409 + 47962d5 commit 626025d

9 files changed

Lines changed: 147 additions & 0 deletions

File tree

‎jsx/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
bin/*
2+
node_modules/*

‎jsx/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# jsx-demo
2+
3+
## Overview
4+
A demo project for showing off JSX in TypeScript
5+
6+
## Install dependencies
7+
```
8+
npm install
9+
```
10+
11+
## Compile
12+
```
13+
node node_modules/typescript/bin/tsc
14+
```
15+
16+
## Start http server
17+
```
18+
node node_modules/http-server/bin/http-server -o
19+
```
20+

‎jsx/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>JSX and TypeScript</title>
5+
<script src="node_modules/requirejs/require.js" data-main="bin/app"></script>
6+
<script src="require-config.js"></script>
7+
</head>
8+
<body>
9+
<div id="output"></div>
10+
</body>
11+
</html>

‎jsx/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "jsx-demo",
3+
"version": "0.0.1",
4+
"description": "JSX in TypeScript Demo Project",
5+
"main": "app.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"postinstall": "node_modules/.bin/tsd update",
9+
"build": "node node_modules/typescript/bin/tsc",
10+
"run": "node node_modules/http-server/bin/http-server -o"
11+
},
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/Microsoft/TypeScriptSamples.git"
15+
},
16+
"keywords": [
17+
"jsx",
18+
"tsx",
19+
"typescript",
20+
"ts",
21+
"react"
22+
],
23+
"author": "Ryan Cavanaugh (Microsoft)",
24+
"license": "Apache",
25+
"bugs": {
26+
"url": "https://github.com/Microsoft/TypeScriptSamples/issues"
27+
},
28+
"homepage": "https://github.com/Microsoft/TypeScriptSamples",
29+
"devDependencies": {
30+
"typescript": "latest",
31+
"http-server": "0.8.0",
32+
"tsd": "latest"
33+
},
34+
"dependencies": {
35+
"jquery": "^2.1.4",
36+
"react": "^0.13.3",
37+
"requirejs": "^2.1.20"
38+
}
39+
}

‎jsx/require-config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
requirejs.config({
2+
paths: {
3+
react: ['/node_modules/react/dist/react'],
4+
jquery: ['/node_modules/jquery/dist/jquery']
5+
}
6+
});

‎jsx/src/app.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import * as $ from 'jquery';
3+
import {Greeter as Greetifier, GreeterProps as GreeterProps} from 'greeter';
4+
5+
function getRandomGreeting() {
6+
switch (Math.floor(Math.random() * 4)) {
7+
case 0: return 'Hello';
8+
case 1: return 'Howdy';
9+
case 2: return 'Greetings to you';
10+
case 3: return 'Hail';
11+
}
12+
}
13+
14+
$(() => {
15+
let props: GreeterProps = {
16+
whomToGreet: 'world!',
17+
};
18+
19+
React.render(<Greetifier {...props} />, $('#output').get(0));
20+
});
21+

‎jsx/src/greeter.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
3+
export interface GreeterProps extends React.Props<Greeter> {
4+
whomToGreet: string;
5+
greeting?: string | (() => string);
6+
}
7+
8+
export class Greeter extends React.Component<GreeterProps, {}> {
9+
render() {
10+
let g = this.props.greeting;
11+
12+
let greeting = 'Hello';
13+
14+
if (typeof g === 'string') {
15+
greeting = g;
16+
}
17+
else if (g) {
18+
greeting = g();
19+
}
20+
21+
return <div>{greeting}, {this.props.whomToGreet}</div>;
22+
}
23+
}

‎jsx/tsconfig.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "react",
4+
"outDir": "bin",
5+
"module": "amd"
6+
},
7+
"exclude": [
8+
"node_modules"
9+
]
10+
}

‎jsx/tsd.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"version": "v4",
3+
"repo": "borisyankov/DefinitelyTyped",
4+
"ref": "master",
5+
"path": "typings",
6+
"bundle": "typings/tsd.d.ts",
7+
"installed": {
8+
"react/react.d.ts": {
9+
"commit": "04a025ada3492a22df24ca2d8521c911697721b3"
10+
},
11+
"jquery/jquery.d.ts": {
12+
"commit": "04a025ada3492a22df24ca2d8521c911697721b3"
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)