-
Notifications
You must be signed in to change notification settings - Fork 18
Creating A Page In React
Eric Moore edited this page Sep 19, 2022
·
11 revisions
-
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.
- Home
- Acronyms and Glossary
- Caseflow products
- Caseflow Intake
- Caseflow Queue
- Appeals Consumer
- Caseflow Reader
- Caseflow eFolder
- Caseflow Hearings
- Caseflow Certification
- Caseflow APIs
- Appeal Status API
- Caseflow Dispatch
-
CSUM Roles
- System Admin
- VHA Team Management
- Active Record Queries Resource
- External Integrations
- Caseflow Demo
- Caseflow ProdTest
- Background
- Stuck Jobs
- VA Notify
- Caseflow-Team
- Frontend Best Practices
- Accessibility
- How-To
- Debugging Tips
- Adding a Feature Flag with FeatureToggle
- Editing AMA issues
- Editing a decision review
- Fixing task trees
- Investigating and diagnosing issues
- Data and Metric Request Workflow
- Exporting and Importing Appeals
- Explain page for Appeals
- Record associations and Foreign Keys
- Upgrading Ruby
- Stuck Appeals
- Testing Action Mailer Messages Locally
- Re-running Seed Files
- Rake Generator for Legacy Appeals
- Manually running Scheduled Jobs
- System Admin UI
- Caseflow Makefile
- Upgrading Postgresql from v11.7 to v14.8 Locally
- VACOLS VM Trigger Fix M1
- Using SlackService to Send a Job Alert
- Technical Talks