using NotePad

If you want to use Office UI Fabric React it makes sense to bundle all the modules together into a single file.
One way of doing this is to use WebPack which has its own development web server.
Before you read this page you need to read TypeScript > Linking TSX File


Generate package.json file

Open File Explorer and browse to the (C:\temp\fabric) folder.
Create a new subfolder called "typescript" (C:\temp\fabric\typescript).
Create a new subfolder called "notepad" (C:\temp\fabric\typescript\notepad).
Open a command prompt (as administrator).
Change the folder and initialise npm.

cd c:\temp\fabric\typescript\notepad 
npm init

Press Enter to accept all the defaults.
This will create a "package.json" file in the folder (C:\temp\fabric\typescript\notepad).


Install Webpack

more information

npm install --save-dev webpack 
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin

Install Babel

more information

npm install --save-dev babel-loader 
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-typescript

Install React

more information

npm install --save-dev react 
npm install --save-dev react-dom

Install Typescript

more information

npm install --save-dev typescript 
npm install --save-dev ts-loader

Install the typescript type definitions for react.

npm install --save-dev @types/react 

Install the typescript type definitions for react Dom.

npm install --save-dev @types/react-dom 

Install Office UI Fabric React

This module includes the Core Framework.
Install the Office UI Fabric React webpack module.

npm install --save office-ui-fabric-react 

The '--save' switch will add this module as a dependency in the package.json file.


Edit package.json file

Open NotePad++ and drag the "package.json" file on to it.
Change the main parameter from "index.js" to "code/index.tsx".

{ 
  "name": "notepad",
  "version": "1.0.0",
  "description": "",
  "main": "code/index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "@types/react":"^16.7.20",
    "@types/react-dom":^16.0.11",
    "babel-loader": "^8.0.4",
    "html-webpack-plugin": "^2.30.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "ts-loader":"^5.3.3",
    "typescript": "^3.2.4",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
    "webpack-dev-server": "^3.1.10",
  },
  "dependencies": {
    "office-ui-fabric-react": "^6.111.0"
  }
}

Create index.html

Open File Explorer in the root folder (C:\temp\fabric\typescript\notepad).
Create a new sub folder called "code" (C:\temp\fabric\typescript\notepad\code).
Create a NotePad file with the following contents and save it as 'index.html'.
This file DOES NOT contain a link to webpackbundle.js.

<!DOCTYPE html> 
<html>
<body>
<h3>BetterSolutions.com</h3>
<div id="app"></div>
</body>
</html>

Create index.tsx file

Open File Explorer in the root folder (C:\temp\fabric\typescript\notepad\code).
Create a NotePad file with the following contents and save it as "index.tsx".
This file contains ES 2015 javascript and TSX code that uses React.
This file creates a React component called BETButtonPrimary which creates a Fabric UI button with an onClick event.
This file creates a React component called BETButtonWithDialog which creates a button that displays a dialog box.
Both these components are classes that use Interfaces.

import * as React from 'react';    
import * as ReactDOM from 'react-dom';

import { PrimaryButton, DefaultButton, ButtonType } from 'office-ui-fabric-react/lib/Button';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';

interface IProps_BETButtonPrimary {
    pButtonLabel: string,
    pOnClick: (event: React.MouseEvent<HTMLDivElement>) => void
}
export class BETButtonPrimary extends React.Component
   < IProps_BETButtonPrimary >
{
    constructor(props : IProps_BETButtonPrimary) {
        super(props);
    }

    render() {
        return (
            <div id='content-main'>
                 <PrimaryButton
                     className='normal-button'
                     buttonType={ ButtonType.hero }
                     onClick={ this.props.pOnClick }
                 >
                    { this.props.pButtonLabel }
                 </PrimaryButton>
            </div>
        );
    }
}

interface IProps_BETButtonWithDialog {
}
interface IState_BETButtonWithDialog {
   sHideDialog: boolean
}
export class BETButtonWithDialog extends React.Component
   < IProps_BETButtonWithDialog , IState_BETButtonWithDialog >
{
  constructor(props: IProps_BETButtonWithDialog) {
    super(props);
    this.state = {
      sHideDialog: true
    };
  }

  method_ShowDialog = (event: React.MouseEvent<HTMLDivElement>) : void => {
    this.setState({ sHideDialog: false });
  };

  method_SaveDialog = (): void => {
    this.setState({ sHideDialog: true });
  };

  method_CloseDialog = (): void => {
    this.setState({ sHideDialog: true });
  };

    render() {
        return (
            <div className='ms-welcome'>
                <BETButtonPrimary
                    pButtonLabel='Press This Button'
                    pOnClick={ this.method_ShowDialog }
                />

        <Dialog
          hidden={ this.state.sHideDialog }
          onDismiss={ this.method_CloseDialog }
          dialogContentProps={{
            type: DialogType.normal,
            title: 'Dialog Box Title',
            subText: 'Dialog Box Long Message.'
          }}
          modalProps={{
            isBlocking: true,
            containerClassName: 'ms-dialogMainOverride'
          }}
        >
          <DialogFooter>
            <PrimaryButton
               onClick={ this.method_SaveDialog }
               text="Save"
            />
            <DefaultButton
               onClick={ this.method_CloseDialog }
               text="Cancel"
            />
          </DialogFooter>
        </Dialog>

            </div>
        );
    }
}

ReactDOM.render(
  <BETButtonWithDialog/>,
  document.getElementById('app')
);

Create tsconfig.json

Open File Explorer in the root folder (C:\temp\fabric\typescript\notepad).
Create a NotePad file with the following contents and save it as "tsconfig.json".

{ 
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "build",
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

Create webpack.config.js file

Open File Explorer in the root folder (C:\temp\fabric\typescript\notepad).
Create a NotePad file with the following content.
The 'html'webpack-plugin' tells webpack to bundle all the html files into a single file called "index.html".
This file tells webpack to include an additional rule that uses 'ts-loader'.
This file tells webpack to include an additional output path and subfolder 'build'.

var HTMLWebpackPlugin = require('html-webpack-plugin');   
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
   template: __dirname + '/code/index.html',
   filename: 'index.html',
   inject: 'body'
});

module.exports = {
   entry: __dirname + '/code/index.tsx',
   output: {
      filename: 'webpackbundle.js',
      path: __dirname + '/build'
   },
   module: {
      rules: [
          {
             test: /.tsx$/,
             loader: 'babel-loader',
             exclude: /node_modules/,
             options: {
                presets: ['@babel/react']
             }
          } ,
          {
             test: /.tsx$/,
             loader: 'ts-loader',
             exclude: /node_modules/,
          }

      ]
   },
   plugins: [HTMLWebpackPluginConfig]
};

Launch Browser

There is no more configuration that needs to be done.
You are now in a position to launch webpack and start the local development server.
Open a command prompt (as administrator).
Change to the corresponding folder and execute the following 2 commands.

node ./node_modules/webpack/bin/webpack --mode development 
node ./node_modules/webpack-dev-server/bin/webpack-dev-server --mode development

Open your browser and display the URL - localhost:8080
Pressing "Ctrl + C" will stop the process from running in the command prompt.


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext