React allows us to write JavaScript code in the standard .js files along with TypeScript in the .ts files, but if you’ve created either a TypeScript or JavaScript React app using yarn’s create command, i.e.<\/p>\n
\r\nyarn create react-app my-app\r\n<\/pre>\nyou’ll notice .jsx or .tsx files. These are similar to Razor, ASP\/ASP.NET, JSP and the likes in that they allow us to embed XML (or strictly speaking in our usage XHTML) into source code. <\/p>\n
Let’s look at a React component (I’ll use TypeScript in this example but JavaScript jsx components are much the same), in our App.tsx we might want to include our own tag\/element, for example<\/p>\n
\r\n<HelloMessage name="PutridParrot" \/>\r\n<\/pre>\nYes, we’re always obsessed with the Hello World example and this one’s no different.<\/em><\/p>\n
The above doesn’t really give any context, so here’s the whole of the App.tdx file<\/p>\n
\r\nimport React, { Component } from 'react';\r\nimport '.\/App.css';\r\nimport HelloMessage from ".\/components\/HelloMessage";\r\n\r\nclass App extends Component {\r\n render() {\r\n return (\r\n <div className="App">\r\n <header className="App-header">\r\n <HelloMessage name="Mark" \/>\r\n <\/header>\r\n <\/div>\r\n );\r\n }\r\n}\r\n\r\nexport default App;\r\n<\/pre>\nNow the HelloMessage<\/em> element is a React component. In this example I’ve created a components<\/em> folder off of the src folder and created the file named HelloMessage.tsx<\/em>, let’s look at the code for this component and then discuss how it works, here’s the code<\/p>\n
\r\nimport React, { Component } from 'react';\r\n\r\nexport interface HelloMessageProps {name: string;}\r\n\r\nclass HelloMessage extends Component<HelloMessageProps, {}> {\r\n render() {\r\n return (\r\n <div>\r\n Hello World {this.props.name}\r\n <\/div>\r\n );\r\n }\r\n }\r\n\r\nexport default HelloMessage;\r\n<\/pre>\nIn this example we’ve imported React, hence need not type React.Component, see Import Declarations<\/a> for more information on this syntax.<\/p>\n
Next up, we’ve created and exported an interface. This acts as the shape<\/strong> of the data that the Component expects to see. As TypeScript supports duck typing, we’re basically saying we expect a thing that looks like HelloMessageProps (i.e. has a name of type string) to be passed into the component. This is our attribute list from the example in App.tsx.<\/p>\n
The HelloMessage class extends\/inherits from Component and we tell it what data shape we expect to be passed into it, but we do not want to pass any state hence we have a second generic parameter of {}. As we’re writing this as a .tsx we’ve embedded the XHTML along with the use of the property name<\/em> passed as an attribute in the App.tsx. The render<\/em> method simply returns the embedded XHTML and that’s it.<\/p>\n
We can write the same thing without using the embedded syntax, like this<\/p>\n
\r\nimport React, { Component } from 'react';\r\n\r\nexport interface HelloMessageProps {name: string;}\r\n\r\nclass HelloMessage extends Component<HelloMessageProps, {}> {\r\n render() {\r\n return React.createElement('div', null, 'Hello World ' + this.props.name);\r\n }\r\n }\r\n\r\nexport default HelloMessage;\r\n<\/pre>\nOr better still we can use string interpolation by using the ` (back tick), i.e. replacing the Hello World string section with<\/p>\n
\r\n`Hello World ${this.props.name}`\r\n<\/pre>\nReferences<\/strong><\/p>\n
TypeScript specification<\/a>
\nReact without JSX<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"React allows us to write JavaScript code in the standard .js files along with TypeScript in the .ts files, but if you’ve created either a TypeScript or JavaScript React app using yarn’s create command, i.e. yarn create react-app my-app you’ll notice .jsx or .tsx files. These are similar to Razor, ASP\/ASP.NET, JSP and the likes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-6996","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=6996"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6996\/revisions"}],"predecessor-version":[{"id":7024,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6996\/revisions\/7024"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=6996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=6996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=6996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}