Reactjs 如何使用新语法编写和响应？

基本问题。我正试图以新的方式重新编写旧的

React-Skeleton

项目，但在使其工作时遇到了问题。我做错了什么

旧方法

var React = require('react');
var ListItem = require('./ListItem.jsx')

//Component
var ingredients = [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"},]

//Component
var List = React.createClass({
  render: function() {
    var listItems = ingredients.map(function(item) {
      return <ListItem key = {item.id} ingredient = {item.text} />
    });
    return ( <ul>{listItems}</ul> );
  }
});

module.exports = List;

var React=require（'React'）；
var ListItem=require（'./ListItem.jsx'）
//组成部分
var Components=[{“id”：1，“文本”：“火腿”}，{“id”：2，“文本”：“奶酪”}，{“id”：3，“文本”：“面包”}，]
//组成部分
var List=React.createClass({
render:function（）{
var listItems=Components.map（函数（项）{
返回
});
返回（
{listItems}
）；
}
});
module.exports=列表；

新方法

import React from 'react';
import ListItem from './ListItem.jsx';

const ingredients = [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}];

class List extends React.Component {

  render() {
    const listItems = ingredients.map((item) =>
      <ListItem key = {item.id} ingredient = {item.text} />
    );

    return (
      <ul>{listItems}</ul>
    );
  }
};

从“React”导入React；
从“./ListItem.jsx”导入ListItem；
const-components=[{“id”：1，“text”：“Ham”}，{“id”：2，“text”：“Cheese”}，{“id”：3，“text”：“Bread”}]；
类列表扩展了React.Component{
render（）{
const listItems=配料图（（项目）=>
);
返回(
{listItems}
);
}
};

---

我是新手，所以如果我的错误是基本的，请原谅我。提前感谢。

如您在这里介绍的，无状态组件不会作为类编写。相反，您更可能将其视为一个文档

什么Exxtly不起作用？什么不起作用？是否需要导出默认列表？错误：解析文件/卷/备份/游乐场/JS/u udemy\u react/react骨架更新/src/components/List.jsx:“导入”和“导出”只能与“sourceType:module”（21:0）一起出现我也在尝试理解我写的是否正确。谢谢你，我将尝试。在你的方法中，如果我决定在单独的文件中创建这两个组件，我将如何导出它<代码>导出默认组件名称？如何组织模块取决于您。如果我使用默认导出，那么这通常是将写入该文件的唯一组件。其他分类相似的组件在同一个文件中并排存在，并被整体导出-在这种安排中，我不会指定默认导出。非常有趣。谢谢你的帮助。

import React from 'react'

import ListItem from './ListItem'

const ingredients =
  [{ "id": 1, "text": "Ham"}, { "id": 2, "text": "Cheese"}, { "id": 3, "text": "Bread"}]

const List = props =>
  <ul>{ingredients.map (item =>
    <ListItem key={item.id} ingredient={item.text} />)}</ul>

export default List