So I am just starting out with react, and at the moment im just trying to render the word recipe. However nothing shows up. I am using sublime text 3, and I have downloaded the babel plugins. In my sublime though when I go to return the div with the word recipe, anything after the backslash closing div tag doesnt seem to work
What I have. My index
import React from 'react';
import ReactDom from 'react-dom';
import app from '.app';
ReactDOM.render(<app />, document.getElementById('root'));
My app
import React { Component } from 'react';
import Recipe from '.Recipe';
class app extends Component {
render() {
return (
<Recipe />
);
}
}
export default app;
All formatting just turns green after the closing tag
I don’t see anything wrong with your code. As far as syntax highlighting for React in Sublime Text 3, I found it was best to just set Sublime Text to open all JS and JSX files as “JavaScript (Babel)”. IIRC (could be wrong), it might be this package: https://packagecontrol.io/packages/Babel
I was using cloud9 at first, but tried to switch back over to sublime because that’s what I have been using. When I had everything in one file it ran fine, but now importing just doesn’t work
I noticed that you don’t have React added as a script in your HTML, that might be part of the reason nothing happens… (and your custom JS code isn’t added in there either?)
That’s a good point, but it really depends on how his environment is setup. For example, my CRA apps don’t have React added as a script in the HTML. And if it were the case I would really expect some kind of an error message.
I guess we need to know more about the environment. Are you able to push a repo up to github so we can try it out?
It is possible, but I have decided to go back over to cloud9. That way I know it will run, and I can continue to learn react. In the mean time I will just have to do more research, and figure out whats causing the problem of the html not rendering. That can wait though…the biggest ting right now is making sure I understand react. Thank you for the help!