Page not showing in React.js

Question

I am trying to build a landing page based on React.js but after everything I did with react.js bootstrap the page is not showing but only showing as the original default react page;

here's the App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

ReactDOM.render(<App />, document.getElementById('root'));
const Example = (props) => {
  return (
<Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
  );
};

export default Example;[enter image description here][1]
serviceWorker.unregister();

I was wondering is there some file that i missed to import or export since i am new to React.js, please help thanks!

Answer 1

so you are rendering the original App to the page: ReactDOM.render(<App />, document.getElementById('root'));

If you customise the App file rather than in the index, eg

function App() { = (props) => {
  return (
<Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
  );
};

export default App;

It should then be rendered on the page.

Answer 2

I can see from your code that your App Component will render to the DOM.

Are you also looking for your Example component ?? Then you need to first include your Example Component somewhere into APP Component itself (Import Example in app.js) and then render your App component to DOM in index.js

Answer 3

hey you are rendering the app component here this line is doing that ReactDOM.render(<App />, document.getElementById('root'));

if you want to render Example component ,you need to put it inside App.js file like below

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
   <Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>``
</Card>
  );
}

export default App;

add export default App in bottom answer updated

Answer 4

Desired result can be achieved like this:

App component:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";

const App = (props) => {
  return (
<Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
  );
};

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

ReactDOM.render(<App />, document.getElementById('root'));

export default Example;

// [enter image description here][1]
serviceWorker.unregister();

Answer 5

If there is no error on your terminal, check your index.css. Most probably the global styling has blurred out the rendered elements.