Page Comparison

...

Refer to Guidelines for building or extending e-Business 6.0 Controls for controls built using Knockout .js

Prerequisite Knowledge

• React (react.production.min.js): https://reactjs.org/

• React DOM (react-dom.production.min.js): https://reactjs.org/docs/react-dom.html

Key changes in the e-Business 7.0 Frontend implementation

• A new jsx folder is created to store the JavaScript XML (JSX) files for the new controls.

• Developers will be able to write their React code in JSX (easier than writing in JavaScript). However, as JSX is not supported in most browsers, they need to be transpiled to JS.

• Post transpilation of the JSX files, their corresponding JS files are automatically created in the js folder.

• For controls built using React, the HTML landing page files references the transpiled JS file and not the manually coded JSX file.

• The landing page HTML file should not contain any JS code, for example, for the initial service calls, for the knockout bindings etcetera. It must only contain the references to all of the JS, CSS and JSX files along with the “div” elements with ID attributes, for loading controls on the html page.

• The initial service calls and Knockout bindings must now be included in the JSX files.

• Two new files, react.production.min.js and react-dom.production.min.js, are added into the js/3rdParty folder. These will be referenced in the HTML landing page files for using React in our controls.

• The HTML template file for a control under the html folder is no longer needed as the HTML for the control’s body is written in the JSX file.

Getting Started

1. Install Installation of Node.js and npm (Node Package Manager)

   1. React development requires Node.js to be installed on your environment. It can be downloaded from the following link: - https://nodejs.org/en/download/

   2. npm comes bundled with the Node.js installable after v0.6.3 version. To verify the same, open command prompt and type the following command and see the result: npm --version

2. Install Installation of React, React DOM, babel-cli, babel-preset-react and babel-plugin-transform-react-jsx

   1. The front-end project in the e-Business 7.0 setup includes the package.json file that contains a list of dependencies for React development.

   2. Open the Command Prompt and switch to the directory that holds the e-Business frontend front-end project

   3. Run the following command to install all necessary dependencies mentioned in the package.json file: npm install OR

   4. Alternatively, you can run the following commands to manually install all dependencies

      1. Create package.json file: npm init -y

      2. Install react and react-dom : npm install react react-dom --save

      3. Install Babel : npm install babel-cli babel-preset-react babel-plugin-transform-react-jsx

Control level guidelines with examples.

• While developing a control, create one Landing page HTML file and one JSX file with the same name.
  For example: committees/CommitteeListing.html and jsx/committees/CommitteeListing.jsx

• The HTML landing page files must contain the references to all of the JS, CSS and JSX files along with the “div” elements with ID attributes, for loading controls on the html page.

• One of these “div” elements is where the current control’s HTML will be loadedrendered. Make sure to name it as per the control’s name, for example, for CommitteeListing control, the div would have ID, committeeListing, as shown below:

<div class="ebBody ebWrapper">
    <div id="committeeListing"></div>
</div>

• Make sure to add references to the react.production.min.js and react-dom.production.min.js files which are required to use React in our code, as shown below:

  Code Block
  <script src="js/3rdParty/react.production.min.js"></script>

...

• <script src="js/3rdParty/react-dom.production.min.js"></script>

• Just before the closing </body> tag, add a reference to the JS file which will be is created automatically after transpiling its corresponding JSX file, as shown below:

  Code Block
  <!-- Load our React component. --> <script src="../js/committees/CommitteeListing.js"></script>

• In the JSX file, a variable has to be created that will act as a collection for all of the control's objects. 
  For example: var eb_CommitteeListing = eb_CommitteeListing || {};

• The control objects can be SitePath, TemplatePath, ServicePath, service URLs and control specific properties.

• Once the control objects have been defined, import the useState and useEffect hooks like below,:

const { useState, useEffect } = React;

• The data for the control has to be managed in the form of state. In order to do this, we use the useState hook, as shown below:

const [committeeList, setCommitteeList] = useState(null);

• In order to perform actions based on certain conditions, we use the useEffect hook,

useEffect(() => {
  .................
  Action to perform
  .................
  }, [optionalState]);

• The controls have to be developed as functional components in the following manner,:

const ControlName = () => {
    ........
    ........
    ........
    
    return (
      ..HTML..
      ..Code..
    );
};

...

• The first section of the code to include be included in the functional component is the useEffect hook, which executes on page load. This block of code must contain the initial service calls and knockout bindings of pre-existing controls (such as, header menu and shopping cart)

...

• This newly created functional component now needs to be rendered onto the div element which is mentioned on the Landing page HTML file like so,

...

• In order to make calls to the services that will be used by the React components, use the FETCH API like below,:

fetch(eb_committeeListing.getCommitteeListService, {
                                method: 'get',
                                credentials: 'include'
                            })
                                .then(response => {
                                    if (!response.ok) {
                                        throw Error(eb_committeeListing.defaultErrorMessage);
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    setCommitteeList(data);
                                    setCommitteeListToShow(data);
                                    setIsLoading(false);
                                    setError(null);
                                })
                                .catch(err => {
                                    setIsLoading(false);
                                    setError(err.message);
                                })

Post JSX development

Once the development of the control has been done in JSX, follow the steps below to transpile the JSX file into JS:

1. Open Command prompt and navigate to the directory that holds the e-Business frontend front-end project.

2. Run the following command

C:\LatestReact>node_modules\.bin\babel --plugins transform-react-jsx jsx_directory_path -d js_directory_path

...

...