Solución:
La respuesta de Sol explica por qué no se ejecuta la sencilla aplicación de saludo. La mejor práctica en el último React.js a partir de enero de 2017 es importar
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
y tener el tipo de secuencia de comandos establecido en text/babel.
Con esto, puede ejecutar JSX normalmente, por ejemplo
class Greeting extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<p>Hello, Universe</p>
);
}
}
Lo que te falta es incluir algo que transforme el JSX en JS. Debe incluir JSXTransformer.js. También observe que React.render no usa document.body, debería ser un elemento dom. Aquí hay un ejemplo que debería funcionar:
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="greeting-div"></div>
<script type="text/jsx">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello, Universe</p>
)
}
});
React.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
Solo pensé que compartiría mi solución con todos. Quería configurar un proyecto simple sin todos los npm, nodos guff, como el OP, estaba teniendo problemas, me tomó tres horas averiguarlo, a continuación está mi solución.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boy</title>
<link rel="stylesheet" type="text/css" href="https://foroayuda.es/css/app.css">
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type ="text/babel" src="js/app.js"></script>
</head>
<body>
<div id="root">Loading...</div>
</body>
</html>
La clave es incluir los archivos de script apropiados de React y Babel. Estoy usando un archivo app.js externo, si desea hacer esto, recuerde incluir type = “text / babel”.
Una vez hecho esto, puede ejecutar el ejemplo de hola mundo de React. Mi archivo app.js:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Archivo CSS:
#root {
color: skyblue;
}
Espero que esto ayude.