ReactJS - 1.1

Extension ID

com.castsoftware.reactjs

What’s new?

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

Supported versions

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

Version	Supported
15.x	✅
16.x	✅

Files analyzed

File	Extension	Notes
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 com.castsoftware.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	*.htc	HTC 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

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
✅	✅

Compatibility

Release	Operating System	Supported
v3/8.4.x	Microsoft Windows / Linux	✅
v2/8.3.x	Microsoft Windows	✅

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 (this is handled automatically):

Download and installation instructions

The extension will be automatically downloaded and installed when you deliver React code.

What results can you expect?

Objects

Icon	Metamodel name
	ReactJS Application
	ReactJS Component
	ReactJS Function Component
	HTML5 HTML fragment

Examples

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 an 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 above, we can see that it contains also a HTML fragment.

Quality rules

Known Limitations

React Without JSX is not supported.