获取简单的 Web 项目 运行 Fabric React

Getting simple web project running with Fabric React

----更新----

使用以下方法让它工作：

一旦我有了一个简单的反应示例 运行，就可以很容易地为 fabric-react 做同样的事情。

一些不错的教程：

----原版post----

作为 React / node 的新手，我想在 Visual Studio 2017 中使用 Fabric React 创建一个测试应用程序（Fabric，因为我想采用 Office 外观和感觉）。 到目前为止，我已经花了无数个小时来弄清楚如何让它工作，并遇到一个又一个问题（例如创建 package.json、安装 Gulp 等） 有很多关于这个主题的教程，但它们似乎都有点分散，或者只是在其中一个依赖项上。

开始于：

到目前为止，我使用了以下文档：

可能还有一些我忘记了..

完成的步骤：

  1. 已安装 Node (v6.11.2)
  2. 创建了名为 Test2 的 Web 项目
  3. 使用 Nuget 包安装程序将 npm (v3.10.10) 添加到我的项目
  4. 创建了 package.json 文件。不确定了，在 100 次测试之后，如果我使用 npm init 手动执行此操作，或者这是通过在我的项目中安装 npm 自动完成的，无论如何它在我的项目中：

  1. 已安装 gulp（使用此 link ），简短摘要，我使用 Bundler & Minifier 扩展将我的 bundleconfig.json 文件转换为 Gulp .
  2. 测试是否 Gulp 运行（并更新 package.json）使用 Task runner explorer（有效）：
  3. 安装了 office-ui-fabric-react，如此处解释（https://dev.office.com/fabric#react），还安装了 react 和 react-dom，如此处解释（http: //数据库.com/sharepoint-app-fabric-ui-react-part-1-3/)
  4. 向我的 site.js 文件添加了一堆代码（在我的 MVC 视图中被 link 编辑）- 添加了此处列出的命令栏 react-fabric 代码：http://dev.office.com/fabric#Variants

这是我卡住的部分。首先，我不确定是否应该将这样的组件添加到我的视图中，因为我通常不熟悉 React。其次，它不起作用并给我以下错误：

site.js:5 Uncaught SyntaxError: Unexpected token import

谁知道哪一步出错了？一些补充信息： Package.json 包含： 

{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-uglify": "^3.0.0",
    "merge-stream": "^1.0.1"
  },
  "dependencies": {
    "office-ui-fabric-react": "^4.34.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

site.js 包含：

import * as React from 'react';
import { assign } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';

export class CommandBarBasicExample extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            isSearchBoxVisible: true,
            areNamesVisible: true,
            areIconsVisible: true
        };
    }

    public render() {
        let { items, overflowItems, farItems } = this.props;
        let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state;

        let filteredItems = items.map((item: any) => assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }));

        let filteredOverflowItems = overflowItems.map((item: any) => assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }));

        let filteredFarItems = farItems.map((item: any) => assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }));

        return (
            <div>
                <Toggle
                    label='Show search box'
                    checked={searchBoxVisible}
                    onChanged={isSearchBoxVisible => this.setState({ isSearchBoxVisible })}
                    onText='Visible'
                    offText='Hidden'
                />
                <Toggle
                    label='Show names'
                    checked={namesVisible}
                    onChanged={areNamesVisible => this.setState({ areNamesVisible })}
                    onText='Visible'
                    offText='Hidden' />
                <Toggle
                    label='Show icons'
                    checked={iconsVisible}
                    onChanged={areIconsVisible => this.setState({ areIconsVisible })}
                    onText='Visible'
                    offText='Hidden' />
                <CommandBar
                    isSearchBoxVisible={searchBoxVisible}
                    searchPlaceholderText='Search...'
                    elipisisAriaLabel='More options'
                    items={filteredItems}
                    overflowItems={filteredOverflowItems}
                    farItems={filteredFarItems}
                />
            </div>
        );
    }
}

我的项目概览：

您尝试 运行 的示例在 TypeScript 中给出，但您似乎 运行 将其作为节点 (JavaScript) 应用程序.

Typescript 应该全局安装 (npm install typescript -g)。然后，您可以通过键入 tsc site.tsx 从命令行编译 .ts 或 .tsx。请注意，对于包含 JSX 模板的文件，文件类型应为 tsx，对于包含常规 TypeScript 的文件，文件类型应为 .ts。

我对您的建议是遵循 this excellent example 如何使用 Webpack 使用 TypeScript 创建新的 React 应用程序。熟悉 Gulp 作为 task-运行ner 是件好事，但 Gulp 绝不是 React 开发所必需的。

完成示例并 运行ning 后，您可以包含 office-ui-fabric-react 并使用这些组件创建应用程序。