I'm trying to use React.js component without JSX and receive such warning:
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
I've visited link but suggested createFactory
solution didn't help me :/
app.js
var React = require('react/addons');
var TagsInput = React.createFactory(require('./tagsinput')); // no luck
var TagsComponent = React.createClass({
displayName: "TagsComponent",
saveTags: function () {
console.log('tags: ', this.refs.tags.getTags().join(', '));
},
render: function () {
return (
React.createElement("div", null,
React.createElement(TagsInput, {ref: "tags", tags: ["tag1", "tag2"]}),
React.createElement("button", {onClick: this.saveTags}, "Save")
)
);
}
});
React.render(React.createElement(TagsComponent, null), document.getElementById('tags'));
tagsinput.js
https://raw.githubusercontent.com/olahol/react-tagsinput/master/react-tagsinput.js
I cannot figure out what is the problem here?
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React. createElement(component, props, ...children) .
You cannot import python files in react, you need to make a back-end server and make requests or something like that. Flask and FastAPI are popular, small-ish backend frameworks you can use to create a small web service to make your Python functions available as services in the background.
Learning server rendering will enable you to develop components on a server and render them as HTML in your browser; after all of the JavaScript modules download, React will take the stage. This is one of React's best features, and it can be utilized with any backend technology.
React.createClass(spec)
returns a component.
React.createElement(component, props, ...children)
creates an element.
React.createFactory(component)
returns a factory function, which can be used to create an element.
React.createFactory(a)(b, c, d)
is the same as React.createElement(a, b, c, d)
.
You get the warning when you call a component directly, like component()
. If you want to call it like a function, use createFactory
var factory = React.createFactory(component);
var element = factory(props, ...children);
Or use createElement:
var element = React.createElement(component, props, ...children);
In 0.13 this will give an error instead of a warning:
var element = component(props, ...children);
Also because React.DOM is going away, you should create dom elements the same way you create component based elements
Edit: looks like React.DOM is sticking around for now.
var div = React.createFactory('div');
var element = div(props, ...children);
// or
var element = React.createElement('div', props, ...children);
Bold used to show consistent terms. ...children
means any number of child arguments
You need to wrap all of your child components in createFactory
as well, I was able to get your code to run without that specific warning by wrapping Tag
and Input
in createFactory
.
jsbin
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With