用TypeScipt和AMD模块化理念实现React官方教程(一)环境搭建
世事沧桑,回望一开始在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的字样了。
这次先写到这里,下一讲介绍一下为了实现官方教程所需要的服务器配置。