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

时间 2019-11-12

标签 typescipt amd 模块化理念实现 react 官方教程环境搭建栏目 React 繁體版

原文原文链接

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

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

这么说来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。html

配置VisualStudio 和 TypeScript 以使用React和AMD

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

这里咱们无需app.css app.ts这些给咱们自动生成的文件。
如今咱们点击查看项目属性会获得这样的错误：
html5

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

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

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

在PropertyGroup中添加这两句：webpack

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

修改后内容以下：git

<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的字样了。此次先写到这里，下一讲介绍一下为了实现官方教程所须要的服务器配置。