MENU


Class Component

A component can also be defined as a class extending React.Component:


RESETRUNFULL
<!DOCTYPE html><html><head></head><body><script src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <script type="text/babel">
      function Welcome(props) {
         return <p>Hello, {props.name}.</p>;
      }
      class WelcomeAll extends React.Component {
         render() {
            return <h1>
               <Welcome name="John"/>
               <Welcome name="Mary"/>
               <Welcome name="Dude"/>
               Great day, {this.props.all}!
   </h1>;
         }
   }
   ReactDOM.render(<WelcomeAll all="everyone"/>, document.querySelector('div'));
   </script>
   <div></div></body></html>

render() is a special React class method that is called when a component is rendered.

A function or a class, a component must never modify its own props. Eg.:

this.props.name = 'Tom'; // wrong

As we will see, if you ever define the constructor() function, you need to run the statement 'super(props);' in it. 'props' is assigned to 'this' automatically if the constructor is not defined.