JCU web application template

This package contains a ReactJS component that can wrap the contents of a web application, providing the default style of a header and footer.

Included libraries

The following libraries are required to be included for this template:

• Bootstrap 4.1.0 or higher.

Installation and usage

Install with the following command:

npm install --save @jamescookuniversity/jcu-web-app-template

Use the template as follows:

import Template from '@jamescookuniversity/jcu-web-app-template';

export default (props) => {
	return (
		<Template title="Sample application">
			<h1>Hello, world!</h1>
			<p>This is some content.</p>
		</Template>
	);
}

Application Navigation menu

The navigation menu under the title text can be customised. Provide a structure to the nav attribute of the Template component to like so (note: href is only needed on leaf nodes of the tree):

const navMenu = [
	{href: 'https://www.acme.com', label: 'ACME site'},
	{label: 'Menu', children: [
		{href: '/about', label: 'About this app'},		
		{href: '/contacts', label: 'Contacts'}		
	]}
];

class App extends Component {
	render() {
		<Template title="Sample application" nav={navMenu}>
			<h1>Hello, world!</h1>
			<p>This is some content.</p>
		</Template>
	}
}

Purposes of included files

Each file in this project has a purpose as described below:

• src/Footer.js - Footer component
• src/Header.js - Header component
• src/index.js - default file - Exports the Template component.
• src/JcuNavbar.js - Components to generate the Navbar. Used by Header.
• src/Template.js - The custom Template component for web applications
• src/Template.test.js - A test written with Jest that'll render the template and ensure it succeeds.
• .babelrc - Defines how babel transpiler treats the code
• .gitignore - Specified files are ignored in git add commands
• .npmignore - Specified files are ignored when packaging for NPM
• Jenkinsfile - Instructions to build this component on the JCU Jenkins server.
• package.json - Package metadata, dependencies, etc.
• README.md - The file you're reading right now.