用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'));