2

Im begining to learn react and i having problems importing a complement. It does not show on the app nor shows any error. This is the complement code:

import "bootstrap/dist/css/bootstrap.css";

const cardComponent = () => {
  return (
    <div className="card">
      <img className="card-img-top" src="..." alt="Card image cap" />
      <div className="card-body">
        <h5 className="card-title">Card title</h5>
        <p className="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" className="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  );
};

export default cardComponent;

And the app code is this:

import "./App.css";
import cardComponent from "./component/cardComponent";

const App = () => {
  return (
    <div className="App">
      <cardComponent />
    </div>
  );
};

export default App;

Any tip would be apreciated

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Ruso701
  • 23
  • 4

2 Answers2

2

Let me try to give you some tips:

Always start with:

   import React from 'react';

put the first sentence in capital like this:

 const CardComponent = () => {
  return (
   .
   .
   .

   export default CardComponent;

And in the App page you just import like this:

import CardComponent from './components/molecules/Card';

 const App = () => {
 return (
  <div className="App">
   <CardComponent />
  </div>
  );
 };
export default App;

I learned react with Typescript, so some it makes easier to avoid some issues, if you feel like it, I would advise to learn them together.

Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
Luthermilla Ecole
  • 666
  • 1
  • 6
  • 14
0

This post solved the issue ReactJS component names must begin with capital letters? the error was not naming the compononent with initial capital letter

As was said in the answer to this post and this answer given in the post mentioned before. React (jsx files) distinguishes tags between proper react components and html by their first letter (if it its capital it reads as a React component so:

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)

also

<obj.component /> compiles to React.createElement(obj.component)
Ruso701
  • 23
  • 4