React Setup Part V


#1

https://www.codecademy.com/articles/react-setup-v

I’ve worked my way through this series of articles fairly successfully - a few minor hiccups, all resolved along the way. I’m to the point where I’m testing whether this works or not, and I think my understanding of react is just lacking a bit and that’s the problem. I’m not getting any errors, npm build and npm run seem to be working just fine and the page spins up on my local. The problem is, I can’t get anything to render outside of the the title and I’m not really sure how to go about this. I have a feeling it may have something to do with this last paragraph, which seems important but offers no further explanation and I’m just not sure what he’s talking about:

“In app/components/App.js, write a component class. This component class can render whatever you want. Don’t forget to require React at the top of the file, and to set module.exports equal to your component class at the bottom of the file.”

The line in bold is what I really just don’t understand, and ultimately I don’t really understand what needs to be in App.js in order for it go through the process of rendering a component to the browser.

If someone could offer some insight here, or really just give a very simple example of specifically what needs to be in the App.js file to get this running, I would be extremely appreciative.


#2

that bit is easy:

var React = require('react')

and maybe you also need ReactDOM:

var ReactDOM = require('react-dom')

then from the instructions, In app/index.js, copy the following code:

you can see we import App component, so in app/components/App.js we need to export <App /> component class so it can be imported by app/index.js

you can’t import something that isn’t exported


#3

Thanks for the reply. So I’ve done everything you mention above, but none of it seems to make a difference so I’m really just thinking/hoping there’s some sort of simple bit of code I’m unaware of to make this render. I understand that you can’t import something without exporting it but I’m still not clear where / at which point we’re exporting this. Here’s the literal code I have in the respective files, maybe this will shed some light:

In app/index.js:

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');

ReactDOM.render(
	<App />,
	document.getElementById('app')
);

In app/components/App.js:

var React = require('react');
var ReactDOM = require('react-dom');

const Button = function () {
	return (
		<button>test</button>
	);
};

Hopefully there’s a glaring omission in one of those snippets that clears this up. And for extra clarity on the line I initially quoted as being confusing to me, particularly this part of it is what I don’t understand more than anything else: “…and to set module.exports equal to your component class at the bottom of the file.”


#4

In app/components/App.js nothing is exported? So how can app/index.js import it?


#5

That’s sort of my question haha. Clearly it needs to be exported but I can’t find anywhere in the guide where that gets touched on so the author either doesn’t cover it and makes the bad assumption that the reader just knows, or he mentions it but in a way that was not clear to me. Either way, this seems like a pretty important piece to make this work. I’m 100% a complete novice to react so please forgive me if there are obvious issues here that I’m just ignorant to.

I tried adding this to the bottom of App.js to see if it would help, but I’m just throwing darts at this point so not surprised it made no difference:

ReactDOM.render(
	<Button />,
	document.getElementById('app')
);

#6

you need to export:

how come the article still uses es5? all the courses on codecademy got updated to es6. Either way, should be possible to find how to export and import using google


#7

Well… thanks for the attempt. I think I’ll just try and find a different tutorial. Nothing at that link is helping, the syntax some of them are using differs noticeably from what is used in the tutorial, and I’m still just a bit too uncomfortable with react in general to understand everything they’re talking about in that thread. At least I got the pieces installed, hopefully that will give me a leg up on my next attempt.

Codecademy should enable user reviews of these articles so they can identify blind spots and also remove articles that may be out of date.


#8

codecademy also has react course? Maybe its wise to take that, not only read articles. Let me see if i can fix your problem


#9

even installing react, i get es6. Anyway, here:

const Button = function () {
	return (
		<button>test</button>
	);
};

you can just add an export:

export default Button;