2 different ways to create React component

Question

I was following a react tutorial and this is the example code the author has given to create a basic React component:

const React = require('react')
const ReactDOM = require('react-dom')

const App = () => {
    return (
        <div className='app-container'>
            <h1>Hello</h1>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('app'))

He claim it's ES6.

But then I saw another way to create component.

class App extends React.Component {
    render(){
        return <h1>Hello</h1>;

    }
}

hmm I'm confused now. Is there any standard way of doing things in react?

first is function component. you can't use state or lifecycle events in it, it's just render method of normal component. second (if you fix syntactic mistakes) is common style of defining component in es2015 (es6) — Maxx, Sep 29 '16 at 09:39
Possible duplicate of [React.createClass vs. ES6 arrow function](http://stackoverflow.com/questions/37170809/react-createclass-vs-es6-arrow-function) — Chris, Sep 29 '16 at 09:40

score 6 · Accepted Answer · edited May 23 '17 at 12:26

In React you can create the so-called stateful and stateless functional components. Stateless components are simple reusable components which do not need to maintain state. Here is a short demo (http://codepen.io/PiotrBerebecki/pen/yaoOKv) showing you how you can create them and how they can access props passed from the parent (stateful component).

A simple example may be a theoretical App stateful component on Facebook.com. It could maintain state to track if user is logged in or logged out. Then in its render() method it would show a LoginLogout stateless button component passing to it the current state. The LoginLogout stateless component would then show either:

'Log In' text if user is not logged in, or
'Log Out' text if user is logged in.

You can learn more about stateful vs stateless components here: ReactJS difference between stateful and stateless and here React.createClass vs. ES6 arrow function

// Stateful component
class FacelookApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  receiveClick() {
    this.setState({
      isLoggedIn: !this.state.isLoggedIn
    });
  }

  render() {
    return (
      <div>
        <h4>Welcome, I'm a stateful parent called Facelook App</h4>
        <p>I maintain state to monitor if my awesome user logged 
          in. Are you logged in?<br />
          <b>{String(this.state.isLoggedIn)}</b>
        </p><br />

        <p>Hi, we are three stateless (dumb) LoginLogout buttons 
          generated using different ES6 syntax but having the same
          functionality. We don't maintain state. We will tell 
          our parent if the user clicks on us. What we render is 
          decided by the value of the prop sent to us by our parent.
        </p>

        <LoginLogout1 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>

        <LoginLogout2 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>

        <LoginLogout3 handleClick={this.receiveClick.bind(this)} 
                isLoggedIn={this.state.isLoggedIn}/>
      </div>
    );
  }
}


// Stateless functional components
// created in 3 equally valid ways
const LoginLogout1 = (props) => {
  return (
    <div>
      <button onClick={() => props.handleClick()}>
        LoginLogout v1 --- {props.isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
  );
};

// or
const LoginLogout2 = ({handleClick, isLoggedIn}) => (
    <div>
      <button onClick={() => handleClick()}>
        LoginLogout v2 --- {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
);

// or
const LoginLogout3 = ({handleClick, isLoggedIn}) => {
  return (
    <div>
      <button onClick={() => handleClick()}>
        LoginLogout v3 --- {isLoggedIn ? 'Log Out' : 'Log In'}
      </button>
    </div>
  );
};



ReactDOM.render(
  <FacelookApp />,
  document.getElementById('app')
);

stateful is strange to me, why do we need to keep the state? any clue? when do u use stateful versus stateless? in real world. — Maria Jane, Sep 29 '16 at 11:50
We need to keep state to be able to 'react' to events and manage what is happening with our app. Have a look at a real life Facebook example in my answer. The button does not need to keep state so it is stateless. Also, this article and video should be helpful: https://thinkster.io/understanding-react-state — Piotr Berebecki, Sep 29 '16 at 12:05
I've just updated my codepen to give you a better demo of the Facebook app example. Check out the link in my answer. — Piotr Berebecki, Sep 29 '16 at 13:06

score 3 · Answer 2 · answered Sep 29 '16 at 09:39

Both of them are "equally standard". Though the syntax for the second case is off. It should read class App extends React.Component {

The second approach is the most generic one, because it allows for state, extra functionality besides the render and Component lifetime methods etc. But when you have "functional" components, which just display something based on their props, you have the first approach as a shorthand for a class with just the render method. When calling .render React knows how to deal with the two cases.

most generic means what? allow for state means? – Maria Jane Sep 29 '16 at 09:43 — Maria Jane, Sep 29 '16 at 09:43

score 1 · Answer 3 · answered Sep 29 '16 at 10:21

const App = () => {
  return (
    <div className='app-container'>
      <h1>Hello</h1>
    </div>
  )
}

is called "stateless function component", which can not have state

https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

the another one is a normal component.

2 different ways to create React component

3 Answers3

Linked

Related