Why am I getting a blank white screen when trying to import a class from another file using React

So, I'm new to the React framework and I am having a problem that is causing me to have trouble debugging.

I am trying to import a class from another component to another file in my project in my app.js. This class does nothing right now, but displays the text "My Projects" on the page.

When I instantiate in app.js using <Projects/>

my app goes from displaying text in app.js (My App) to a blank white screen.

I expect it to display the text "My Application" and then "My Projects" on the next line. What am I missing?

Here is the app.js app:

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';

class App extends Component {
 render() {
  return (
  <div className="App">
    My App
    <Projects/>
  </div>
    );
  }
} 

export default App;

      

And here's Projects.js:

import React, { Component } from 'react';

class Projects extends Component {
  render() {
    return (
      <div className="Projects">
        My Projects
      </div>
    );
  }
}

export default Projects;

      

Here is the error coming from the dev console:

invariant.js:44 Uncaught Error: Invalid tag: data:application/octet-stream;base64,aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IG…MKICAgICAgPC9kaXY+IAogICAgKTsKICB9Cn0KZXhwb3J0IGRlZmF1bHQgUHJvamVjdHM7Cg==
at invariant (invariant.js:44)
at validateDangerousTag (ReactDOMComponent.js:345)
at new ReactDOMComponent (ReactDOMComponent.js:372)
at Object.createInternalComponent (ReactHostComponent.js:41)
at instantiateReactComponent (instantiateReactComponent.js:79)
at instantiateChild (ReactChildReconciler.js:44)
at ReactChildReconciler.js:71
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildrenImpl (traverseAllChildren.js:93)
at traverseAllChildren (traverseAllChildren.js:172)

      

And here's a picture of the product structure:

http://imgur.com/a/BKTK3

+3


source to share


1 answer


Since you saved the code for the component Projects

in a file without an extension .js

, it was loaded as a text file. Since the text starts with a lowercase letter data:application...

, it is treated as a custom element with an invalid name, hence the Invalid tag

error.



+1


source







All Articles