11/07/2017

• React JSX
  💚React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, but there are some pros that comes with it.
  
• JSX is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• JSX makes it easier and faster to write templates if you are familiar with HTML.

 

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

 React component
 
💖This component is owner of Header and Content. We are creating Header and 
Content separately and just adding it inside JSX tree in our App 
component. Only App component needs to be exported.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}