reactjs - 使用 npm 安装 react 包-6ren

reactjs - 使用 npm 安装 react 包

转载作者：行者123 更新时间：2023-12-04 01:47:09

25

4

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

我从 npm install axios 开始，它似乎工作正常。但我仍然收到错误消息“axios 未定义”。我错过了什么？我必须在我的 package.json 中纠正依赖关系吗？如果是，我该如何纠正它？

包.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>

最佳答案

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

import 'axios' from 'axios';

也喜欢这个。

const axios = require('axios');

关于reactjs - 使用 npm 安装 react 包，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42936406/

25

4

0

文章推荐： c++14 - 代码分析期间的 NLOC 和复杂度数

文章推荐： r - 从 R 笔记本访问 Azure Blob 存储

npm - npm install npm -g不会将npm更新到最新版本
我正在使用npm v5.3.0。现在，我想将npm更新到v5.4.1。要执行此操作，请在终端中键入以下内容： npm install -g npm 没有任何错误。但是，当我键入npm -v时，得到的
npm 安装不起作用 | npm 错误!路径 | npm 错误!代码 | npm 错误!错误 | npm 错误!系统调用 | npm 错误!恩恩特
我已经使用 vue-cli 两个星期了，直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
npm - 如何在全局 npm 配置中重置 npm 注册表
有什么方法可以更改或重置全局 npm 注册表。感谢您的帮助。最佳答案在终端中运行以下命令以恢复到默认注册表 npm config set registry https://registry.np
npm - 什么时候应该使用 npm install vs npm i
查看 npm 的 documentation , 'i' 是 'install' 的别名，是否有任何情况下最好使用完整的 'npm install'？最佳答案两者之间没有具体区别。这只是一个懒惰的
npm - 我多久可以发布到 npm？
目前，每次将更改推送到 GIT 存储库时，我都会发布新版本的 NPM 包。我的大部分更改只是愚蠢的补丁。我使用 NPM 作为工具，在我的许多项目中启用版本控制和代码重用。经过一个月的工作，我已经完成了
npm - npm 安装错误
我运行的时候总是报错 npm install 谁知道怎么解决 npm ERR! Darwin 13.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/b
npm - "npm uninstall"与 "npm uninstall --save"
“npm uninstall packageName”删除包并更新 package.json 文件。但是来自 npm 文档 - To remove a package from the depend
npm - 何时使用收缩包装、npm-lockdown 或 npm-seal
我的背景更熟悉 composer .我收到 gulp (等)进行构建过程和学习 node以及如何使用 npm我走的时候。很奇怪(再次来自 composer 背景)composer.lock默认情况下
npm - npm 模块名称的命名约定
我看到的许多 npm 模块名称前面都添加了技术名称，例如 react-native 或 jquery 等。由于我们已经在 package.json 文件中提供了关键字，因此遵循此约定有什么好处。我问这
npm - 模块是无关的 npm
我检查了 connect-privkey-to-provider模块在依赖项中。但是，它一直在说模块 'connect-privkey-to-provider' 是无关的 npm 和找不到模块 '
npm - "npm install"和 "npm ci"和有什么区别？
我正在进行持续集成并发现了 npm ci命令。我不知道在我的工作流程中使用此命令有什么优势。速度更快吗？这会让测试变得更难吗？好吗？最佳答案来自the official documentati
npm - 如何使用 postinstall 或单个 npm 命令安装嵌套的 npm 包
我有一个要发布到 NPM 的包，其中还包含如下所示的演示目录: . +-- demo | +-- src | | +-- main.js | +-- package.json +--
npm - Visual Studio Code - 使用 NPM 脚本时找不到 NPM
如果我打开集成终端并运行 npm -v 它会起作用。但是，如果我直接从 NPM SCRIPTS 运行它，它就不起作用。评论中要求的更多详细信息 //由 Fogmeister 编辑我也有这个问题，
npm - 如何解决 npm 安装错误 “npm ERR! code 1”
我正在尝试安装 gulp，当我写 npm install 时我得到了这个问题: npm ERR! code 1 npm ERR! path D:\www\wegrow\node_modules\nod
npm-scripts - “npm” 如何运行 “npm test code coverage” ？
这个问题已经有答案了: npm test --codecoverage doesn't generate report (3 个回答) 已关闭 4 年前。当我执行npm test --code-co
npm - `npm start` 和 `npm run start` 之间有区别吗？
我能够运行 npm start 和 npm run start 命令。我用过create-react-app创建我的应用程序。为了在 CSS 模块中进行配置更改，我想运行 npmject 但它会抛出错
npm - 使用 npm run 脚本时可以隐藏或静音 "npm ERR!"输出吗？
我正在使用npm run script执行“构建”和“测试”等任务。例如，我的 package.json 如下所示: { "name": "fulfillment-service", "ve
npm - 用 npm run 解决 "sh: command not found"的困难
我第一次将 npm 模块添加到我的项目中(jshint、optimg、jpgo)。我注意到有些项目，当我做 npm 运行 [名称] ，给出“sh: [name]: command not found”
npm-install - npm 安装错误 `not foundram Files/nodejs/npm: 3:/mnt/c/Program Files/nodejs/npm:`
我已经在 Windows 上安装了 Ubuntu Bash。我已经有 nodejs和 npm在我的 Windows 机器上 C:\Program Files\nodejs .在 Windows 的 b
node.js - npm 错误!代码 EMFILE npm ERR!系统调用产生 git npm ERR!路径 git npm ERR!错误号 EMFILE npm 错误!生成 git EMFILE
我正在尝试运行 npm install bitgo命令但在终端上出现以下错误， npm ERR! code EMFILE npm ERR! syscall spawn git npm ERR! pat

首页

博学

6Ren·AI

商城

reactjs - 使用 npm 安装 react 包