javascript - purecomponent - ReactJS: React.render no es una función y React.createElement no es una función

react.createelement example

Question

Encontré un problema en mi código cuando intentaba usar estas dos funciones en mi versión React 15.2.0, sin embargo, encontré una solución alternativa, pero me gustaría saber si hay una solución mejor.

//app.jsx
var React = require(''react'');
var ThumbnailList = require(''./thumbnail-list'');
var options = {
ThumbNailData: [{
title : ''Download the ISO'',
number : 32,
header : ''Learning React'',
description: ''The best library for creating fast and dynamic websites.'',
imageUrl : ''image source''
},{
title : ''Download the ISO'',
number : 64,
header : ''Learning Gulp'',
description: ''Speed your development framework!'',
imageUrl : ''image source''
}],
};
var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector(''.container''));

Por lo tanto, cuando intento ejecutar mi archivo index.html, no se muestra nada, pero este primer error aparece en la consola: React.render no es una función . Descubrí que esto ocurre porque esta nueva versión de React necesita el dominio de reacción, es decir,

//app.jsx
var React = require(''react-dom'');
var ThumbnailList = require(''./thumbnail-list'');
var options = {
ThumbNailData: [{
title : ''Download the ISO'',
number : 32,
header : ''Learning React'',
description: ''The best library for creating fast and dynamic websites.'',
imageUrl : ''image source''
},{
title : ''Download the ISO'',
number : 64,
header : ''Learning Gulp'',
description: ''Speed your development framework!'',
imageUrl : ''image source''
}],
};
var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector(''.container''));

Ahora el problema está resuelto, pero ahora aparece el segundo problema cuando intenta ejecutar nuevamente index.html: React.CreateElement no es una función. Lo que hice fue agregar otra variable que requiera reaccionar, es decir,

var React = require(''react-dom'');
var React2 = require(''react'');
var ThumbnailList = require(''./thumbnail-list'');
var options = {
ThumbNailData: [{
title : ''Download the ISO'',
number : 32,
header : ''Learning React'',
description: ''The best library for creating fast and dynamic websites.'',
imageUrl : ''image-source''
},{
title : ''Download the ISO'',
number : 64,
header : ''Learning Gulp'',
description: ''Speed your development framework!'',
imageUrl : ''image-source''
}],
};
var element = React2.createElement(ThumbnailList,options);
React.render(element, document.querySelector(''.container''));

En pocas palabras, para resolver el problema de React.render.

var React = require(''react-dom'') 

Para resolver el problema de React.createElement

var React2 = require(''react'') 

Mis preguntas son:

1. ¿Por qué reaccion-dom creó el problema con React.createElement?

2. ¿Es por esta nueva versión de React?

3. ¿Existe un mejor enfoque para resolver estos problemas sin tener que invocar a reaccionar y reaccionar?

Cualquier pensamiento y comentarios son apreciados;)

Answer 1

En primer lugar, desde React v0.14, existe este nuevo paquete llamado react-dom . Abstrae el "entorno" que ejecutará React y, en su caso, es el navegador.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

Entonces, dado que ahora tiene dos paquetes: " react " para crear sus componentes React y " react-dom " para "integrar" Reaccionar con el navegador, debe llamar a los métodos correctos que proporciona cada uno de ellos.

Luego, respondiendo a tus preguntas:

¿Por qué reaccion-dom creó el problema con React.createElement?

El paquete que tiene React.createElement es react y no react-dom .

¿Es por esta nueva versión de React?

Sí, ya no puede llamar a React.render (del paquete react ), necesita usar ReactDOM.render (del paquete react-dom ).

¿Existe un mejor enfoque para resolver estos problemas sin tener que invocar a reaccionar y reaccionar?

No lo veo como un "problema", solo necesita saber que hay un paquete específico para manipular DOM. Además, es un patrón "bueno", porque si en algún momento desea renderizar sus componentes como HTML (para renderizarlo usando un servidor), solo necesita adaptar algunas cosas y su código será el mismo.

Answer 2

Estaba recibiendo un error: "React.createElement no es una función" y para mi situación, la solución fue cambiar esto:

import * as React from "react";
import * as ReactDOM from "react-dom";

A ESTO:

import React from "react";
import ReactDOM from "react-dom";

Esto estaba en un archivo de TypeScript, así que no estoy seguro de que se aplique o no a TypeScript.