I’m finding that if I don’t import React in the same place where I import render from react-dom, calls to render fail with the complaint that React isn’t defined.
My imports look like this:
import { Meteor } from 'meteor/meteor'; import { render } from 'react-dom'; import React from 'react'; import App from '../../ui/components/App.jsx';
Removing the React import results in the error.
Does that file use any JSX?
I think the Using Blaze with React section should be renamed to Using React Components in Blaze and that we should have a corresponding Using Blaze Templates in React. Or something along those lines.
My preferred (and biased) way of doing this is with my gadicc:blaze-react-component, which looks like this:
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
<div>
<Blaze template="itemsList" items={items} />
</div>
);
Alternatives include:
Both are for Meteor 1.2 and have hard dependencies on meteor-react. The former involves first converting the template in JS, and then using the newly created Component directly, whereas I preferred to have a single step and be clear that I’m using a Blaze component. I did however offer the same ability in case package authors wanted to use it. For the component syntax, I tried to keep it short and similar to react-template-helper.
I’m happy to do a PR for this if there’s a consensus around the approach, and/or open a separate topic for further discussion. I’m also happy to ‘donate’ the code to the Meteor namespace; I’m not too interested in maintaining another package, just felt it import to have something that works well straight away with 1.3.
1 reply
Yes, it is required that React be defined if you use JSX. There’s an eslint rule that picks this up (see the code style guide article for how to use eslint if you are interested): https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
