Page tree
Skip to end of metadata
Go to start of metadata

Summary: This document provides information about the extension providing ReactJS / React Native support for Web applications.

Extension ID

com.castsoftware.reactjs

What's new?

Please see ReactJS - 1.2 - Release Notes for more information.

Description

This extension provides support for the ReactJS and React Native framework. 

When the source code is written in TypeScript, the support for React is provided by the TypeScript extension.

In what situation should you install this extension?

If your Web application contains ReactJS or React Native source code and you want to view these object types and their links with other objects, then you should install this extension:

  • creates HTML fragments, ReactJS applications, ReactJS components and ReactJS Forms.
  • creates links between these objects.

ReactJS Javascript Front-end connected to Node.js/Express/MongoDB Back-end

ReactJS Application

Application name is the file name or the parent directory name if the file name is "index".

Following declarations will create a ReactJS application:


html fragment in ReactDOM.render() call:

import { Provider } from 'react-redux';
import { AppContainer } from 'react-hot-loader';

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <App version={appVersion} />
    </Provider>
  </AppContainer>,
  appElement
);

html fragment containing "Provider" or "AppContainer" tags, in or out of ReactDOM.render() call:

import { AppContainer } from 'react-hot-loader';

<AppContainer>
      <App version={appVersion} />
</AppContainer>

  • A relyon link is created from the application to the HTML fragment of the application.

ReactJS Component

This declaration will create a ReactJS component named UserContainer because the class inherits from Component or PureComponent. A component corresponds to a class which contains a render method. The render method is automatically called when the component is refered to in an HTML fragment.

In the function "mapDispatchToProps", there are mapping of functions which are used to find resolutions from HTML fragments to functions. See an example with "deleteUsers" function.

import React, { Component } from 'react';
 
 class UserContainer extends Component {
 
  componentDidUpdate(prevProps) {
...
  }
  componentDidMount = () { ... };

  render() {
    return (
      <g>
        {this.props.sequence.map((nucleotide, index) =>
          <Nucleotide
            type={nucleotide}
            position={this.props.positionFrom + index}
            key={index}
            index={index}
            onClick={this.props.onNucleotideClick}
            {...this.props}
          />,
        )}
      </g>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    createUsers: bindActionCreators(createUsers, dispatch),
    searchUsers: bindActionCreators(searchUsers, dispatch),
    getUsers: bindActionCreators(getUsers, dispatch),
    triggerNotification: bindActionCreators(triggerNotification, dispatch),
    resetUsersActionStatus: bindActionCreators(resetUsersActionStatus, dispatch),
    deleteUsers: bindActionCreators(deleteUsers, dispatch),
    resetSearchUserApiStatus: bindActionCreators(resetSearchUserApiStatus, dispatch),
    getRoles: bindActionCreators(getRoles, dispatch),
    setConfigDetails: bindActionCreators(setConfigDetails, dispatch),
  };
}

function mapStateToProps(state) {
  return {
    loginUsersList: state.admin.loginUsersList,
    imagingUsersList: state.admin.imagingUsersList,
    usersActionStatus: state.admin.usersActionStatus,
    searchUserApiStatus: state.admin.searchUserApiStatus,
    securityMode: state.login.securityMode,
    deleteUserStatus: state.admin.deleteUserStatus,
    rolesList: state.admin.rolesList,
  };
}

export default compose(withStyles(tableStyles), connect(mapStateToProps, mapDispatchToProps))(UserContainer);



  • call links are created from the component to its following methods: 'render', 'shouldComponentUpdate', 'componentWillReceiveProps', 'componentWillUpdate', 'componentWillMount', 'componentWillUnmount', 'componentDidUpdate', 'componentDidMount', 'componentDidUnmount'  when they exist.
  • these components may be called from html fragments anywhere in code as here:
 <Route
        exact={true}
        path={`${basePath}/apps`}
        component={UserContainer}
      />

or

 <UserContainer ... />
  • Functions refered to in the "mapDispatchToProps" function may be referenced anywhere in the code as here:
              <AlertDialog
                onClick={this.deleteUsers}
              />
    
    

ReactJS Function Component

This declaration will create a ReactJS function component named ReportContainer because the function is exported in one of the following statements:

  • export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ReportContainer));
  • export default connect(null, mapDispatchToProps)(ReportContainer);
  • export default connect(mapStateToProps, mapDispatchToProps)(withStyles(stylesTheme)(ReportContainer));
  • export default connect(mapStateToProps, mapDispatchToProps)(RedirectIfNotGranted(ReportContainer, 'STORE_ORDER_READ', 'store'));
  • export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(ReportContainer));
  • export default compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps))(ReportContainer);
  • export default withStyles(styles)(ReportContainer);
  • export default compose(withReducer, withSaga, withConnect)(injectIntl(ReportContainer));

File report/img-report-container.jsx

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
 
const ReportContainer = (props) => {
  const { isReportDialog, reportList, appName, reportDownloadQueue, reportQueue,
    reportActions, triggerDownload: { nextDownload, activeReportId } } = props;
...
}

function mapStateToProps(state) {
  return {
    isReportDialog: state.report.isReportDialog,
    reportList: state.report.reportList,
    appName: state.dataSource.selectedApp.value,
    reportDownloadQueue: state.report.reportDownloadQueue,
    reportQueue: state.report.reportQueue,
    triggerDownload: state.report.triggerDownload,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    reportActions: bindActionCreators(Object.assign({}, Actions), dispatch),
    triggerNotification: bindActionCreators(triggerNotification, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ReportContainer);

  • A call link is created from the function component to its function.
  • these components may be called from html fragments anywhere in code as here:
import ReportDialog from '../report/img-report-container';
...
 <ReportDialog />
  • The same is true for "mapDispatchToProps" function as for ReactJS components.

HTML fragment

This declaration will create a HTML fragment named render_fragment_1 starting with "<g>" and ending with "</g>". There can be several fragments in any function/method:

render() {
  return (
    <g>
      {this.props.sequence.map((nucleotide, index) =>
        <Nucleotide
          type={nucleotide}
          position={this.props.positionFrom + index}
          key={index}
          index={index}
          onClick={this.props.onNucleotideClick}
          {...this.props}
        />,
      )}
    </g>
  );
}

When you have purely javascript code inside an html fragment, the javascript code is analyzed and you have links as you would have in conventional javascript code. You may also have javascript functions inside html fragments, in this case, functions are children of the html fragment.


In the code example for the ReactJS application, we can see that it contains also a HTML fragment.

Supported versions

The following table displays the list of ReactJS versions that this extension supports:

Version
Supported
15.x(tick)
16.x(tick)
17.x(tick)

Files analyzed

Icon(s)FileExtensionNotes

HTML

*.html, *.htm, *.xhtml
  • creates one "HTML5 Source Code" object that is the caller of html to js links and a transaction entry point
  • broadcasts tags and attributes/values to other CAST extensions such as AngularJS. Other extensions will not need to analyze the files themselves.

Javascript*.js
  • creates Functions, Classes and Constructors
  • local call links between function calls and functions inside each JavaScript file.

Cascading Style Sheet*.css
  • No specifc objects are created

Java Server Page*.jsp


JSX*.jsx

Active Server Page*.asp, *.aspx


HTML Components*.htcHTC files contain html, javascript fragments that will be parsed. Created objects will be linked to the HTC file.

.NET Razor*.cshtml


Function Point, Quality and Sizing support

This extension provides the following support:

  • Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
  • Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points
(transactions)
Quality and Sizing
(tick)(tick) 

AIP Core compatibility

This extension is compatible with:

AIP Core release
Supported
8.3.x(tick)

Supported DBMS servers

DBMSSupported?
CSS / PostgreSQL(tick)

Prerequisites

(tick)An installation of any compatible release of AIP Core (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The ReactJS extension requires that the following other CAST extensions are also installed:

Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, any dependent extensions are automatically downloaded and installed for you. You do not need to do anything.

Download and installation instructions

The extension will be automatically downloaded and installed in CAST Console when you deliver React code. You can manage the extension using the Application - Extensions interface:

Packaging, delivering and analyzing your source code

Once the extension is downloaded and installed, you can now package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is described below:

 Click here to expand...

Packaging and delivery

Note that the ReactJS extension does not contain any CAST Delivery Manager Tool discoverers or extractors, therefore, no "ReactJS" projects will be detected. However, the Web Files Discoverer extension will be automatically installed (it is a "shipped" extension which means it is delivered with AIP Core) and will automatically detect projects as HTML5 if specific files are delivered, therefore ensuring that Analysis Units are created for your source code.

Using CAST Console

Using CAST Management Studio

 Click here to expand...
  • create a new Version
  • create a new Package for your ReactJS source code using the Files on your file system option:

  • Define the root folder of your Application source code:

  • Run the Package action
  • Before delivering the source code, check the packaging results:
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will not find any "projects" related to the ReactJS application source code - this is the expected behaviour. However, if your ReactJS related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action (click to enlarge):

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will automatically detect "HTML5 file projects" (see Web Files Discoverer for more technical information about how the discoverer works) related to the ReactJS application source code. In addition, if your ReactJS related source code is part of a larger application (for example a JEE application), then other projects may also be found during the package action (click to enlarge):

  • Deliver the Version

Analyzing

Using AIP Console

AIP Console exposes the technology configuration options once a version has been accepted/imported, or an analysis has been run. Click Universal Technology (3) in the Config (1) > Analysis (2) tab to display the available options for your ReactJS source code:

Then choose the relevant Analysis Unit (1) to view the configuration:

Using the CAST Management Studio

 Click here to expand...
  • Accept and deploy the Version in the CAST Management Studio.
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • No Analysis Units will be created automatically relating to the ReactJS source code - this is the expected behaviour. However, if your ReactJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

  • In the Current Version tab, add a new Analysis Unit specifically for your ReactJS source code, selecting the Add new Universal Analysis Unit option:

  • Edit the new Analysis Unit and configure in the Source Settings tab:
    • a name for the Analysis Unit
    • ensure you tick the HTML5/JavaScript option (the ReactJS extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the AngularJS extension is set as HTML5/JavaScript)
    • define the location of the deployed ReactJS source code (the CAST Management Studio will locate this automatically in the Deployment folder):

  • Run a test analysis on the Analysis Unit before you generate a new snapshot.
With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • "HTML5" Analysis Units will be created automatically (see Web Files Discoverer for more technical information about how the discoverer works) related to the ReactJS application source code. In addition, if your ReactJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may also be created:

  • There is nothing further to do, you can now run a test analysis on the Analysis Unit before you generate a new snapshot.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner:

Objects

The following objects are identified:

IconMetamodel name

ReactJS Application

ReactJS Component

ReactJS Function Component

HTML5 HTML fragment

Structural Rules

The following structural rules are provided:

Known Limitations

  • No labels