设置react引导程序时出现的问题

Question

我刚开始学习使用引导程序，在这里学习了一个教程：

反应-启动启动

安装步骤是：

npm install react-bootstrap@next bootstrap

当我运行这个命令时，我会收到如下警告：

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

什么是正确的方式安装反应引导。

更新

这是我的package.json文件：

{
  "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"
}

此文件使用npm init命令自动生成。

更新：

在执行“使用CRA包第一次反应应用程序”，然后运行npm install react-bootstrap@next bootstrap之后，当我运行npm start时，我开始看到下面的错误

>npm start

> my-app@0.1.0 start H:\ReactJS\ReactJs-BootStrap\test\my-app
> react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\..\AppData\Roaming\npm-cache\_logs\2019-01-04T15_09_20_369Z-debug.log

Answer 1

如果您刚开始响应和引导，我建议您执行以下步骤：

1.使用CRA包创建您的第一个react：

npx create-react-app my-first-app

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

3.安装引导程序

npm install react-bootstrap@next bootstrap

1. 转到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应用程序文件，并在那里添加了一个简单的引导按钮)：

​

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. 您可以看到，您添加了一个引导按钮到默认的页面。Yo可以使用相同的模式添加其他组件。

干杯!

Answer 2

用jsx标签进行测试

<Button>Test</Button>

你必须用

import { Button } from 'react-bootstrap';