代码之家 › 专栏 › 技术社区 › learner

设置react引导时遇到的问题

twitter-bootstrap reactjs

learner · 技术社区 · 7 年前

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

安装react引导的正确方法是什么。

使现代化

这是我的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

1 回复 | 直到 7 年前

Hamed 7 年前

如果您不熟悉react和bootstrap,我建议您执行以下步骤:

npx create-react-app my-first-app

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

3.安装引导程序

npm install react-bootstrap@next bootstrap

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;

干杯

derloopkat 5 年前

使用jsx标记进行测试

<Button>Test</Button>

import { Button } from 'react-bootstrap';