Fluent UI and React using NotePad

If you want to use Fluent UI 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 should read [[React > Linking React File]]

Generate package.json file

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

cd c:\temp\fluentui\notepad 
npm init

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

This module includes the Core Framework.
Install the Fluent UI React webpack module.
The '--save' switch will add this module as a dependency in the package.json file.

npm install --save @fluentui/react

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.9.6", 
    "@babel/preset-react": "^7.9.4", 
    "babel-loader": "^8.1.0", 
    "html-webpack-plugin": "^4.3.0", 
    "react": "^16.13.1", 
    "react-dom": "^16.13.1", 
    "webpack": "^4.43.0", 
    "webpack-cli": "^3.3.11", 
    "webpack-dev-server": "^3.11.0" 
  }, 
  "dependencies": { 
    "@fluentui/react": "^0.12.0" 
  } 
}

Create index.html file

Open File Explorer in the root folder (C:\temp\fluentui\notepad).
Create a new subfolder called "code" (C:\temp\fluentui\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\fluentui\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 Fluent UI button with an onClick event.

import * as React from 'react';  
import * as ReactDOM from 'react-dom';  
import { PrimaryButton } from '@fluentui/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

Open File Explorer in the root folder (C:\temp\fluentui\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$/, 
             exclude: /node_modules/, 
             use: { 
                loader: 'babel-loader',  
                options: { 
                   presets: ['@babel/preset-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 (run as admin).
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\fluentui\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.