REACT - REACT DOM & JSX

    // BASIC STRUCTURE
    
    INDEXJS
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
    );


    APPJS
    import React from 'react'
    function App() {
    return (
    <div className='container'>
        <h2>Advanced Tutorial</h2>
    </div>
    )
    }
    
    export default App

    // IMPORTS 
    This is generated automatically when you create a React proyect in index.js 

    import React from 'react';
    import ReactDOM from 'react-dom';

    ReactDOM.render(
        <h1>Hello World</h1>,
    document.getElementById('root')
    );

    //If you want to use 2 elements they must be inside a div
    ReactDOM.render(
        <div>
            <h1>Hello World</h1>
            <p>Here is a paragraph</p>
        </div>,
    document.getElementById('root')
    );

    // 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
    reportWebVitals();

    // EXPORTS 
    books.js

    export const books = [
    {
    id: 1,
    img: "https://images-na.ssl-images-amazon.com/images/I/51VQB3uWu+L._SX258_BO1,204,203,200_.jpg",
    author: "Alice Schertle",
    title: "Little Blue Truck's Springtime",
    },
    {
    id: 2,
    img: "https://images-na.ssl-images-amazon.com/images/I/51p2SDOCV9L._SX218_BO1,204,203,200_QL40_FMwebp_.jpg",
    author: "Amelia Hepworth",
    title: "I Love You to the Moon and Back ",
    },
    ];

    //To import from another file:
    import { books } from "./books.js";

    //FUNCTIONAL COMPONENTS
    function MyApp(){
    return (....)
    }

    ReactDOM.render(
    
    <MyApp/>,
    document.getElementById('root')
    );

    // PARENT CHILD COMPONENTS IN SEPARATE FILES <
    index.js:
    import MyInfo from "./curso/3-myInfo.js"

    3-myInfo.js:
    import React from 'react';

    function MyInfo(){
        return (...)
    }

export default MyInfo
    

    //  <
    index.js
    import React from 'react';
    import ReactDOM from 'react-dom';


    //PARENT CHILD COMPONENTS IN SEPARATE FILES
    import App from "./App.js"


    ReactDOM.render(
    <App/>,
    document.getElementById('root')
    );


    App.js
    import React from 'react';
    import Footer from './components/Footer.js';
    import Main from './components/Main.js';
    // import logo from './logo.svg';
    // import './App.css';

    function App() {
    return (
        <div>
        <Main/>
        <Footer/>
        </div>
    );
    }

    //MAIN as an example, would need also footer too
    import React from 'react';

    function Main(){
        return (
        <div>
            <h1>Alberto</h1>
        <ul>
            <li>New York</li>
            <li>Berlin</li>
            <li>Tenerife</li>
        </ul>
        </div>
        )
    }

    export default Main

export default App;

    //Styling 
    import React from 'react';

    function Header(){
        return (
            <header className="navbar">This is the header</header>
        )
    }
    export default Header
    

    //TRICKS
    Semicolons not necessary
    function Header = () => <header>This is the header</header>
    <header>This is the header{variable1+ " " + variable2}</header> 
    <header>This is the header{'$(firstName) $(lastName)'}</header> 
    

    //INLINE STYLES
    camelCase instead of - background-color = backgroundColor
    import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const date = new Date(2020,7,8,19);
  const hours = date.getHours();
  let timeOfDay;
  const styles = { 
    fontSize: 50
   }

  if(hours<12){
    timeOfDay = "morning";
    styles.color = "#bfe45b"
  }else if(hours>=12 && hours<17) {
    timeOfDay = "afternoon";
    styles.color = "#e4b228"
  }else{
    timeOfDay = "nigh";
    styles.color = "#1eb39a"
  }

  return (
   <h2 style={styles}>Good {timeOfDay}</h2>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

    

    //JSX RULES
    return single elements
    div/section/article or fragment
    use camelcase for html attribute
    className instead of class
    close every element
    formatting

    //JSX in camelcase onClick
    function Greeting(){
    return (
    <div onClick>
        <img src="" alt="" />
    </div>
    );
    };