您的位置：首页 > Web前端 > React

用TypeScipt和AMD模块化理念实现React官方教程(一)环境搭建

2016-02-21 12:36 633 查看
世事沧桑，回望一开始在csdn上写的blog，既然已经超过14年了，这14年，在其它地方写的东西可能已经没了，而csdn上的依然还在，先赞一个。斗转星移，作为一个已经不在IT行业的程序员，依然执着于这些代码技术。这么多年后Javascript已经从不入流的语言变成了世界上最强大的语言之一，甚至有人说它最好的语言。TypeScript作为Javascript的超集，对于象我这样熟悉Java和C#这些面向对象语言的人来说真是个福音，加上是安德森·海尔斯伯格这个我最崇拜的大牛所推出的语言，更是让我爱之有加。然后，历史再翻开了一页，前端技术 React风声水起，加上React Native等原生技术，忽然觉得不使用React好象对不起前端开发。

前段时间找来了一本书，《react 引领未来的用户界面框架》，真没想到的是这本书会这么烂，再去网上看看别人的评论，果然是烂到家了。如果要学习React，不如直接学习React的官方教程，英文的官方教程在这里 ，同时也有个中文的翻译在这里 但是中文版的已经过时了，所以还是建议大家直接看英文版。

这么说来React的中文资料还真的很缺乏，更不要说是结合TypeScript的React开发了。翻开英文官方教程和官方相关文档，根本就找不到任何与TypeScript相关的内容。教程中首先推荐了browserify 和webpack 这些打包工具。并且毫无悬念的使用Babel作为它的首推合作语言，因为Babel已经天然的支持了JSX。但是，我想还有更多的人喜欢TypeScript，其实TypeScript也支持JSX的（通过创建tsx的typescript的），还有TypeScript支持CommonJS，AMD，UMD等等模块化方式，经过一段时间的琢磨和偿试，终于将React官方教程示例全面的转为TypeScript开发，并且是按单独文件的方式（一个类对应一个文件的方式），这种曾经编写C#的酸爽劲都带到了整个的Javascript的开发中了。在我的这整个教程中并没有用到Webpack和browserify。但是我使用了AMD加载，也就是使用了require.js。

配置VisualStudio 和 TypeScript 以使用React和AMD

好了，废话说多了，让我们正式开始搭建整个开发环境。因为使用TypeScript，所以我使用了Visual Stuio 2015，可以下载当前最新版本的TypeScript安装上。打开VS2015后，我们道先新建一个TypeScript项目，如图：



这里我们无需app.css app.ts这些给我们自动生成的文件。

现在我们点击查看项目属性会得到这样的错误：



这是TypeScript当前版本的一个Bug，并且已经提交，但需要在TypeScript1.8版本才能得到修复。如果你用的是英文版，那么就不会出现这个错误，其界面如下：



这里我们要注意的是两个方面的选项，一个是模块系统，一个是Tsx中Jsx的兼容见性。前者我们选择AMD，后者选择React。如果你不想切换到英文版来选择这两个选项。我们可以直接修改项目文件，找到项目文件（我的是TypeReact.csproj），用记事本打开，找到如下内容：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<TypeScriptRemoveComments>true</TypeScriptRemoveComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
</PropertyGroup>


在PropertyGroup中添加这两句：

<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>


修改后内容如下：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<TypeScriptRemoveComments>true</TypeScriptRemoveComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptJSXEmit>React</TypeScriptJSXEmit>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>


重新加载项目文件即可。

然后根据自己的需要建立相应存放js和css的目录，我是参考html5-boilerplate_v5.3.0的文件夹配置。在项目根目录下建立如下文件夹：

css：放置css文件

js：放置javascript文件

js/vendor 放置其它js库。

img：放置图片。

下载和配置由requir.js提供的AMD加载器

为了能使用AMD模块化设计，我们到http://www.requirejs.org/ 去下载最新版的require.js: http://www.requirejs.org/docs/download.html (当前版本为2.1.22)，把它放到js.vendor文件夹下。现在我人测试一下加载是否成功，以下是index.html文件内容：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title >使用TypeScript进行React开发</title >
<script src="js/vendor/require.js" data-main="js/main"></ script>
</head>
<body>
<div id="content"></ div>
</body>
</html>


注意一下script标签的写法。如果不使用data-main可能会导致错误。

同时我们在js文件夹下创建main.ts或main.tsx文件。内容如下：

document.getElementById("content").innerHTML = "Hello World";


运行它。

不出意外，我们将看到浏览器中看到“Hello World”的字样。

下载和配置React相关文件

下一步我们需要配置React

到React官方网站 http://facebook.github.io/react/ 的下载页：

http://facebook.github.io/react/downloads.html 下载最新版的React库文件。（当前版本：react-0.14.7.zip）

下载后解压，我们发现里面有build和examples两个文件夹。我们需要将build文件夹的内容拷到我们给它准备的文件夹下面（我的示例是在vendor/react下面。)

为了能在IDE中使用智能感知等功能，我们需要下载react的d.ts文件。我们用tsd命令来获得这些文件。进入命令行模式，并cd到当前项目目录，运行tsd install react-global 结果如下：



好了，现在我们可以编写一个简单的React程序了。让我们先修改index.html，添加对React的引用，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title >使用TypeScript进行React开发</title >
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="js/vendor/react/react.js"></ script>
<script src="js/vendor/react/react-dom.js"></ script>
<script src="js/vendor/require.js" data-main="js/main"></ script>
</head>
<body>
<div id="content"></ div>
</body>
</html>


如果原来建的是main.ts 那么改为main.tsx

内容如下：

/// <reference path="../typings/react/react-global.d.ts"/>

interface HelloProps {
name: string;
}

class Hello extends React.Component<HelloProps, any> {
render() {
return <div>Hello {this .props.name}</div>;
}
}
ReactDOM.render(<Hello name="World" />, document.getElementById( 'content'));


运行

不出意外，我们就能在浏览器中看到了Hello World的字样了。

这次先写到这里，下一讲介绍一下为了实现官方教程所需要的服务器配置。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航