{"id":7159,"date":"2019-06-09T20:35:10","date_gmt":"2019-06-09T20:35:10","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7159"},"modified":"2019-06-09T20:35:10","modified_gmt":"2019-06-09T20:35:10","slug":"creating-react-components-in-typescript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/creating-react-components-in-typescript\/","title":{"rendered":"Creating React components in TypeScript"},"content":{"rendered":"

By default we’ll usually create a React component (in a .tsx file) using a React.Component base class, for example<\/p>\n

\r\nexport default class GridSampleComponent extends Component<{}, {}> {\r\n   render() {\r\n      return (\r\n         <div><\/div>\r\n      );\r\n   }\r\n}\r\n<\/pre>\n
But as per my post here<\/a> we can also create components through functions, which ofcourse makes sense when you see a .jsx file which tend to default to using functions.<\/p>\n
Hence we can create the following<\/p>\n
\r\nconst MyButton = (props: any) => {\r\n   return \r\n      <Button variant="contained" \r\n         color="secondary">{props.children}<\/Button>;\r\n};\r\n<\/pre>\n
In the code above we’ve basically created a new component from the function which takes properties which are implicitly passed to the function via React, i.e. the code for using the above might look like this<\/p>\n
\r\n<MyButton>Hello<\/MyButton>\r\n<\/pre>\n
The child elements are passed through to our function. In this case it’s just the string “Hello”.<\/p>\n","protected":false},"excerpt":{"rendered":"
By default we’ll usually create a React component (in a .tsx file) using a React.Component base class, for example export default class GridSampleComponent extends Component<{}, {}> { render() { return ( <div><\/div> ); } } But as per my post here we can also create components through functions, which ofcourse makes sense when you see […]<\/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-7159","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\/7159","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=7159"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7159\/revisions"}],"predecessor-version":[{"id":7161,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7159\/revisions\/7161"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}