{"action":"created","comment":{"url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/comments/45552300","id":45552300,"diff_hunk":"@@ -0,0 +1,185 @@\n+---\n+layout: post\n+\n+title: \"Using React JSX with TypeScript\"\n+\n+tags: [React, JSX, TypeScript, tsd, DefinitelyTyped]\n+\n+author:\n+  name: William Fortin\n+  bio: JavaScript Ninja, Cloud\n+  twitter: willyfortin\n+  image: wfortin.jpeg\n+---\n+\n+In the last months, we [experienced with React](http://source.coveo.com/2015/08/21/dreamforce-session-explorer/) and we enjoyed it a lot. As you may know, all Coveo's web applications are built using TypeScript, so with the release of [TypeScript 1.6 announcing support for React JSX](https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-16) syntax, we were stoked!\n+\n+<!-- more -->\n+\n+In this article, i'll introduce you on how to start a new project using TypeScript, JSX and React and show you some tools we use to simplify our development.\n+\n+## Initial setup with npm\n+\n+First we'll setup our project with `npm init`. For this project we need node, typescript, tsd, and react. Let's install them:\n+```\n+npm install typescript -g\n+npm install tsd -g\n+\n+npm install react --save\n+```\n+\n+First, let's make sure we have TypeScript compiler 1.6 or later:\n+```\n+./node_modules/typescript/bin/tsc --version\n+```\n+You should see an output similar to:\n+```\n+message TS6029: Version 1.6.2\n+```\n+\n+## TypeScript definitions with tsd\n+\n+We're almost ready to start coding, but we'll need the React definitions. We already installed [tsd](http://definitelytyped.org/tsd/) which is a package manager to search and install TypeScript definition files directly from the community driven [DefinitelyTyped](https://github.com/DefinitelyTyped) repository. It will allow us to download the latest definitions for React and other libraries. Like we did with npm, we need to initialize a tsd project by running :\n+```\n+tsd init\n+```\n+\n+This will create a `tsd.json` file (similar to a `package.json` but refering to our TypeScript definitions), a `typings/` folder to store the definitions and a `tsd.d.ts` referencing all our downloaded definitions.\n+\n+We can now install the needed definitions:\n+```\n+tsd install react-global --save\n+```\n+This downloads the definitions to our `typings` folder, saves the commit hash to the `tsd.json` and updates the `tsd.d.ts`.\n+\n+Our `tsd.json` should contain something like :\n+\n+{% highlight javascript %}\n+\"installed\": {\n+  \"react/react.d.ts\": {\n+    \"commit\": \"16134c168d021351acb1673ee9659644fc58c424\"\n+  },\n+  {\n+    //....\n+  }\n+{% endhighlight %}\n+\n+\n+And the `tsd.d.ts` should contain:\n+\n+{% highlight javascript %}\n+/// <reference path=\"react/react-dom.d.ts\" />\n+/// <reference path=\"react/react.d.ts\" />\n+/// <reference path=\"react/react-addons-create-fragment.d.ts\" />\n+/// <reference path=\"react/react-addons-css-transition-group.d.ts\" />\n+/// <reference path=\"react/react-addons-linked-state-mixin.d.ts\" />\n+/// <reference path=\"react/react-addons-perf.d.ts\" />\n+/// <reference path=\"react/react-addons-pure-render-mixin.d.ts\" />\n+/// <reference path=\"react/react-addons-test-utils.d.ts\" />\n+/// <reference path=\"react/react-addons-transition-group.d.ts\" />\n+/// <reference path=\"react/react-addons-update.d.ts\" />\n+/// <reference path=\"react/react-global.d.ts\" />\n+{% endhighlight %}\n+\n+## Let's code\n+\n+Create a file named `HelloWorld.tsx`. Notice the `.tsx` extension, this is needed for TypeScript to enable JSX syntax support.\n+\n+{% highlight javascript %}\n+/// <reference path=\"./typings/tsd.d.ts\" />\n+\n+class HelloWorld extends React.Component<any, any> {\n+  render() {\n+    return <div>Hello world!</div>\n+  }\n+}\n+{% endhighlight %}\n+\n+We first reference to our TypeScript definitions that we setup in the previous step. We then `import` React module using the ES6 module import syntax. And we declare our first component using react!","path":"_posts/2015-11-21-using-react-jsx-with-typescript.md","position":null,"original_position":98,"commit_id":"2d16f06abaf06c8f5025a7ba862ce975eed71871","original_commit_id":"a7c74fccd6950c7f254f1003b02403c2b5c6c060","user":{"login":"wfortin","id":2165256,"avatar_url":"https://avatars.githubusercontent.com/u/2165256?v=3","gravatar_id":"","url":"https://api.github.com/users/wfortin","html_url":"https://github.com/wfortin","followers_url":"https://api.github.com/users/wfortin/followers","following_url":"https://api.github.com/users/wfortin/following{/other_user}","gists_url":"https://api.github.com/users/wfortin/gists{/gist_id}","starred_url":"https://api.github.com/users/wfortin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wfortin/subscriptions","organizations_url":"https://api.github.com/users/wfortin/orgs","repos_url":"https://api.github.com/users/wfortin/repos","events_url":"https://api.github.com/users/wfortin/events{/privacy}","received_events_url":"https://api.github.com/users/wfortin/received_events","type":"User","site_admin":false},"body":"Fixed.","created_at":"2015-11-21T23:13:42Z","updated_at":"2015-11-21T23:13:42Z","html_url":"https://github.com/coveo/source.coveo.com/pull/63#discussion_r45552300","pull_request_url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63","_links":{"self":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/comments/45552300"},"html":{"href":"https://github.com/coveo/source.coveo.com/pull/63#discussion_r45552300"},"pull_request":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63"}}},"pull_request":{"url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63","id":51452420,"html_url":"https://github.com/coveo/source.coveo.com/pull/63","diff_url":"https://github.com/coveo/source.coveo.com/pull/63.diff","patch_url":"https://github.com/coveo/source.coveo.com/pull/63.patch","issue_url":"https://api.github.com/repos/coveo/source.coveo.com/issues/63","number":63,"state":"open","locked":false,"title":"New post on JSX React + TypeScript","user":{"login":"wfortin","id":2165256,"avatar_url":"https://avatars.githubusercontent.com/u/2165256?v=3","gravatar_id":"","url":"https://api.github.com/users/wfortin","html_url":"https://github.com/wfortin","followers_url":"https://api.github.com/users/wfortin/followers","following_url":"https://api.github.com/users/wfortin/following{/other_user}","gists_url":"https://api.github.com/users/wfortin/gists{/gist_id}","starred_url":"https://api.github.com/users/wfortin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wfortin/subscriptions","organizations_url":"https://api.github.com/users/wfortin/orgs","repos_url":"https://api.github.com/users/wfortin/repos","events_url":"https://api.github.com/users/wfortin/events{/privacy}","received_events_url":"https://api.github.com/users/wfortin/received_events","type":"User","site_admin":false},"body":"Haven't had time to test locally, seems i'm missing some dependencies to run jekyll.\r\n\r\nComments / Typos / Rephrases are welcome!","created_at":"2015-11-21T22:54:50Z","updated_at":"2015-11-21T23:13:42Z","closed_at":null,"merged_at":null,"merge_commit_sha":"1fa5adc34bc1413b45aa4263b631e180596bc346","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63/commits","review_comments_url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63/comments","review_comment_url":"https://api.github.com/repos/coveo/source.coveo.com/pulls/comments{/number}","comments_url":"https://api.github.com/repos/coveo/source.coveo.com/issues/63/comments","statuses_url":"https://api.github.com/repos/coveo/source.coveo.com/statuses/2d16f06abaf06c8f5025a7ba862ce975eed71871","head":{"label":"wfortin:gh-pages","ref":"gh-pages","sha":"2d16f06abaf06c8f5025a7ba862ce975eed71871","user":{"login":"wfortin","id":2165256,"avatar_url":"https://avatars.githubusercontent.com/u/2165256?v=3","gravatar_id":"","url":"https://api.github.com/users/wfortin","html_url":"https://github.com/wfortin","followers_url":"https://api.github.com/users/wfortin/followers","following_url":"https://api.github.com/users/wfortin/following{/other_user}","gists_url":"https://api.github.com/users/wfortin/gists{/gist_id}","starred_url":"https://api.github.com/users/wfortin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wfortin/subscriptions","organizations_url":"https://api.github.com/users/wfortin/orgs","repos_url":"https://api.github.com/users/wfortin/repos","events_url":"https://api.github.com/users/wfortin/events{/privacy}","received_events_url":"https://api.github.com/users/wfortin/received_events","type":"User","site_admin":false},"repo":{"id":46636667,"name":"source.coveo.com","full_name":"wfortin/source.coveo.com","owner":{"login":"wfortin","id":2165256,"avatar_url":"https://avatars.githubusercontent.com/u/2165256?v=3","gravatar_id":"","url":"https://api.github.com/users/wfortin","html_url":"https://github.com/wfortin","followers_url":"https://api.github.com/users/wfortin/followers","following_url":"https://api.github.com/users/wfortin/following{/other_user}","gists_url":"https://api.github.com/users/wfortin/gists{/gist_id}","starred_url":"https://api.github.com/users/wfortin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wfortin/subscriptions","organizations_url":"https://api.github.com/users/wfortin/orgs","repos_url":"https://api.github.com/users/wfortin/repos","events_url":"https://api.github.com/users/wfortin/events{/privacy}","received_events_url":"https://api.github.com/users/wfortin/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/wfortin/source.coveo.com","description":"Our technical blog.","fork":true,"url":"https://api.github.com/repos/wfortin/source.coveo.com","forks_url":"https://api.github.com/repos/wfortin/source.coveo.com/forks","keys_url":"https://api.github.com/repos/wfortin/source.coveo.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/wfortin/source.coveo.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/wfortin/source.coveo.com/teams","hooks_url":"https://api.github.com/repos/wfortin/source.coveo.com/hooks","issue_events_url":"https://api.github.com/repos/wfortin/source.coveo.com/issues/events{/number}","events_url":"https://api.github.com/repos/wfortin/source.coveo.com/events","assignees_url":"https://api.github.com/repos/wfortin/source.coveo.com/assignees{/user}","branches_url":"https://api.github.com/repos/wfortin/source.coveo.com/branches{/branch}","tags_url":"https://api.github.com/repos/wfortin/source.coveo.com/tags","blobs_url":"https://api.github.com/repos/wfortin/source.coveo.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/wfortin/source.coveo.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/wfortin/source.coveo.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/wfortin/source.coveo.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/wfortin/source.coveo.com/statuses/{sha}","languages_url":"https://api.github.com/repos/wfortin/source.coveo.com/languages","stargazers_url":"https://api.github.com/repos/wfortin/source.coveo.com/stargazers","contributors_url":"https://api.github.com/repos/wfortin/source.coveo.com/contributors","subscribers_url":"https://api.github.com/repos/wfortin/source.coveo.com/subscribers","subscription_url":"https://api.github.com/repos/wfortin/source.coveo.com/subscription","commits_url":"https://api.github.com/repos/wfortin/source.coveo.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/wfortin/source.coveo.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/wfortin/source.coveo.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/wfortin/source.coveo.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/wfortin/source.coveo.com/contents/{+path}","compare_url":"https://api.github.com/repos/wfortin/source.coveo.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/wfortin/source.coveo.com/merges","archive_url":"https://api.github.com/repos/wfortin/source.coveo.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/wfortin/source.coveo.com/downloads","issues_url":"https://api.github.com/repos/wfortin/source.coveo.com/issues{/number}","pulls_url":"https://api.github.com/repos/wfortin/source.coveo.com/pulls{/number}","milestones_url":"https://api.github.com/repos/wfortin/source.coveo.com/milestones{/number}","notifications_url":"https://api.github.com/repos/wfortin/source.coveo.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/wfortin/source.coveo.com/labels{/name}","releases_url":"https://api.github.com/repos/wfortin/source.coveo.com/releases{/id}","created_at":"2015-11-21T22:31:34Z","updated_at":"2015-11-21T22:31:36Z","pushed_at":"2015-11-21T23:12:42Z","git_url":"git://github.com/wfortin/source.coveo.com.git","ssh_url":"git@github.com:wfortin/source.coveo.com.git","clone_url":"https://github.com/wfortin/source.coveo.com.git","svn_url":"https://github.com/wfortin/source.coveo.com","homepage":"source.coveo.com","size":18870,"stargazers_count":0,"watchers_count":0,"language":"CSS","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"gh-pages"}},"base":{"label":"coveo:gh-pages","ref":"gh-pages","sha":"86bf95c83d0eb204980f75a2db2194a00e24ac37","user":{"login":"coveo","id":8632328,"avatar_url":"https://avatars.githubusercontent.com/u/8632328?v=3","gravatar_id":"","url":"https://api.github.com/users/coveo","html_url":"https://github.com/coveo","followers_url":"https://api.github.com/users/coveo/followers","following_url":"https://api.github.com/users/coveo/following{/other_user}","gists_url":"https://api.github.com/users/coveo/gists{/gist_id}","starred_url":"https://api.github.com/users/coveo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/coveo/subscriptions","organizations_url":"https://api.github.com/users/coveo/orgs","repos_url":"https://api.github.com/users/coveo/repos","events_url":"https://api.github.com/users/coveo/events{/privacy}","received_events_url":"https://api.github.com/users/coveo/received_events","type":"Organization","site_admin":false},"repo":{"id":23815317,"name":"source.coveo.com","full_name":"coveo/source.coveo.com","owner":{"login":"coveo","id":8632328,"avatar_url":"https://avatars.githubusercontent.com/u/8632328?v=3","gravatar_id":"","url":"https://api.github.com/users/coveo","html_url":"https://github.com/coveo","followers_url":"https://api.github.com/users/coveo/followers","following_url":"https://api.github.com/users/coveo/following{/other_user}","gists_url":"https://api.github.com/users/coveo/gists{/gist_id}","starred_url":"https://api.github.com/users/coveo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/coveo/subscriptions","organizations_url":"https://api.github.com/users/coveo/orgs","repos_url":"https://api.github.com/users/coveo/repos","events_url":"https://api.github.com/users/coveo/events{/privacy}","received_events_url":"https://api.github.com/users/coveo/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/coveo/source.coveo.com","description":"Our technical blog.","fork":false,"url":"https://api.github.com/repos/coveo/source.coveo.com","forks_url":"https://api.github.com/repos/coveo/source.coveo.com/forks","keys_url":"https://api.github.com/repos/coveo/source.coveo.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/coveo/source.coveo.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/coveo/source.coveo.com/teams","hooks_url":"https://api.github.com/repos/coveo/source.coveo.com/hooks","issue_events_url":"https://api.github.com/repos/coveo/source.coveo.com/issues/events{/number}","events_url":"https://api.github.com/repos/coveo/source.coveo.com/events","assignees_url":"https://api.github.com/repos/coveo/source.coveo.com/assignees{/user}","branches_url":"https://api.github.com/repos/coveo/source.coveo.com/branches{/branch}","tags_url":"https://api.github.com/repos/coveo/source.coveo.com/tags","blobs_url":"https://api.github.com/repos/coveo/source.coveo.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/coveo/source.coveo.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/coveo/source.coveo.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/coveo/source.coveo.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/coveo/source.coveo.com/statuses/{sha}","languages_url":"https://api.github.com/repos/coveo/source.coveo.com/languages","stargazers_url":"https://api.github.com/repos/coveo/source.coveo.com/stargazers","contributors_url":"https://api.github.com/repos/coveo/source.coveo.com/contributors","subscribers_url":"https://api.github.com/repos/coveo/source.coveo.com/subscribers","subscription_url":"https://api.github.com/repos/coveo/source.coveo.com/subscription","commits_url":"https://api.github.com/repos/coveo/source.coveo.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/coveo/source.coveo.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/coveo/source.coveo.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/coveo/source.coveo.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/coveo/source.coveo.com/contents/{+path}","compare_url":"https://api.github.com/repos/coveo/source.coveo.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/coveo/source.coveo.com/merges","archive_url":"https://api.github.com/repos/coveo/source.coveo.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/coveo/source.coveo.com/downloads","issues_url":"https://api.github.com/repos/coveo/source.coveo.com/issues{/number}","pulls_url":"https://api.github.com/repos/coveo/source.coveo.com/pulls{/number}","milestones_url":"https://api.github.com/repos/coveo/source.coveo.com/milestones{/number}","notifications_url":"https://api.github.com/repos/coveo/source.coveo.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/coveo/source.coveo.com/labels{/name}","releases_url":"https://api.github.com/repos/coveo/source.coveo.com/releases{/id}","created_at":"2014-09-09T01:43:19Z","updated_at":"2015-04-27T14:55:22Z","pushed_at":"2015-11-21T23:12:42Z","git_url":"git://github.com/coveo/source.coveo.com.git","ssh_url":"git@github.com:coveo/source.coveo.com.git","clone_url":"https://github.com/coveo/source.coveo.com.git","svn_url":"https://github.com/coveo/source.coveo.com","homepage":"source.coveo.com","size":18868,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":26,"mirror_url":null,"open_issues_count":3,"forks":26,"open_issues":3,"watchers":3,"default_branch":"gh-pages"}},"_links":{"self":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63"},"html":{"href":"https://github.com/coveo/source.coveo.com/pull/63"},"issue":{"href":"https://api.github.com/repos/coveo/source.coveo.com/issues/63"},"comments":{"href":"https://api.github.com/repos/coveo/source.coveo.com/issues/63/comments"},"review_comments":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63/comments"},"review_comment":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/coveo/source.coveo.com/pulls/63/commits"},"statuses":{"href":"https://api.github.com/repos/coveo/source.coveo.com/statuses/2d16f06abaf06c8f5025a7ba862ce975eed71871"}}}}