Creating and nesting components in React JS

Creating and nesting components 

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React components are JavaScript functions that return markup:

function MyButton() {

 return (

<div>

   <button>I'm a button </button>

</div>

  );

}

Now that you’ve declared MyButton, you can nest it into another component:

export default function MyApp() {

  return (

<div>

     <h1>Welcome to my app</h1>

     <MyButton/>

</div>

  );

}

Notice that starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.

Have a look at the result:

App.js

function MyButton() {

  return (

      <button>

      I'm a button

        </button>

  );

}

export default function MyApp() {

  return (

<div>

        <h1>Welcome to my app</h1>

        <MyButton/>

</div>

  );

}

The export default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax, MDN, and javascript.info have great references.