Phenome Component Declaration

Declaration

Each Phenome component must be declared in separate .jsx (or .js) file and declared as a default not named object export:

// hello-user.jsx
export default {
  name: 'hello-user',
  props: {
    firstName: [String],
    lastName: [String],
  },
  render() {
    return (
      <div className="welcome-user">Hello, {this.props.firstName} {this.props.lastName}!</div>
    )
  }
}
// visit-counter.jsx
export default {
  name: 'visit-counter',
  state() {
    return {
      seconds: 0
    };
  },
  render() {
    return (
      <div>You see this message {this.state.seconds} seconds</div>
    );
  },
  componentDidMount() {
    const self = this;
    self.interval = setInterval(() => {
      self.setState({
        seconds: self.state.seconds + 1,
      });
    }, 1000);
  },
  componentWillUnmount() {
    const self = this;
    clearInterval(self.interval);
  }
}

Component Properties

Let's look at list of all available phenome component object properties

Parameter Type Description
name string Component name. Must be all-lowercase, must contain a hyphen. Required
props object Object with component properties
state function Method that should return object with initial component state
render function Component render function. Required
methods object Object with component methods
computed object Object with computed properties (setters/getters), where each property is a method (getter only) or object with get() and set() methods
watch object Object with props and state properties to watch
functional boolean Enables functional component. Such component must have only name and render properties in addition.
static object Object with methods and properties that be set as static method and properties of generated component
Life Cycle
componentWillCreate function Called synchronously immediately after the instance has been initialized, but before component state will set
componentDidCreate function

Called synchronously after the instance is created, after component state set.

componentWillMount function

Invoked just before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering.

componentDidMount function

Invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount()

componentWillUnmount function Invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount()

componentWillUpdate function

Invoked just before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs.

componentDidUpdate function Invoked immediately after updating occurs.

componentDidCatch function(error, info) Called when an error from any descendent component is captured. It receives the error and a string containing information on where the error was captured.

Now let's look at each property in more details.