TheFreezeTeam Reacts to TypeScript
So let's write a simple hello world app. Using Typescript 1.8 and React in Visual Studio 2015 Update 2. .Net 4.5.2 (MVC 5).
Make sure you have installed TypeScript 1.8.4 in Visual studio.
Create Hello World Project
Create new project and select ASP.NET Web Application. Choose a folder and name it HelloWorld, Of course :)
Then choose MVC
Build and execute the application to confirm it works.
####Add Controller
Under controllers create new class named HelloWorldController
namespace HelloWorld.Controllers
{
using System.Web.Mvc;
public class HelloWorldController : Controller
{
// GET: HelloWorld
public ActionResult Index()
{
return View();
}
}
}
In the controller code rick click on View and select Add View
Modify View as follows:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="content">
Content here!
</div>
</body>
</html>
Excute and verify
Install React.Web.Mvc4 Nuget
install-package React.Web.Mvc4
Add Tutorial.jsx file
Right click on Scripts folder and select Add->Javascript File
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
Update Index.cshtml
Update the HTML to include the React scripts and our Tutorial.jsx as follows:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="content"></div>
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
</body>
</html>
Build and execute the application.
Congratulations you now have a React component.
Convert the JavaScript to TypeScript
Rename Tutorial.jsx to Tutorial.tsx
The dialog will appear.
Select no.
Build the project and you should now see the following errors:
First, let's address the "Cannot use JSX unless the '--jsx' flag is provided" error:
Go to the Properties on your project and select the TypeScript Build
tab and for the JSX compilation in TSX Files
and select React
Now build and confirm that error is no longer.
Add the DefinitelyTyped React libraries
Create the typings and react folders under scripts: Scripts/typings/react
The react DefinitelyTyped should be available from Nuget but Nuget did not have all the packages that we needed or were out of date.
We therefore, went directly to DefinitelyTyped git hub page and downloaded the latest repo.
This repo contains a ton of stuff that you do not need for this blog. Extract the repo.
Right click on the Scripts/typings/react
folder and select Add Existing Item
Browse to the extracted react
folder
select the following as shown in the image then Add.
I am not sure why the 0.13.3 files are in the master but if you do not remove these you will get duplicate type errors. Readme.md can be included if you desire.
Update index.cshtml by changing Tutorial.jsx
to Tutorial.js
Build and Execute.
Now you have a TypeScript file with a react component.
Refactor to utilize TypeScript abilities.
First we will utilize the class feature of TypeScript. Update the Tutorial.tsx as follows:
class CommentBox extends React.Component<{}, {}> {
render() {
return (<div className="commentBox">
Hello, world!I am a CommentBox.
</div>);
}
}
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
Now add properties
class CommentBox extends React.Component<{aName: string}, {}> {
render() {
return (<div className="commentBox">
Hello, world! {this.props.aName}
</div>);
}
}
ReactDOM.render(
<CommentBox aName="TheFreezeTeam"/>,
document.getElementById('content')
);
Thanks for the help from:
http://reactjs.net/getting-started/tutorial.html http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/ http://blog.wolksoftware.com/working-with-react-and-typescript