javascript - 使用 npm 进行 react 并输出到浏览器时出现问题

Question

我正在尝试在浏览器和开发人员面板中查看基本的 React js 文件，但遇到奇怪的错误，有人知道发生了什么吗？我有两个文件:app.js 和projects.js。我使用 npm 和 node.js cmd 下载了 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;

项目.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

首先，每个React组件都需要有第一个大写字母，并且你忘记关闭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;