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:

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

ReactJS Application

This declaration will create a ReactJS application named App:

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

ReactJS Component

This declaration will create a ReactJS component named Sequence 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:

import React, { Component } from 'react';
 
 class Sequence extends Component {
 
  shouldComponentUpdate(nextProps) {
    return this.props.positionFrom !== nextProps.positionFrom ||
      this.props.sequence !== nextProps.sequence ||
      this.props.nucleotidesPerRow !== nextProps.nucleotidesPerRow ||
      this.props.rowHeight !== nextProps.rowHeight;
  }
 
  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>
    );
  }
}

ReactJS Form

This declaration will create a ReactJS form named contact:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

let ContactForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" component="input" type="text" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

export default ContactFormrender() {
  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>
  );
}

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>
  );
}


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)
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 AIP Console when you deliver React code. You can also manually install the extension using the Application - Extensions interface. When installed, follow the instructions below to run a new analysis/snapshot to generate new results:

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:

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 Form

HTML5 HTML fragment

Links

Links from the ReactJS application

Please remember that components are called mainly from html fragments, and render methods are implicitly called from ReactJS components.

Click to enlarge:

Links from a HTML fragment

Many links are created from fragments, for example:

Click to enlarge:

HTML tags present in HTML fragments are linked to ReactJS components if they exist, or else a JavaScript function:

Click to enlarge:

HTML atribute values present in HTML fragments are linked to methods when they are represented between { ... }:

Click to enlarge:

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.

Structural Rules

The following structural rules are provided:

1.2.5-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.5-funcrel
1.2.4-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.4-funcrel
1.2.3-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.3-funcrel
1.2.2-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.2-funcrel
1.2.1-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.1-funcrel
1.2.0-funcrelhttps://technologies.castsoftware.com/rules?sec=srs_reactjs&ref=||1.2.0-funcrel

Known Limitations