JSX

by

JSX Rules

  • JSX syntax
    • To make our life easier as it returns html
  • Always return single element. you cannot do as below
    • const App = () => {
        return (
         <h2> header </h2>
          <h3> header </h3>
        )
      };
       
  • You can wrap up with div 
    • const App = () => {
        return (
          <div>
            <h2> header </h2>
            <h3> header </h3>
          </div>
        );
      };
  • You can wrap with fragment which doesnt add extra node
    • const App = () => {
        return (
          <React.Fragment>
            <h2> header </h2>
            <h3> header </h3>
          </React.Fragment>
        );
      };
  • The short syntax of React.Fragment
    const App = () => {
      return (
        <>
          <h2> header </h2>
          <h3> header </h3>
        </>
      );
    };

Leave a Comment