Configurar entorno de playcode

Entra en el link de abajo para construir tú mismo el app de Costa Rica

Crea tu proyecto de React!

Al darle click al boton entraras en la pagina de playcode

alt text height=“200px” width=“50%”

Le damos en Start Free

En el archivo "App.jsx" pegamos este codigo!

import React from 'react';

export function App(props) {
  return (

      );
}

En el archivo "indext.jsx" pegamos este codigo!

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

import { App } from './App.jsx'

ReactDOM.createRoot( 
  document.querySelector('#root')
).render(<App />)

En el archivo "indext.html" pegamos este codigo!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div id="root"></div>

    <script src="src/index.jsx"></script>
  </body>
</html>

Creamos un archivo llamado "style.css"

alt text height=“200px” width=“50%”

Antes de ver todos los elementos necesarios para crear nuestro proyecto de Costa Rica tenemos que configurar o mas que todo crear una carpeta importante.

Le vamos en los 3 puntos a la par de la carpeta main llamada "src"

alt text height=“600px” width=“70%”

Luego seguimos los siguientes pasos:

"New", "Directory"

alt text height=“600px” width=“70%”

Ya tenemos la carpeta creada ahora le damos en los 3 puntitos y rename

alt text height=“600px” width=“70%”

Listo tenemos la carpeta de Components creada estamos casi listos!!

alt text height=“600px” width=“70%”

Por ultimo debemos agregar archivos jsx para poder ir construyendo nuestro proyecto

Para eso igual le damos en los 3 puntitos pero ahora en la carpeta "Components"

Importante seleccionar el archivo "JSX"

alt text height=“600px” width=“70%”

Asi debe de quedar nuestro neuvo archivo llamado: "Torguero.jsx"

Tortugero.jsx

Isla Tortuguero​​ es una isla que pertenece al país centroamericano de Costa Rica​​ se ubica entre el mar Caribe y laguna homónima, posee una superficie estimada en 2.810 hectáreas.​

alt text height=“600px” width=“70%”