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 React > Linking JSX File


Generate package.json file

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

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

Press Enter to accept all the defaults.
This will create a "package.json" file in the folder (C:\temp\fabric\react\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

Install React

more information

npm install --save-dev react 
npm install --save-dev 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.jsx".

{ 
  "name": "notepad",
  "version": "1.0.0",
  "description": "",
  "main": "code/index.jsx",
  "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-loader": "^8.0.4",
    "html-webpack-plugin": "^2.30.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
    "webpack-dev-server": "^3.1.10",
  },
  "dependencies": {
    "office-ui-fabric-react": "^6.177.0"
  }
}

Create index.html file

Open File Explorer in the root folder (C:\temp\fabric\react\notepad).
Create a new subfolder called "code" (C:\temp\fabric\react\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.jsx file

Open File Explorer in the folder (C:\temp\fabric\react\notepad\code).
Create a NotePad file with the following contents and save it as 'index.jsx'.
This file contains ES 2015 javascript and JSX code that uses React.
This file creates a React component called BETButtonPrimary which creates a Fabric UI button with an onClick event.

import * as React from 'react';  
import * as ReactDOM from 'react-dom';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';

export class BETButtonPrimary extends React.Component {
    render() {
       return (
         <div>
           <PrimaryButton
             text={ 'my button text' }
             onClick={ () => alert('Button clicked') }
           />
        </div>
       );
    }
}

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

Create webpack.config.js file

Open File Explorer in the root folder (C:\temp\fabric\react\notepad).
Create a NotePad file with the following contents and save it as 'webpack.config.js'.

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.jsx',
   output: {
      filename: 'webpackbundle.js',
      path: __dirname + '/build'
   },
   module: {
      rules: [
          {
             test: /.jsx$/,
             loader: 'babel-loader',
             exclude: /node_modules/,
             options: {
                presets: ['@babel/react']
             }
          }
      ]
   },
   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 

This will create a subfolder called build (C:\temp\fabric\react\notepad\build).
This subfolder will contain 2 files (index.html and webpackbundle.js).

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 running in the command prompt.


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