使用 TypeScript 入门 ReactJS – 第一部分。设置 ReactJS 工作区

ManishHPatil

2.43/5 (5投票s)

2017年10月23日

CPOL

9分钟阅读

14252

这是本系列的第一部分，将介绍如何为使用 TypeScript 的 ReactJS 设置开发环境。

这是一个为期三部分的系列，用于设置和开始使用 ReactJS 和 TypeScript。后续部分将介绍如何为代码创建 GitHub 存储库，然后使用相同的 GitHub 存储库来启动新的基于 ReactJS-TypeScript 的开发。

本系列的第一部分将介绍如何为使用 TypeScript 的 ReactJS 设置开发环境。

本系列的后续部分是…

GitHub 存储库 - https://github.com/manish-patil/react-typescript

引言

在处理了 ExtJs、Angular 1.x 等 JavaScript 框架后，我开始探索 Angular 2.0 和 ReactJS 等较新的框架。

根据我的经验，从头开始 ReactJS 比说起来容易，有时比任何事情都更令人沮丧。花了好几天时间试图弄清楚发生了什么……

太多新东西，太多选择，太多决定要做，没有一个是容易的，有新的技术要看，要学，要忘记的东西，有新的工具，有新的语言可供选择，比如 TypeScript 或 Babel 或其他什么。新的代码构建方式——理解转译。这几乎就像一个永无止境的噩梦。但当它开始解开时，一切都变得更加清晰和容易。

但最终，事实证明，设置代码和启动开发过程需要大量的工作。这不像其他框架，我们几乎一启动就可以看到结果。

所以这篇帖子的第一部分只是为了详细介绍我在这次史诗般的旅程中发现的一切。首先，这样我就不会忘记，因为有很多步骤需要记住，其次，如果你想从头开始，设置一个非常简单的开发环境需要很长时间，稍后代码将移至 GitHub，这样我们就可以使用该 GitHub 存储库快速设置新代码。

在本系列的第二部分中，我想分享一个我将为托管此帖子（第一部分）中创建的代码而创建的小型 GitHub 存储库或简称 repo。这将包括如何使用 Git、其命令、创建分支、提交以及最终如何将代码推送到 GitHub 的所有步骤。这是一篇参考文章，用于展示如何使用 Git 和 GitHub，对于开始开发不是必需的。

在第三部分中，我将展示如何使用 GitHub 存储库，将其本地克隆，签出特定分支——以帮助任何人快速在本地设置这个非常基础的代码库（在第一部分中创建）并将其用作大型应用程序的基础。

所以在我继续之前，我想总结一下我开始时的一些问题以及我认为我可以给出的最佳答案。

问：Angular 2.0/4.0 还是 React？
答：React，为什么不呢！！！

问：React 与 TypeScript 还是 Babel？
答：互联网上充斥着使用 Babel 解释的 React 技术博客。但很自然，我选择 TypeScript——有三个原因：

网上关于 React 和 TypeScript 的支持非常少。
这样我就不必为 Angular 2.0+ 学习 TypeScript 了。
我认为使用 TypeScript 支持大型项目会更好。

但只有时间会告诉我们，是 Google 支持的 TypeScript 还是 ECMA 6+ Babel 会获胜。

免责声明：这里有一个非常重要的事情需要注意，事情发展得非常快，我甚至不知道这篇文章在发布时是否仍然有效！我的意思是，网上有一些帖子，写于 2016 年或更早，技术上要么不适合当今的工作环境，要么在没有大量更新的情况下无法正常工作。

好了，废话不多说，让我们开始吧

I - 下载并安装以下工具

Node.js，从 https://node.org.cn/en/
Visual Studio Code，从 https://vscode.js.cn/
Git，从 https://git-scm.cn/

VS Code 不是必需的，可以使用任何其他文本编辑器或 JavaScript IDE，例如 WebStrom 或 Visual Studio。对于我们所有的命令行需求，我们可以使用 Git Bash。我们无论如何都需要 Git Bash 来处理后续部分。

II - 让我们创建一个名为 `react-typescript` 的文件夹。启动 Git Bash 并导航到新创建的文件夹。在 Git Bash 中，输入命令

npm init -–force

此命令将创建一个默认的 Node `package.json` 文件。该文件包含应用程序所需的所有配置信息，例如一般描述和 Node 模块（也称为包或依赖项），这些是应用程序所需的——依赖项可以是应用程序依赖项，也可以是仅开发依赖项。

III – 使用以下命令安装所需的“仅开发”Node 包。这些 Node 包支持开发，不部署到生产环境。

npm install --save-dev typescript webpack ts-loader

IV – 使用命令安装所需的“仅应用程序”Node 包

npm install --save react react-dom

上述命令将创建一个 `node_modules` 文件夹，并将所述 Node 模块本地安装到该文件夹中，即模块在 `react-typecript` 文件夹外部将不可用，我们将很快看到这意味着什么。这还将更新 `package.json` 文件，如下所示，添加 `devDependencies` 和 `dependencies` 节点。

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

V - 现在我们的依赖项已安装，让我们尝试编写一些熟悉的 JavaScript 和 HTML 代码。为此，让我们打开 VS Code 并加载项目。从 Git Bash 或任何终端中的当前位置打开 VS Code 的简写方式是输入命令

code .

在 VS Code 中，`node_modules` 文件夹和 `package.json` 文件将已存在。

现在，让我们在 `react-typescript` 文件夹的根目录下创建应用程序的入口点 `index.html`。向文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="main"></div>    
    <script src="dist/bundle.js"></script>
</body>
</html>

这是一个非常基本的 HTML 文件，包含两个值得注意的元素。

名为 `main` 的 `div`，它将是我们的 ReactJS 应用程序入口点。
一个 `script` 标签，其 `src` 指向尚未创建的文件 `dist/bundle.js`。

VI - 现在让我们创建我们的第一个 ReactJS 组件。在 VS Code 中，在 `react-typescript` 文件夹的根目录下创建一个名为 `src` 的文件夹。在 `src` 文件夹内，创建一个新文件 `index.tsx`。该文件将包含以下代码：

import * as React from "react";
import * as ReactDOM from "react-dom";

class Main extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
    };

    render() {
        return(
            <div><h1>Hello World!!!</h1></div>
        );
    };
}

ReactDOM.render(<Main/>, document.getElementById("main"));

代码不是 JavaScript，而是 TypeScript。TypeScript 代码不适合在浏览器中执行，而是必须在任何浏览器中执行之前被转换/转译为 JavaScript。

在接下来的步骤中，此代码及其所有依赖项将被转译为 JavaScript，生成一个名为 `dist/bundle.js` 的文件，该文件在 `index.html` 文件中引用。

该代码创建了一个名为 `Main` 的 `React.Component`，它将简单地渲染 `Hello World!!!`。`Main` 组件将使用 `ReactDOM` 库加载到我们在第 **V** 步中添加到 `index.html` 文件的名为 `main` 的 `div` 中。

VII - 在 `react-typescript` 文件夹的根目录下创建一个新文件 `tsconfig.json`。此 JSON 文件将保存 TypeScript `compilerOptions`，我们将使用 webpack（一个 JavaScript 模块打包器）根据这些选项来转译我们的代码以进行分发。将以下内容添加到 `tsconfig.json` 文件中：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  }
}

VIII - 在 `tsconfig.json` 的同级目录下创建一个新文件 `webpack.config.js`。

var path = require("path");

module.exports = {
    entry: ["./src/index.tsx"],
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]                
    },
    module: {
        loaders: [{
            test: /\.tsx?$/,
            loader: "ts-loader"
        }]
    }
};

webpack 的入口点是在第 **VI** 步创建的 `src/index.tsx` 文件。

webpack 请求的输出是文件名——`bundle.js`，将在当前根目录下的 `dist` 文件夹中创建。同一个文件 `dist/bundle.js` 在 `index.html` 文件中被引用。

IX - 现在基本代码和配置已设置好，下一步将是要求 webpack 构建代码并创建分发代码。

为此，我们需要执行 webpack。如第 **IV** 步所述，我们将开发依赖项本地安装到当前文件夹。因此，我们无法使用简单的全局命令执行 webpack，例如：

node webpack

但如果我们通过 `node_modules` 文件夹中的 webpack 位置传递给 node，我们可以执行 webpack，如下所示：

node node_modules/webpack/bin/webpack.js

如上图所示，命令 `node node_modules/webpack/bin/webpack.js` 将启动 `webpack`，然后通过 `tsconfig.json` 使用 `ts-loader` 将 `index.tsx`（在 `webpack.config.js` 中指定的入口点）进行转译。

现在执行上述命令来构建代码并不是最理想的方式，但还有另一种方法——在 `package.json` 文件中，找到 “scripts” 节点，并添加一个键值对 “build”: “webpack”。要在 Git Bash 中执行此脚本，请执行以下命令，同样的操作也可以在 VS Code 终端中完成。与之前的命令相比，此命令的优势在于，通过此命令，是 Node 包管理器在已安装的 Node 包中为您定位 webpack，而之前，您是在明确要求 Node 执行某个位置的包。

npm run build

npm run build

无论哪种方式，结果都将是相同的——输出将是一个 JavaScript 文件 `dist/bundle.js`。

X - 找到 `index.html` 并在任何浏览器中打开它。

index.html.1

至此，我们就有了第一个 ReactJS – TypeScript 应用程序。

XI - 上面，我们只有一个组件 `<Main />`。在 ReactJS 应用程序中，主要有一个布局级别的组件，在我们的例子中是 `<Main />`，然后有子组件加载到 `Layout` 组件中。让我们创建并向应用程序添加一个子组件。在 `src` 文件夹中，创建一个名为 `components` 的子文件夹，然后向其中添加一个新文件 `Hello.tsx`。该文件将包含以下代码：

import * as React from "react";

export default class Hello extends React.Component<any, any>{
    constructor(props: any){
        super(props)
    }

    render() {
        return (
            <div style={{backgroundColor: 'Gray'}}>
                <h1>Hello World!!!!</h1>
            </div>
            );
    }
}

与 `Main` 组件不同，`Hello` 组件没有 `React-DOM` 的引用。要在 `Main` 组件中使用 `Hello` 组件，我们在 `Main` 中导入 `Hello` 的引用，并将代码 `<div><h1>Hello World!!!</h1></div>` 替换为 `<Hello />`。更新后的 `index.tsx` 文件将如下所示：

import * as React from "react";
import * as ReactDOM from "react-dom";
import Hello from "./components/Hello";

class Main extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
    };

    render() {
        return(
            <Hello/>
        );
    };
}

ReactDOM.render(<Main/>, document.getElementById("main"));

再次执行 `npm run build` 命令后，`index.html` 如下所示。有趣的是，没有需要进行的配置更改，没有 `script` 标签添加到 `index.html` 文件中，什么都没有。

index.html.2

到目前为止，您一定想——所有这些工作只是为了一个简单的 `HelloWorld` 应用程序？是的，这是使用 Babel 或 TypeScript 进行此类新前端应用程序所需的初始设置。在本系列的下一篇文章中，我将尝试展示如何从您的本地计算机将此代码发布到 GitHub，然后可以使用相同的 repo 来轻松启动新的 ReactJS 应用程序。