React component without extend React Component class

reactjs

Solution

This is functional stateless component. It is for simple components.

You also can add component property types like this:

export const Login = () => (
  <div>
    <h4>Hello World</h4>
  </div>
);

Login.propTypes = {
  username: React.PropTypes.string.isRequired,
}

You can add callback like this:

// this place to define callback is more effective 
const onClick = e => (...)

const Login = props => {
  // or define here if you need access to props in onClick
  const onClick = e => (...)

  return <button onClick={onClick}>Submit</button>
}

Problem

I see in some source code, the author wrote a component like this: ``` import React from 'react'; export const Login = () => ( <div> <h4>Hello World</h4> </div> ); export default Login; ``` The thing I don't know is: - How react understand this is a react component by only using import - How can I add another callback method, such as `viewDidMount` ... I have added in code block but it compiles fail. thanks

Original source