- - 更新 - -
使用以下方法使其工作：
- 网页包
- 打字稿
- ts装载机
- 反应
- 反应域
- @types/反应
- @types/react-dom
- office-ui-fabric-react
一旦我运行了一个简单的 react 示例，就很容易为 fabric-react 做同样的事情。
一些不错的教程：
- https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
- https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4
----原帖----
作为一个新手React/node我想在使用中创建一个测试应用程序Visual Studio 2017（Fabric ReactFabric，因为我想采用 Office 的外观）。到目前为止，我已经花费了无数个小时来弄清楚如何让它工作，并遇到一个又一个问题（例如创建package.json、安装Gulp等）。关于这个主题有很多教程，但它们似乎都有点分散或仅在依赖项中的 1 个上。
首先：
- 我想构建一个 Web 应用程序 - 非常简单/基本，用于测试目的，并且只使用一些 Fabric UI 组件。
- 我在 Visual Studio 2017 中创建这个 Web 项目作为 ASP.NET Core Web 应用程序 (.NET Core)
- 我的 Visual Studio 2017 版本是：Community 2017，版本 15.2 (26430.13)
- 使用 Fabric-React（而不是 FabricJS）
- 按照http://dev.office.com/fabric#/get-started的建议将其与 Gulp 一起使用
到目前为止，我使用了以下文档：
- https://dev.office.com/fabric#react
- http://dev.office.com/fabric#Overview
- https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
- http://leruplund.dk/2017/04/15/setting-up-asp-net-core-in-visual-studio-2017-with-npm-webpack-and-typescript-part-i/
- 在 Visual Studio 2017 中设置 gulp 的正确方法是什么？
- https://travismaynard.com/writing/getting-started-with-gulp
可能还有一些我忘记了..
完成的步骤：
- 已安装
Node(v6.11.2) - 创建了我的名为 Test2 的 Web 项目
npm使用 Nuget Package 安装程序将 (v3.10.10) 添加到我的项目中- 创建了
package.json文件。不确定了，在 100 次测试之后，如果我手动使用npm init或者这是通过在我的项目中安装 npm 自动完成的，无论如何它在我的项目中：
- 已安装
gulp（使用此链接What is the correct way to set up gulp in Visual Studio 2017?），简短的总结，我使用 Bundler & Minifier 扩展将我的 bundleconfig.json 文件转换为 Gulp。 - 使用（工作）测试是否
Gulp运行（并更新 package.jsonTask runner explorer）：
- 按照此处的说明安装了 office-ui-fabric-react ( https://dev.office.com/fabric#react )，还按照此处的说明安装了 react 和 react-dom ( http://dattabase.com/sharepoint-app-织物-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>
);
}
}
我的项目概述：
