Страница не отображается в React. js

Question

Я пытаюсь создать целевую страницу на основе React. js, но после всего, что я сделал с реагировать. js bootstrap страница не отображается, а отображается только как исходная страница реакции по умолчанию;

вот приложение. 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();

Мне было интересно, есть ли какой-то файл, который я пропустил для импорта или экспорта, так как я новичок в React. js, пожалуйста, помогите спасибо!

Answer 1

Из вашего кода видно, что ваш компонент приложения будет отображаться в DOM.

Вы также ищете свой Пример компонента ?? Затем вам нужно сначала включить ваш пример компонента где-то в сам компонент APP (импортировать пример в приложение. js) , а затем отобразить ваш компонент приложения в DOM в индексе. js

Answer 2

эй, вы визуализируете компонент приложения здесь, эта строка делает это ReactDOM.render(<App />, document.getElementById('root'));

, если вы хотите визуализировать пример компонента, вам нужно поместить его в файл приложения. js, как показано ниже

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;

добавлено приложение экспорта по умолчанию в нижнем ответе обновлено

Answer 3

, поэтому вы отображаете исходное приложение на странице: ReactDOM.render(<App />, document.getElementById('root'));

Если вы настраиваете файл приложения, а не в индексе, например,

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;

Затем его следует отобразить на странице.

Answer 4

Желаемый результат может быть достигнут следующим образом:

Компонент приложения:

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