Creating A Page In React - department-of-veterans-affairs/caseflow GitHub Wiki

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>
  )
};
  1. Go to the (your section) located here client/app/(your section)/(your section)App.jsx and import your custom component
import { HelloWorld }  from './helloWorld'
  1. Write a function for the component in (your section)App.jsx with details of what the page is going to potentially render
routedHelloWorld = () => (
    <HelloWorld />
 )
  1. 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.

⚠️ **GitHub.com Fallback** ⚠️