使用 npm 安装 react 包

Question

我现在开始使用 HTML、CSS 和一些 jquery 的纯前端开发来进行 React。所以我没有安装包的经验。我想使用 npm 安装 axios。

我从 npm install axios 开始，它似乎工作正常。但我仍然收到错误消息 "axios is not defined"。我错过了什么？我是否必须在我的 package.json 中纠正依赖项？如果是，我该如何纠正？

Package.json

{
  "name": "first-webapp-react",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
    "build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
  },
  "author": "BAGGID",
  "license": "MIT",
  "dependencies": {
    "moment": "^2.10.2",
    "react": "^0.13.2",
    "axios": "^0.15.3"
  },
  "devDependencies": {
    "browserify": "^9.0.8",
    "reactify": "^1.1.0",
    "uglify-js": "^2.4.20",
    "watchify": "^3.1.2"
  }
}

var React = require('react');

var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');


var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
          _this.setState({
            jobs: result.data.jobs
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

 render(){
    console.log('Person: ' + this.state.person);
  return (
   <div>
    <TopBar />  
        <ProductPage />
        <Test />
   </div>
  );
 }
});

module.exports = App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>React Test</title>
 <link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
 <link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
 <link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
 <link href="assets/css/login.css" type="text/css" rel="stylesheet" />
 <link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>

 <div id="main"> 
 </div>

 
 <script src="./compiled.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>
</html>

Answer 1

只需通过 CDN 安装，将此代码插入 html 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

只需将此代码插入您的 html 文件即可。

这就是您的 html 文件的样子

<!DOCTYPE html>
<html> <head lang="en"> 
<meta charset="UTF-8"> 
<title>React Test</title> 
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" /> 
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> <div id="main"> your content here </div> 
<script src="compiled.js"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
</body> 
</html>

Answer 2

尝试全局安装 axios，使用

$ npm install -g axios

Answer 3

您应该在使用前尝试导入它。

import 'axios' from 'axios';

也喜欢这个

const axios = require('axios');

Answer 4

检查这个简单的例子，如何使用axios:

var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
           console.log('success');
          _this.setState({
            jobs: result.data.jobs
          });
        })
        .catch(e => console.log('error', e))
  },

  componentWillUnmount: function() {
      this.serverRequest.abort();
  },

  render: function(){
    console.log('Person: ');
    return (
     <div>
          Hello
     </div>
    );
   }
});

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app'/>

使用 npm 安装 react 包

installing package for react using npm

npm

reactjs

npm-install

axios