掌握面料運行簡單的Web項目做出反應

得到它使用的工作如下：

的WebPack
打字稿
TS-裝載機
反應
react-dom
@類型/反應
@類型/反應-DOM
辦公室-UI-織物反應

我曾有過一個簡單的反應過來例子運行時，它是很容易的做同樣的面料，反應。

一些很好的教程：

----原帖----

作爲一個初來乍到React/node我想在Visual Studio 2017中使用Fabric React創建一個測試應用程序，因爲我想採用Office外觀。現在我已經花了無數個小時瞭解如何讓這個工作，並遇到問題後（例如創建package.json，安裝Gulp等）有很多這個主題的教程，但他們都似乎是有點分散或者僅僅依賴於1個依賴關係。

首先：

我想建立一個Web應用程序 - 很簡單/基本的，用於測試目的，只是使用一些織物的UI組件。
我在Visual Studio 2017中創建了這個Web項目作爲ASP.NET核心Web應用程序（.NET Core）
我的Visual Studio 2017版本是：Community 2017，version 15.2（26430。13）
使用面料反應的（而不是FabricJS）
與咕嘟咕嘟使用它作爲http://dev.office.com/fabric#/get-started

截至提出到現在爲止我已經使用了以下文件：

，可能更多一些，我忘了..

的步驟來完成：

安裝Node（v6.11.2 ）
創建了我的web項目使用NuGet包安裝
創造了package.json文件名爲Test2的
新增npm（v3.10.10）到我的項目。不知道了，經過100次測試，如果我這樣做手工使用npm init或這是與我的項目安裝NPM自動完成的，反正這是在我的項目：

安裝gulp（使用此鏈接What is the correct way to set up gulp in Visual Studio 2017?），簡短摘要，我使用Bundler & Minifier擴展將我的bundleconfig.json文件轉換爲Gulp。

測試，如果Gulp RAN（和更新的package.json）使用Task runner explorer（工作）：

安裝Office-UI-織物作出反應，在這裏（https://dev.office.com/fabric#react）解釋，還安裝反應和反應-DOM這裏解釋（http://dattabase.com/sharepoint-app-fabric-ui-react-part-1-3/）

增補一串代碼到我site.js文件（被鏈接到我的MVC視圖） - 加入這裏所列出的命令欄反應織物代碼：http://dev.office.com/fabric#Variants

這是部分其中I我陷入困境。首先，我不確定，對一般反應不熟悉，如果我應該將這樣的組件添加到我的視圖中。其次，它不起作用，並給我以下錯誤：

site.js:5 Uncaught SyntaxError: Unexpected token import

任何人都知道哪一步出錯了？一些附加信息： 包。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> 
     ); 
    } 
}

我的項目概況：

來源

2017-08-18 Nicolas

你想運行的例子，是在TypeScript給出，但你似乎將其作爲節點（JavaScript）應用程序運行。

Typescript應該全局安裝（npm install typescript -g）。然後，您可以通過鍵入tsc site.tsx從命令行編譯.ts或.tsx。請注意，對於包含JSX模板的文件，文件類型應爲tsx，對於包含常規TypeScript的文件，文件類型應爲.ts。

我的建議是關於如何使用Webpack使用TypeScript創建新的React應用程序this excellent example。將Gulp作爲一個任務運行者很熟悉，但是Gulp對於React的開發並不是必要的。

將示例啓動並運行後，您可以包含office-ui-fabric-react並使用組件創建應用程序。

來源

2017-09-03 10:13:04

謝謝！我實際上找到了你所提到的相同的教程。除此之外，我還發現了一些其他的好消息！我最終（經過一些研究後）將React與TypeScript，Webpack，TS-Loader，@ types/react和react-dom結合使用。在運行REACT後，如果運行Fabric React非常容易，我現在只是在如何輕鬆調整CSS而苦苦掙扎。 – Nicolas

掌握面料運行簡單的Web項目做出反應

回答

相關問題