CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-bootstrap
jennie
jennie

Reputation: 33

Page not showing in React.js

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!

Upvotes: 1

Views: 7805

Answers (5)

Andrew I
Andrew I

Reputation: 1

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

Upvotes: 0

Mikhail Nikiforov
Mikhail Nikiforov

Reputation: 51

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();

Upvotes: 0

warmachine
warmachine

Reputation: 376

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

Upvotes: 1

Gaurav
Gaurav

Reputation: 2018

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

Upvotes: 1

user11069136
user11069136

Reputation:

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, e.g.

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.

Upvotes: 1

Related Questions