Creating A Page In React

Create React Page

1. Go to routes page in the routes.rb scroll down to scope path: '/(your section)' do to add a get request this validates and configs the route located here config/routes.rb

2. Create a custom component in app/(your section) to render for the page and name it the same name as the file name

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'

export const HelloWorld = (props) => {
  return (
  <h1>Hello World!</h1>
  )
};

3. Go to the (your section) located here client/app/(your section)/(your section)App.jsx and import your custom component

import { HelloWorld }  from './helloWorld'

4. Write a function for the component in (your section)App.jsx with details of what the page is going to potentially render

routedHelloWorld = () => (
    <HelloWorld />
 )

5. Add in the route in the render function for react to route destination and render out the component in the component

<PageRoute
  exact
  path="your route"
  title="Hello World"
  render={this.routedHelloWorld}
 /> 

Testing

Go to the UI to test what was imported from the backend to make sure page changes are rendered

References

For a list of Queue components with code go to Storybook

• Queue
• Queue Table
• Choose desired table

Note

You may need to delete your changes to routes.rb after development. Caseflow has built in redirects that developers may not want to override.