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 | |
16.x | |
17.x |
Files analyzed
Icon(s) | File | Extension | Notes |
---|---|---|---|
HTML | *.html, *.htm, *.xhtml |
| |
Javascript | *.js |
| |
Cascading Style Sheet | *.css |
| |
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 |
---|---|
AIP Core release | Supported |
---|---|
8.3.x |
Supported DBMS servers
DBMS | Supported? |
---|---|
CSS / PostgreSQL |
Prerequisites
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:
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:
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:
Icon | Metamodel name |
---|---|
ReactJS Application | |
ReactJS Component | |
ReactJS Function Component | |
HTML5 HTML fragment |
Structural Rules
The following structural rules are provided:
Known Limitations
- React Without JSX is not supported.