Question

---- ---- UPDATE

使用以下方法使其工作：

的WebPack
打字稿
TS-装载机
反应
反应-DOM
@类型/反应
@类型/反应-DOM
办公室-UI-织物反应的

一旦我运行了一个简单的反应示例，很容易对织物反应做同样的事情。

一些很好的教程：

----原帖----

作为React / node的新手，我想使用Visual Studio 2017在Fabric React中创建一个测试应用程序（Fabric，因为我想采用Office外观）。到现在为止，我已经花费了无数个小时来确定如何使其工作，并在遇到问题后遇到问题（例如创建package.json，安装Gulp等）关于这个主题有许多教程，但是所有这些教程似乎都有点分散，或者仅仅是其中一个依赖项。

首先：

我想构建一个Web应用程序 - 非常简单/基本，用于测试目的，并且只使用一些Fabric UI组件。
我在Visual Studio 2017中创建此Web项目作为ASP.NET核心Web应用程序（.NET Core）
我的Visual Studio 2017版本是：Community 2017，版本15.2（26430.13）
使用Fabric-React（而不是FabricJS）
按照http://dev.office.com/fabric#/get-started

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

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

完成的步骤：

已安装Node（v6.11.2）
创建了名为Test2
使用Nuget Package安装程序

npm

创建了package.json文件。 100次测试之后，如果我使用npm init手动完成此操作，或者在我的项目中安装npm时自动完成，无论如何它都在我的项目中：

已安装gulp（使用此链接What is the correct way to set up gulp in Visual Studio 2017?），简短摘要，我使用Bundler＆amp; amp;将我的bundleconfig.json文件转换为Gulp。 Minifier扩展名。
使用Gulp（工作）Task runner explorer运行（并更新package.json）时测试：
安装的office-ui-fabric-react如此处所解释的那样（https://dev.office.com/fabric#react），也安装了反应和反应，如此处所述（http://dattabase.com/sharepoint-app-fabric-ui-react-part-1-3/）
在我的site.js文件中添加了一堆代码（在我的MVC视图中链接） - 添加了命令栏react-fabric代码：http://dev.office.com/fabric#Variants

这是我陷入困境的部分。首先，我不确定，一般不熟悉反应，如果我应该将这样的组件添加到我的视图中。其次，它不起作用，并给我以下错误：

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>
        );
    }
}

我的项目概述：

Answer 1

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

应该全局安装Typescript（var title = 'The Quick brown fox'; var titleCase = []; var Titlewords = title.split(""); for (var i = 0; i < Titlewords.length; i++) { Titlewords[i].toLowerCase(); console.log(Titlewords[i]); }）。然后，您可以通过键入npm install typescript -g从命令行编译.ts或.tsx。请注意，对于包含JSX模板的文件，文件类型应为tsc site.tsx，对于包含常规TypeScript的文件，文件类型应为tsx。

我的建议是遵循this excellent example关于如何使用Webpack使用TypeScript创建新的React应用程序。很高兴让自己熟悉Gulp作为任务运行者，但Gulp对于React开发来说并不是必需的。

启动并运行示例后，您可以包含office-ui-fabric-react并使用组件创建应用程序。

使用Fabric React

1 个答案: