Exporting the App.js Lack Of Instruction


#1

During conclusion there is this section:

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.

Currently I have this in my App.js, but it doesn’t render the App component. There are never any instructions around the Codecademy lessons to explain how to export a component as a browserify component to be used else where. The instructions are quite vague and I cannot find any Google answer to this.

import React from 'react';

class MyComponentClass extends React.Component {
  render() {
    return (
      <h1> Blah Blah </h1>
    );
  }
}

module.exports = MyComponentClass;


Can anyone offer any help with this?

EXTRA:

Javascript.js

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

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

#2

Hey Dominic,

I was having this exact same problem and it was driving me crazy. I used this guide to come up with the following code that now (after many hours of hair-pulling) renders correctly in my browser:

//App.js

var React = require('react');

class App extends React.Component {
    render() {
        return <h1>Testing, testing. 1 2 3.</h1>;
    }
}

module.exports = App;

It seems the only difference from your code is in the first line, where I used var React = require('react') rather than import React from 'react'.

I hope the wonderful folks at Codecademy update the tutorial with some working code, or at least explain that what we’re expected to write isn’t quite what we’d learned in the previous tutorials.

Anyways, hope this helps. Good luck!


#3

Ahhh nice one! I haven’t given this a try yet but will hopefully get around to it on Monday! I will let you know what this yelds. Hopefully Codecademy do update this tutorial in just this area!


#4

Absolutely perfect; thank you ever so much. It now works successfully! You are an absolute hero!


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.