Write some code
Let’s write our first TypeScript file using React. First, create a file named Hello.tsx in src/components and write the following:
1 2 3 4 5 6 7 8 9 | import * as React from "react";export interface HelloProps { compiler: string; framework: string; }export class Hello extends React.Component<HelloProps, {}> { render() { return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; }} |
Note that while this example is quite classy, we didn’t need to use a class. Other methods of using React (like stateless functional components) should work just as well.
Next, let’s create an index.tsx in src with the following source:
1 2 3 4 5 6 7 8 9 | import * as React from "react";import * as ReactDOM from "react-dom";import { Hello } from "./components/Hello";ReactDOM.render( <Hello compiler="TypeScript" framework="React" />, document.getElementById("example")); |
We just imported our Hello component into index.tsx. Notice that unlike with "react" or "react-dom", we used a relative path to Hello.tsx - this is important. If we hadn’t, TypeScript would’ve instead tried looking in our node_modules folder.
We’ll also need a page to display our Hello component. Create a file at the root of proj named index.html with the following contents:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div> <!-- Dependencies --> <script src="./node_modules/react/dist/react.js"></script> <script src="./node_modules/react-dom/dist/react-dom.js"></script> <!-- Main --> <script src="./dist/bundle.js"></script> </body></html> |
Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available, and you can read more about that here.
Please login to continue.