将npm与react一起使用并输出到浏览器时出现问题

Question

I am attempting to view a basic react js file in the browser and developer panel but I am getting weird errors, does anyone know what is happening? I have two files, app.js and projects.js. I downloaded react using the npm with node.js cmd.

APP.JS

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

class App extends Component {
  render() {


 return (
      <div className="App">
        My App
      <projects />
    );
  }
}

export default App;

PROJECTS.JS

import React, { Component } from 'react';

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

export default projects;

For some reason when I check the browser on localhost and the developer tools I get the following error message...

Failed to compile
./src/App.js
Syntax error: C:/Users/Samuel/Desktop/reactmanager/src/App.js: Unterminated JSX contents (9:18)

   7 |       <div className="App">
   8 |         My App
>  9 |       <projects />
     |                   ^
  10 |     );
  11 |   }
  12 | }
This error occurred during the build time and cannot be dismissed.
I also keep having the file path pop up in my code.


2ND ISSUE:

index.js:2178 Mixpanel error: "mixpanel" object not initialized. Ensure you are using the latest version of the Mixpanel JS Library along with the snippet we provide.

NOTE:I am using sublime text 3.

Any idea?

Answer 1

First every react component needs to have the first capital letter, and the you forgot close the div

 import React, { Component } from 'react'; import Projects from './components/projects'; class App extends Component { render() { return ( <div className="App"> My App <Projects /> </div> ); } } export default App; 

 import React, { Component } from 'react'; class Projects extends Component { render() { return ( <div className="projects"> My Projects </div> ); } } export default Projects;