javascript - logo - react js vs angular
React Component no está renderizando: React js (2)
Lo siguiente funciona bien, pruébalo:
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById(''test''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test" ></div>
Estoy tratando de reaccionar usando el código siguiente, pero no obtengo el elemento html en el navegador. No hay ningún error en la consola.
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var reactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<reactTest />,document.getElementById(''test''));
</script>
</body>
</html>
¿Alguien puede ayudarme con esto?
Si el Class name Reaccionar comienza con una letra lowercase , no se llama a ningún método dentro de la class , es decir, no representa Renders, y no aparece ningún mensaje de error en la consola del navegador, porque las letras pequeñas se tratan como elementos HTML , es una regla que todos los React components deben comenzar con una letra mayúscula, así que siempre use Upper Case.
En lugar de reactTest usa esto: ReactTest funcionará.
Según DOC :
Los componentes definidos por el usuario deben estar en mayúscula.
Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente incorporado como oy da como resultado una cadena ''div'' o ''span'' pasada a React.createElement. Tipos que comienzan con una letra mayúscula como compilar a React.createElement (Foo) y corresponden a un componente definido o importado en su archivo JavaScript.
Recomendamos nombrar los componentes con mayúscula. Si tiene un componente que comienza con una letra minúscula, asígnelo a una variable en mayúscula antes de usarlo en JSX.
Verifique el código de trabajo:
<!DOCTYPE html>
<html>
<head>
<title>React without npm</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var ReactTest = React.createClass({
render: function(){
return(
<h1>React Without NPM</h1>
);
}
});
ReactDOM.render(<ReactTest />,document.getElementById(''test''));
</script>
</body>
</html>