Fluent UI and React using VS Code

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 VS Code, select (File > Open Folder).
Browse to the (C:\temp\fluentui\vscode) folder.
Select (Terminal > New Terminal).
Initialise npm.

npm init

Press Enter to accept all the defaults.
This will create a "package.json" file in the folder
SS

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

Display the Explorer Pane (View > Explorer)
Select the "package.json" file.
Change the main parameter from "index.js" to "code/index.jsx".
SS

Create index.html file

Press the New Folder button on the Explorer Pane.
SS
Create a new subfolder called "code" (C:\temp\fluentui\vscode\code).
Select the "code" folder and press the New File button on the Explorer Pane.
Create a file with the name 'index.html'.

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

Create index.jsx file

Select the "code" folder and press the New File button on the Explorer Pane.
SS
Create a file with the name '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

Select the below all the folder and files and press the New File button on the Explorer Pane.
SS
Create a file with the name '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.
In the Terminal window type 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 running in the command prompt.