React component without extend React Component class

Question

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

don't know the answer of how react understand its a react component?, but its called as Stateless Functional Component and used when you want to create a component that doesn't have any state or lifecycle methods means purely used to return a UI. check the stackoverflow DOC on Stateless Functional Component: stackoverflow.com/documentation/reactjs/6588/… — Mayank Shukla
– Mayank Shukla, Commented Apr 30, 2017 at 7:43

user394010 · Accepted Answer · 2017-04-30 07:36:10Z

3

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>
}

edited Apr 30, 2017 at 7:36

answered Apr 30, 2017 at 7:28

user394010

3842 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayank Shukla Over a year ago

he is asking How react understand this is a react component ? you are telling the benefits and properties of stateless functional component.

user394010 Over a year ago

The react developers or someone who make deep analize react code may answer carefully. I think that react see if such function return react component so that finction is react component too.

Merlin -they-them- · Accepted Answer · 2017-05-30 19:36:35Z

2

React "knows" that the code you wrote is a React Component because of transpilation. Transpilation is a process that occurs during build time where your code is changed from the code you wrote into something else.

In the case of React and JSX, your code turns into

export const Login = () => (
  React.createElement('div', {},
    React.createElement('h4', {}, 'Hello World')
  );
);

The angle brackets (<) are syntactic sugar for React.createElement and people use the angle brackets because they are simpler to use and type.

answered May 30, 2017 at 19:36

Merlin -they-them-

3,0064 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

React component without extend React Component class

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related