import miLogo from './logo.svg';//Aqui le pones el nombre que quieras al obj como si fuera variable
import './App.css';//esto es un include al css

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';//Esto permite controlar las rutas para que sea una "one page app" y no tenga que hacer refresh con el servidor cada vez que cambie de pagina

import Menu from "./Menu"; //esto importa el menu de otro componente "hijo"

//Aqui empieza la multi page app, las distintas pestañas
import HooksYEvents from "./HooksYClickEvents"; //esto importa el menu de otro componente "hijo"
import Arrays from "./Arrays"; //Esto muestra una lista de blogs y como iterar arrays
import RutaVariable from "./RouteVariable"; //este muestra entradas especificas de la BDD
import InputsYForms from "./InputsYForms"; //aqui se guardan datos a la BDD
import NotFound from "./404";//todas las demás paginas no encontradas


function MiComponente1() {
	//aqui puedes escribir todo el js que quieras
	const title = 'Uso basico:';
	let number = Math.floor(50/7);
	const person = { name: 'yoshi', age: 30 }; //No se vale escribir objetos!
	const link = 'http://www.google.com';
	var ColorFondo="lightgreen";

  return (
    <Router>{/*Esto quiere decir que tu app va a manejar los uris de la pag web*/}
      	<div className="App">
			<Menu />{/* esto agrega el componente hijo. el /> se llama self closing tag y es lo mismo que <Menu></Menu> en principio*/}
			<div className="content">
				<Switch>{/*Lo que esta aquí dentro va a cambiar entre pestañas segun la uri*/}
					<Route exact path="/">{/*Le pones exact porque si no siempre se muestra en cualquier uri que tenga un / slash */}
						<hr style={{marginTop:"5px",marginBottom:"30px"}} />
						<h1>{ title }</h1>
							<p>Result: { number }<br />{/*Asi se pone el <br> en JSX aunque puedes usarlo igual en html*/}
							{/*Se vale escribir código directo dentro*/}
							Puedes poner JS entre {"\{\}"} y sale el resultado de 8x10: { 8*10 },</p> {/*Los <br> son dobles en JSX*/}
							<p>{ [1,"Dos",3,"4to",5] } (si es un array lo pega)</p>
							<p>E incluso puedes usar funciones propias y nativas, hace el echo: { todopor10(Math.random()) } (todopor10(Math.random())
						</p>
						<hr className="separasecciones"/>
						<p>
						<a href={link} style={{/*Se usan {{ para inline style en JSX porque es un objeto*/
									color: "blue",/*separas con , en vez de ; porque es un objeto no css... */
									padding: "5px",
									paddingTop: "10px",/*los valores de CSS que llevan - van en camel case z.b. background-color es backgroundColor*/
									backgroundColor: ColorFondo /*Puedes usar variables de JS*/
								}}>Link dinamico por JS</a>
						</p>
					</Route>
					<Route path="/hooks">{/*al no ser exact, si la uri hace match parcial se iria aqui, por ejemplo /hoo mostraria este */}
						<HooksYEvents />
					</Route>
					<Route exact path="/arrays">
						<Arrays />
					</Route>
					<Route exact path="/base">{/*Le pones exact porque si no siempre se muestra en cualquier uri que tenga un / slash */}
						<App />
					</Route>
					<Route exact path="/input">
						<InputsYForms />
					</Route>
					<Route path="/blogs/:id">{/*esto pasa la variable llamandola id a la ruta*/}
              			<RutaVariable />
            		</Route>
					<Route path="*">{/*Esto se pone al final, es un comodin que seria el 404*/}
              			<NotFound />
            		</Route>
				</Switch>
			</div>
		</div>
	</Router>
	  

  );

}

function todopor10(valor){
	return valor*10;
}

function App() {
	return (
    <div className="App">
      <header className="App-header">
        <div>{/*Con className haces las clases de html porque class esta reservado en js*/}
			<h1 className="miclase">Mi primer componente llamado "App"</h1>
			<img src={miLogo} className="App-logo" alt="logo" />{/*asi el objeto lo llamas*/}
       </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default MiComponente1;//App; //solo se vale exportar una función por modulo, este es el original