Javascript 返回组件上的Reactjs错误

我正在学习React JS教程，但我发现自己有以下错误：

未能编译。 ./src/Components/Projects.js语法错误：意外标记（15:10）

返回{
`    
^     
};

但是我完全按照教程的内容来做，但是老师没有和我一样的错误

这是我的App.js文件

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

class App extends Component {
    constructor () {
        super();
        this.state = {
        projects: []
    }
}
componentWillMount () {
    this.setState({
        projects: [

            {
                title: 'Business Website',
                category: 'Web Design'
            },

            {
                title: 'Social App',
                category: 'Mobile Development'
            },

            {
                title: 'Ecomerce Shopping Cart',
                category: 'Web Development'
            }

       ]
    });
}
render() {
    return (
        <div className="App">
            My App
            <Projects projects={this.state.projects}/>
        </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“./组件/项目”导入项目；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[]
}
}
组件将安装（）{
这是我的国家({
项目：[
{
标题：“商业网站”，
类别：“网页设计”
},
{
标题：“社交应用程序”，
类别：“移动发展”
},
{
标题：“Ecomerce购物车”，
类别：“Web开发”
}
]
});
}
render（）{
返回(
我的应用程序
);
}
}
导出默认应用程序；

我的Project.js文件：

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

class Projects extends Component {

  render() {

    let projectItems;
    if(this.props.projects) {

      projectItems = this.props.projects.map(project => {

        return {

          <ProjectItem key={project.title} project={project} />

        };

      });

    }

    return (

      <div className="Projects">
        {projectItems}
      </div>

    );

  }

}

export default Projects;

import React, { Component } from 'react';

class ProjectItem extends Component {
  render() {
    return (
      <li className="Project">
        <strong>{this.props.prject.title}</strong>: {this.props.project.category}
      </li>
    );
  }
}

export default ProjectItem;

import React，{Component}来自'React'；
从“./ProjectItem”导入项目项；
类项目扩展组件{
render（）{
让投射项；
if（this.props.projects）{
projectItems=this.props.projects.map（项目=>{
返回{
};
});
}
返回(
{projectItems}
);
}
}
导出默认项目；

和我的ProjectItem.js文件：

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

class Projects extends Component {

  render() {

    let projectItems;
    if(this.props.projects) {

      projectItems = this.props.projects.map(project => {

        return {

          <ProjectItem key={project.title} project={project} />

        };

      });

    }

    return (

      <div className="Projects">
        {projectItems}
      </div>

    );

  }

}

export default Projects;

import React, { Component } from 'react';

class ProjectItem extends Component {
  render() {
    return (
      <li className="Project">
        <strong>{this.props.prject.title}</strong>: {this.props.project.category}
      </li>
    );
  }
}

export default ProjectItem;

import React，{Component}来自'React'；
类ProjectItem扩展组件{
render（）{
返回(

{this.props.prject.title}：{this.props.project.category}

);
}
}
导出默认项目；

---

我正在使用创建反应应用程序

您需要的是括号，而不是大括号：

return (
    <ProjectItem key={project.title} project={project} />
);

返回(
);

尝试删除

{}

项目项组件周围的

{}

。