Getting simple web project running with Fabric Rea

Question

----UPDATE----

Got it to work using the following:

• Webpack
• Typescript
• ts-loader
• react
• react-dom
• @types/react
• @types/react-dom
• office-ui-fabric-react

Once I had a simple react example running, it was easy to do the same for fabric-react.

Some good tutorials:

• https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
• https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4

---

----Original post----

As a newcomer to React / node I want to create a test application in Visual Studio 2017 using Fabric React (Fabric since I want to adopt the Office look and feel). By now I've spent countless of hours figuring out how to get this to work, and encountering problem after problem (e.g. creating package.json, installing Gulp, etc.) There are many tutorials on this topic but all of them seem to be a bit scattered or just on 1 of the dependencies.

To start with:

• I want to build a web application - very simple / basic, for test purposes, and just use some of the Fabric UI components.
• I am creating this web project in Visual Studio 2017 as a ASP.NET Core Web Application (.NET Core)
• My Visual Studio 2017 version is: Community 2017, version 15.2 (26430.13)
• Using Fabric-React (and not FabricJS)
• Using it with Gulp as suggested at http://dev.office.com/fabric#/get-started

Up till now I have used the following documentation:

• 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/
• What is the correct way to set up gulp in Visual Studio 2017?
• https://travismaynard.com/writing/getting-started-with-gulp

And probably some more that I forgot..

The steps done:

1. Installed Node (v6.11.2)
2. Created my web project called Test2
3. Added npm (v3.10.10) to my project using the Nuget Package installer
4. Created the package.json file. Not sure anymore, after 100 tests, if I did this manually using npm init or this was done automatically with installing npm in my project, anyway it is in my project:

5. Installed gulp (using this link What is the correct way to set up gulp in Visual Studio 2017?), short summary, I converted my bundleconfig.json file to Gulp using the Bundler & Minifier extension.
6. Tested if Gulp ran (and updating package.json) using Task runner explorer (worked):
7. Installed office-ui-fabric-react as explained here (https://dev.office.com/fabric#react), also installed react and react-dom as explained here (http://dattabase.com/sharepoint-app-fabric-ui-react-part-1-3/)
8. Added a bunch of code to my site.js file (which is linked to in my MVC view) - added the command bar react-fabric code listed here: http://dev.office.com/fabric#Variants

This is the part where I am getting stuck. Firstly I am not sure, being unfamiliar with react in general, if I should add the components like this to my view. Secondly, it does not work and give me the following error:

site.js:5 Uncaught SyntaxError: Unexpected token import

Anyone know on which step it went wrong? Some addition info: Package.json contains:

{
  "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 contains:

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

My project overview:

Answer 1

The example you're trying to run, is given in TypeScript, but you seem to be running it as a node (JavaScript) application.

Typescript should be installed globally (npm install typescript -g). You can then compile .ts or .tsx from the command-line by typing tsc site.tsx. Note that the filetype should be tsx for a file containing a JSX template, and it should be .ts for a file containing regular TypeScript.

My advice for you is to follow this excellent example on how to create a new React application with TypeScript using Webpack. It's nice to familiarize yourself with Gulp as a task-runner, but Gulp is by no means necessary for React development.

Once you have the example up and running, you can include office-ui-fabric-react and create applications with the components.