Adding a template to React Component - meteor-accounts

Question

Im using the login example from the Meteor React Tutorial
meteor add accounts-ui accounts-password
Its all ok but Im trying to find the file and change it but I dont know where is it.
This is my code:
import { Blaze } from 'meteor/blaze';
export default class AccountsUIWrapper extends Component {
componentDidMount(){
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render(){
return <span ref="container"/>
}
}
And i have installed meteor add useraccounts:materialize
How can I put the template on this?

Answer 1

You need to put your component inside /imports/ui/ directory and name the file as AccountsUIWrapper.jsx
So it will be saved as /imports/ui/AccountsUIWrapper.jsx.
Then you can import your wrapped component inside /imports/ui/App.jsx file with:
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
And then use it in your React render function in the same file as:
<AccountsUIWrapper />
The tutorial lays it out pretty clearly, including all the filenames and locations. You should be able to access their GitHub repository for the same.
If you want, for reference, you can also take a look at my code at this particular step back when when I did this tutorial myself.
Update: For useraccounts:materialize
The useraccounts:materialize package that you have mentioned depends on useraccounts:core package as its base. So you cannot apply useraccounts:materialize to default meteor accounts package directly.
Follow the instructions on useraccounts:core to set it up. You may need to remove accounts-ui as well, as it would likely clash with the above packages.
Then, go through the documentation for useraccounts that shows how to render their accounts template in Blaze.
After that, using the same way as shown in the tutorial, you should be able to create a new React wrapper for useraccounts:materialize Blaze template.
Here are links to boilerplate useraccounts:materialize code for Iron Router and Flow Router. From these you can take reference for the Blaze template code, which you can then wrap in React:
Boilerplate with iron:router
Boilerplate with FlowRouter