Skip to content

Commit 0125c32

Browse files
quantuminformationquantuminformation
committed
minimal react - ts example
1 parent 3b26d41 commit 0125c32

File tree

7 files changed

+128
-3
lines changed

7 files changed

+128
-3
lines changed

‎examples/Hello.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from "react";
2+
3+
export interface HelloProps { compiler: string; framework: string; }
4+
5+
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

‎examples/HelloClassic.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from "react";
2+
3+
export interface HelloProps { compiler: string; framework: string; }
4+
5+
// 'HelloProps' describes the shape of props.
6+
// State is never set so we use the 'undefined' type.
7+
export class Hello extends React.Component<HelloProps, undefined> {
8+
render() {
9+
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
10+
}
11+
}

‎examples/setup.sh‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env bash
2+
npm install -g webpack
3+
npm install --save react react-dom @types/react @types/react-dom
4+
npm install --save-dev typescript awesome-typescript-loader source-map-loader

‎examples/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "./dist/",
4+
"sourceMap": true,
5+
"noImplicitAny": true,
6+
"module": "commonjs",
7+
"target": "es5",
8+
"jsx": "react"
9+
},
10+
"include": [
11+
"./src/**/*"
12+
]
13+
}

‎images/basic-react-typescript.png‎

40.3 KB
Loading

‎presentation/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ pre {
77
max-height: 500px;
88
}
99
td{
10-
font-size: 2.2rem !important;
10+
font-size: 2.1rem !important;
1111
}

‎presentation/index.js‎

Lines changed: 94 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ require("./custom.css");
4040

4141
const slideTransition = ["slide"];
4242
const images = mapValues({
43+
basicReactTypescript: require("../images/basic-react-typescript.png"),
4344
logo: require("../images/qi.png"),
4445
usageStats: require("../images/usage.png"),
4546
ts: require("../images/ts.png"),
@@ -210,19 +211,110 @@ export default class Presentation extends React.Component {
210211
</Table>
211212
</Layout>
212213
</Slide>
214+
<Slide transition={slideTransition}>
215+
<Heading caps fit size={1}>
216+
More updates
217+
</Heading>
218+
<Layout>
219+
<Table>
220+
<thead>
221+
<TableRow>
222+
<TableHeaderItem>V1.8</TableHeaderItem>
223+
<TableHeaderItem>V1.8 (cont)</TableHeaderItem>
224+
<TableHeaderItem>V1.7</TableHeaderItem>
225+
</TableRow>
226+
</thead>
227+
<tbody>
228+
<TableRow>
229+
<TableItem>Type parameters as constraints</TableItem>{/*https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#type-parameters-as-constraints*/}
230+
<TableItem>Simplified props type mgt React</TableItem>
231+
<TableItem>async/await -> es6 target</TableItem>
232+
</TableRow>
233+
<TableRow>
234+
<TableItem>Control flow analysis</TableItem>{/*https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#control-flow-analysis-errors*/}
235+
<TableItem>Augmenting module scope</TableItem>
236+
<TableItem>this-typing</TableItem> {/*resolved to correct type, not just base class*/}
237+
</TableRow>
238+
<TableRow>
239+
<TableItem>Stateless Fn Comps React</TableItem>
240+
<TableItem>Local type declarations</TableItem>
241+
<TableItem>ES7 ** operator</TableItem>
242+
</TableRow>
243+
<TableRow>
244+
<TableItem>Augmenting scope from modules {/*https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#augmenting-globalmodule-scope-from-modules*/}
245+
</TableItem>{/*Functions with code paths that do not return a value in JS implicitly return undefined*/}
246+
<TableItem>Class expressions </TableItem>
247+
<TableItem>Improved checking for destructuring</TableItem> {/*https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#improved-checking-for-destructuring-object-literal*/}
248+
</TableRow>
249+
<TableRow>
250+
<TableItem>String literal types</TableItem>
251+
<TableItem>Class expressions </TableItem>
252+
<TableItem>Improved checking for destructuring</TableItem> {/*https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#improved-checking-for-destructuring-object-literal*/}
253+
</TableRow>
254+
<TableRow>
255+
<TableItem>Improved un/int type inference</TableItem>
256+
<TableItem></TableItem>
257+
<TableItem>Decorator support for ES3</TableItem>
258+
</TableRow>
259+
</tbody>
260+
</Table>
261+
</Layout>
262+
</Slide>
213263

214264

215265
<Slide transition={slideTransition}>
216266
<Heading size={4}>
217-
Minimal Demo
267+
Example of typing
218268
</Heading>
269+
<p>I use this in my space invaders game</p>
219270
<CodePane
220271
lang="jsx"
221272
source={require("raw!../examples/somets.ts")}
222273
margin="20px auto"
223274
/>
224275
</Slide>
225276

277+
<Slide transition={slideTransition}>
278+
<Heading size={4}>
279+
Typescript with React
280+
</Heading>
281+
<h3>minimal project setup part 1</h3>
282+
<CodePane
283+
lang="sh"
284+
source={require("raw!../examples/setup.sh")}
285+
margin="20px auto"
286+
/>
287+
</Slide>
288+
<Slide transition={slideTransition}>
289+
<h3>minimal project setup part 2</h3>
290+
<CodePane
291+
lang="json"
292+
source={require("raw!../examples/tsconfig.json")}
293+
margin="20px auto"
294+
/>
295+
</Slide>
296+
<Slide transition={slideTransition}>
297+
<h3>Simple tsx component</h3>
298+
<CodePane
299+
lang="tsx"
300+
source={require("raw!../examples/Hello.tsx")}
301+
margin="20px auto"
302+
/>
303+
or
304+
<CodePane
305+
lang="tsx"
306+
source={require("raw!../examples/HelloClassic.tsx")}
307+
margin="20px auto"
308+
/>
309+
</Slide>
310+
<Slide transition={slideTransition}>
311+
<heading>End result:</heading>
312+
<Image src={images.basicReactTypescript} margin="0px auto 40px" height="524px"/>
313+
</Slide>
314+
315+
316+
317+
226318
<Slide transition={slideTransition}>
227319
<Heading size={4}>
228320
Gotchas
@@ -232,7 +324,7 @@ export default class Presentation extends React.Component {
232324
</Slide>
233325
<Slide transition={slideTransition}>
234326
<Link href="https://www.youtube.com/channel/UC0XiDgtbFR8ohoGlstuFgGQ">
235-
<Heading size={1}>
327+
<Heading size={4}>
236328
Quantum Information
237329
</Heading>
238330
</Link>

0 commit comments

Comments
 (0)