Web_Designer_UK__May_2018

Developer tutorials

Developer tutorials Deploy TypeScript with React Above Moving the body of the Node project to the same level as the webpack ‘config’ file fixes weird problems the source map directly. . . . /***/ }) /******/ ]); //# sourceMappingURL=bundle.js.map 18. Create a component One of TypeScript’s most important features is the use of classes and data types. Creating a new component is done with a structure similar to the one shown below – ‘Props’ and ‘State’ can be declared using the ‘type’ keyword. type Props = { ... }; type State = { ... }; class MyComponent extends React. Component { ... } 19. Do it with interfaces Another way to solve the problem involves the use of interfaces. In this case, the syntax does not change significantly – Microsoft’s favourite example demos it via a set of string parameters passed in via the ‘HelloProps’ object. export interface HelloProps { compiler: string; framework: string; } export class Hello extends React. Component { render() { return Hello from {this.props. compiler} and {this.props.framework}!; } } 20. Deploy the component With that out of the way, the component can be integrated into our main window as if it were a normal React element. import { Hello } from “./components/Hello”; ReactDOM.render( , document.getElementById(“example”) ); 21. Use advanced features Simply introducing TypeScript to your code is not enough. Make sure to read the documentation carefully, as to enable your developers and yourself to use the most advanced features found in the language standard. 22. Try it out online Should you ever feel like testing a bit of TypeScript, keep www.typescriptlang.org/play in mind. It contains a live version of the TypeScript compiler running in your browser. Simply enter code on the left-hand side, and see the JavaScript output on the right. 23. Load some examples The TypeScript playground comes with a set of pre-loaded examples which can be loaded via the combination box on the left-hand side of your screen. In addition to various syntax samples, the product even contains an extremely interesting implementation of a ray tracer. 90_________________________________________________tutorial

Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes