使用npm与react和输出到浏览器时的问题

Question

我试图在浏览器和开发人员面板中查看一个基本的react文件，但是我遇到了一些奇怪的错误，有人知道发生了什么吗？我有两个文件，app.js和projects.js。我使用带有node.js cmd的npm下载了react。

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;

由于某些原因，当我检查本地主机上的浏览器和开发工具时，我会得到以下错误消息.

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

首先，每个反应组件都需要有第一个大写字母，而你忘了关闭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;

​