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 JSX 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 file

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.


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