Home

Best practices followed by the taverna team

We use React-Redux in this project for the front end.

File structure

|-- src
   |-- actions
   |-- components
   |-- constants
   |-- containers
   |-- reducers
   |-- routes
   |-- store
|-- index.html
|-- index.js

We have separate folders for components and containers for several reasons:

• Better separation of concerns - You understand your app and your UI better by writing components this way.
• Better reusability - You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.
• Easier to test - Presentational components can be put on a single page and one can easily tweak design without touching the app logic. You can also run screenshot regression tests on that page.

Components

• Are basically how things look.
• Usually have some DOM markup and styles of their own.
• Often allow containment via this.props.children.
• Have no dependencies on the rest of the app, such as Redux actions or store.
• Don’t specify how the data is loaded or mutated.
• Receive data and callbacks exclusively via props.
• Rarely have their own state (when they do, it’s UI state rather than data).
• Are written as functional components

import React from 'react';

 const componentName = () => {
  return (
   <div>
      
   </div>
  );
 };

export default componentName

Containers

• Are concerned with how things work.
• May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and never have any styles.
• Provide the data and behavior to presentational or other container components.
• Call Redux actions and provide these as callbacks to the presentational components.
• Are often stateful, as they tend to serve as data sources.

import React, { Component } from 'react';

class componentName extends Component {
  constructor(props) {
    super(props);
    
  }
  
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default componentName;

Testing

Adding dependencies

Styling