设置React Bootstrap中的问题

时间:2019-01-04 14:40:10

标签: reactjs twitter-bootstrap

我刚刚开始学习,请按照此处的教程进行操作:

react-bootstrap getting started

安装步骤显示:

// #include "pch.h"
#include <iostream>

using namespace std;

int main(){
    char** pptr = new char*[5];

    for (int i = 0; i < 5; i++)
        pptr[i] = new char[5];

    for(int i=0;i<5;i++){
        char ch='A';
        pptr[0][i]=ch;
    }

    for(int i=0;i<5;i++){
        cout<<pptr[0][i]<<" ";
    }
}

运行此命令时,我会收到如下警告:

npm install react-bootstrap@next bootstrap

安装react bootstrap的正确方法是什么

更新

这是我的package.json文件:

npm install react-bootstrap@next bootstrap
npm WARN bootstrap@4.2.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN react-bootstrap@1.0.0-beta.3 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-bootstrap@1.0.0-beta.3 requires a peer of react-dom@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @react-bootstrap/react-popper@1.2.1 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN prop-types-extra@1.1.0 requires a peer of react@>=0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-context-toolbox@1.2.3 requires a peer of react@>=16.3.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-overlays@1.1.0 requires a peer of react@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-overlays@1.1.0 requires a peer of react-dom@>=16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-context-toolbox@2.0.2 requires a peer of react@>=16.3.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@2.5.2 requires a peer of react@>=15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@2.5.2 requires a peer of react-dom@>=15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-prop-types@0.4.0 requires a peer of react@>=0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN uncontrollable@6.0.0 requires a peer of react@>=15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context@0.2.3 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-popper@1.3.2 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context@0.2.2 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ react-bootstrap@1.0.0-beta.3
+ bootstrap@4.2.1
updated 2 packages in 1.788s

此文件是使用{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "bootstrap": "^4.2.1", "react-bootstrap": "^1.0.0-beta.3" }, "devDependencies": { "react": "^16.7.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 命令自动生成的

更新:

按照“首先使用CRA软件包对应用程序进行响应”然后运行npm init的步骤后,运行npm install react-bootstrap@next bootstrap时我开始看到以下错误

npm start

2 个答案:

答案 0 :(得分:1)

如果您是新手,请尝试以下步骤:

1。使用CRA软件包创建您的第一个React应用:

npx create-react-app my-first-app

2。 CD到我的第一个应用程序

3。安装引导程序

npm install react-bootstrap@next bootstrap

4。 转到src文件夹并打开index.js并将以下内容粘贴到页面顶部:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-grid.css';
import 'bootstrap/dist/css/bootstrap-reboot.css';

5。在同一文件夹中打开App.js并粘贴以下代码(我正在复制/粘贴原始CRA应用文件,并在其中添加了一个简单的Bootstrap按钮):

import React, { Component } from 'react';
import logo from './logo.svg';
import Button from 'react-bootstrap/lib/Button';
import './App.css';

class App extends Component {
  render() {
    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>
        <Button>Test</Button>
      </div>
    );
  }
}

export default App;

  1. 您可以看到您已将引导按钮添加到默认的create react app页面。您可以使用相同的模式添加其他组件。

干杯!

答案 1 :(得分:0)

使用jsx标签进行测试

<Button>Test</Button>

您必须导入

import { Button } from 'react-bootstrap';