По какой причине мой элемент не будет отображаться?

Question

Просматривая документацию. Я пытался отрисовать этот элемент элемента searchCard примерно тремя различными способами, которыми я продолжаю получать 'searchCard' определяется, но никогда не использовался, или в этой последней попытке React.DOM.render я получаю ошибки компиляции.

Это приложение реакции, встроенное в codesandbox

Я пробовал другие методы и функции рендеринга.например

 class searchCard extends Component {

 } 

 OR

 const searchCard = () => (); 

 OR

 const searchCard = props => ();

Это файл searchCard.js

import React from "react";

import "bootstrap/dist/css/bootstrap.css";
import react from "react-dom";
React.DOM.render(
  <div class="card">
    <h5 class="card-header">Featured</h5>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">
        With supporting text below as a natural lead-in to additional content.
      </p>
      <a href="/" class="btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div>
);

Это файл index.js

`
import React from "react";
import ReactDOM from "react-dom";
import searchCard from "./components/Toolbar/searchCard/searchCard";

function App() {
  return (
    <div className="App">
      <Toolbar>
        <TopLinks />
        <SplashScreen />
        <Hpbg />
      </Toolbar>
      <searchCard />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`

TypeError Не удается прочитать свойство 'render'undefined оценивать /src/components/Toolbar/searchCard/searchCard.js:4:10

`
  1 | import React from "react";
  2 | import "bootstrap/dist/css/bootstrap.css";
  3 | import react from "react-dom";
> 4 | React.DOM.render(
    |          ^
  5 |   <div class="card">
  6 |     <h5 class="card-header">Featured</h5>
  7 |     <div class="card-body">
`

оценивать /src/index.js:8

`
   5 | import "./styles.css";
   6 | import Hpbg from "./components/Toolbar/Hpbg/Hpbg";
   7 | import SplashScreen from "./components/Toolbar/SplashScreen/SplashScreen";
>  8 | import searchCard from "./components/Toolbar/searchCard/searchCard";
   9 | 
  10 | function App() {
  11 |   return (
`

Answer 1

Вы можете написать свой компонент следующим образом,

import React from 'react';
class SearchCard extends Component {  // Use PascalCase for class name
   render(){
       return(
         <div class="card">
           <h5 class="card-header">Featured</h5>
           <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">
             With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="/" class="btn btn-primary">
              Go somewhere
            </a>
           </div>
       </div> 
       )
   }
}
export default SearchCard;

В index.js файле import Ваш компонент таким образом,

import SearchCard from "./components/Toolbar/searchCard/searchCard"; //Try to use PascalCase for component import. Also make sure you are importing from correct path. 

И, наконец, использование,

<SearchCard />