Creating A Page In React - department-of-veterans-affairs/caseflow GitHub Wiki
-
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
-
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>
)
};
- Go to the (your section) located here client/app/(your section)/(your section)App.jsx and import your custom component
import { HelloWorld } from './helloWorld'
- Write a function for the component in (your section)App.jsx with details of what the page is going to potentially render
routedHelloWorld = () => (
<HelloWorld />
)
- 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}
/>
Go to the UI to test what was imported from the backend to make sure page changes are rendered
For a list of Queue components with code go to Storybook
- Queue
- Queue Table
- Choose desired table
You may need to delete your changes to routes.rb after development. Caseflow has built in redirects that developers may not want to override.