¿Hay algún problema con la forma en que importé reaccionar o simplemente me estoy perdiendo algo pequeño? Cualquier comentario sería muy apreciado. Soy bastante nuevo en la programación, por lo que probablemente haya una solución realmente simple aquí que simplemente no estoy lo suficientemente informado como para ver. Gracias.
Editar: después de eliminar la parte comentada del cuerpo, el componente aún no se procesa. me sale este error
Error de sintaxis no detectado: token inesperado '<' (en index.html:22:13)
¿Puede el archivo no entender que estoy tratando de usar un componente de reacción? Gracias.
2da edición: Lo resolví, me faltaba type="text/babel" en el elemento del script.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <!-- React Import --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <title>Markdown Previewer</title> </head> <script> class App extends React.Component { render() { return( <div class=""> Hi </div> ); } } ReactDOM.render(<App/>, document.getElementById('app')); </script> <body> <!--<wrapper> <div id="app"></div> <textarea name="name" rows="8" cols="80" id="editor"></textarea> <div id="preview"></div> </wrapper>--> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> </body> </html>eliminar las llaves de los comentarios: <!-- -->
y escribe solo:
<wrapper> <div id="app"></div> <textarea name="name" rows="8" cols="80" id="editor"></textarea> <div id="preview"></div> </wrapper>