Component basics (App.js)

To render HTML elements, we create components (js functions) inside the app file.

This is the basic structure:

Import styles:

import './App.css'; 

Here's a basic component (as u can see, it's using XML markup)

function Header() {
  return (
    <h1>Here's my title without variables</h1>
  )
} 

Here's another component but this time we use a variable (defined in component) called contentText which has to be used with React's default object named props: 

function Content(props) {
  return (
    <p>This is my content added via custom variable: {props.contentText}</p>
  )
}

This is all added to the component called App as individual objects (where values are added to the variables which are included in the form of component/object attributes): 

function App() {
  return (
    <div className="App">
      <Header />
      <Content contentText="added via object attribute!" />
    </div>
  );
}

This is all exported so it can be used as object in the main app (index.js)

export default App;