Writing React in sublime Text 3

Writing React in sublime Text 3
0

#1

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

import React, { Component } from 'react';

class Recipe extends Component{
	render(){
		return (
			<div> recipe </div>

			);

	}
}

export default Recipe;

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React App</title>
  </head>
  <body>
  <div id="root"></div>


   </body>
</html>

#2

As I see it, you have two problems in your App.js:

import React { Component } from 'react';
import Recipe from '.Recipe';

should be:

import React, { Component } from 'react';
import Recipe from './Recipe';

with one character on each line. I’m surprised you didn’t get an error message.


#3

I actually caught that earlier before I decided to call it for a day. Did not help anything as far as showing up, but at least it’s correct.


#4

Well, when I make those two changes, it runs on my system. I don’t know anything about Sublime, but it runs fine in node/create-react-app.


#5

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


#6

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


#7

That’s the one I downloaded. The highlighting was fixed, but still no luck of getting anything to show.


#8

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?)


#9

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?


#10

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!