反应组件未显示

Question

I'm trying out the examples in a book called Fullstack React . I don't know why the Product component isn't showing. I'm also a newbie to React and StackOverflow . Sorry for the mistakes I might make.

class Product extends React.component {
  render() {
    return (
      <div className='item'>
        <div className='image'>
          <img src='images/products/image-aqua.png' />
        </div>
        <div className='middle aligned content'>
        <div className='description'>
          <a> Fort Knight </a>
          <p> Authentic renaissance actors, delivered in  just two weeks.</p>
        </div>
        <div className='extra'>
          <span> Submitted by:</span>
          <img 
            className='ui avatar image'
            src='images/avatars/daniel.png'
          />
        </div>
      </div>
    </div>
      );
  }
}

class ProductList extends React.Component {
  render() {
    return (
      <div className='ui unstackable items'>
        <Product />
      </div>
    );
  }
}

And it also uses the semantic framework.

Answer 1

React.component should be React.Component

You can also import Component at the same time as main React, eg

import React, { Component } from 'react'