03-01 React Components

01

Reach components are like typical html container elements

02

The App() component from App.js 

import './App.css';

function App() {
return (
 <div className="App">
  <header className="App-header">
   <p>
    Edit <code>src/App.js</code> and save to reload.
   </p>
   <a 
    className="App-link" 
    href="https://reactjs.org" 
    target="_blank" 
    rel="noopener noreferrer">
    Learn React
   </a>
  </header>
 </div>
);
}

export default App;

03

The App() component being used inside the, and closed with the / iside the > index.js 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
     <App />
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

04

You can also close the component like this 

<App></App>

This places the html know as jsx into the main page

05

The App() component function can be arrow functions, (which we will see), BUT they have to be capitalized. As we have seen it injects into the index.js html like text called jsx, very similiar, small differences first,

class is a keyword in javascript so we use className camelcased