CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Maria Jane
Maria Jane

Reputation: 2401

2 different ways to create React component

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?

Upvotes: 6

Views: 2796

Answers (3)

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

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')
);

Upvotes: 6

Littlee
Littlee

Reputation: 4327

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.

Upvotes: 1

Horia Coman
Horia Coman

Reputation: 8781

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.

Upvotes: 3

Related Questions