ReactJS - 1.1

Description

This extension provides support for the ReactJS and React Native frameworks when the source code is written in JavaScript. When the source code is written in TypeScript, 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:

Files analyzed

See the Files analyzed section in the HTML5/JavaScript documentation for the list of supported file types. All JavaScript content and JavaScript fragments identified in those files are analyzed by this extension for ReactJS and React Native patterns.

Transactions

Transaction support is derived from metamodel concepts used to build CAST Imaging Blueprint and structural transaction flows. Entry Points start transactions; Exit Points include both output/boundary concepts and Data Entities manipulated by transactions.

ISO 5055 Structural Rules

Quality support is based on ISO 5055 structural rules available for the selected extension version.

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):

• HTML5/JavaScript
• Universal Linker

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

• 1.1.6 
• 1.1.6-funcrel 
• 1.1.5-funcrel 
• 1.1.4-funcrel 
• 1.1.3-funcrel 
• 1.1.2-funcrel 
• 1.1.1-funcrel 
• 1.1.0-funcrel 

Known Limitations

• React Without JSX  is not supported.