标签: frontend

部署 React 应用程序时出错,并且一直显示 << 插件“react”与“package.json » eslint-config-react-app » >> 之间存在冲突”

我在部署创建反应应用程序时遇到了一些问题,因为它无法编译并告诉我插件“react”与“package.json \xc2\xbb eslint-config-react-app \xc2\xbb”之间存在冲突

\n

想知道有没有人遇到过同样的问题并且知道如何解决,谢谢!我对这一切还很陌生。

\n

e这是我的 Windows powershell 在 npm start 并启动后告诉我的内容

\n

这就是我的反应应用程序启动后我的本地主机的样子

\n

frontend reactjs eslint package.json

88
推荐指数
7
解决办法
13万
查看次数

完成CSS3动画时是否有回调?

在css3动画的情况下有没有办法实现回调函数?在Javascript动画的情况下,它可能但在css3中找不到任何方法.

我可以看到的一种方法是在动画持续时间之后执行回调,但这并不能确保在动画结束后立即调用它.它取决于浏览器UI队列.我想要一个更强大的方法.任何线索?

javascript css frontend css3

87
推荐指数
1
解决办法
4万
查看次数

windows的好postgresql客户端?

经过几年的oracle回到postgresql ...

什么是最先进的postgresql管理/ ddl生成/数据在Windows上插入前端?如果它也与postgis集成,那将是很好的.它应该是独立的,或者是intellij idea的插件

回想一下,我用过的所有专门用于postgresql的windows程序都是垃圾,特别是PGAdmin.它变得更好了吗?

windows postgresql frontend postgis

81
推荐指数
5
解决办法
13万
查看次数

什么是{this.props.children}以及何时应该使用它?

作为React世界的初学者,我想深入了解当我使用时会发生{this.props.children}什么以及使用相同的情况.它在下面的代码片段中的相关性是什么?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript frontend reactjs react-redux

81
推荐指数
4
解决办法
6万
查看次数

前端开发人员面试问题

对于这里的软件开发人员来说,有很多很好的面试问题(甚至是"谜题"),但我想知道是否有人对前端开发人员的职位有一些好问题.我们正在寻找知道HTML + CSS + JS的人.

一些显而易见的问题:

  • 你使用过JavaScript库吗? - 跟进:哪个,为什么那个超过别人?
  • 您是否关注HTML5和CSS3的开发? - 跟进:您最期待哪些功能,为什么?

你知道前端开发者有什么好的"谜题"吗?也许一个JS嘶嘶声?

编辑:改变了两个问题,使其更加开放.

frontend

73
推荐指数
3
解决办法
8万
查看次数

TypeScript React.FC&lt;Props&gt; 混淆

我正在学习 TypeScript,有些东西让我感到困惑。一位如下:

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}
Run Code Online (Sandbox Code Playgroud)

对于上面的两个功能组件,我看到 TypeScript 生成了相同的 JS 代码。PrintName2就可读性而言,该组件对我来说似乎更加精简。我想知道这两个定义之间有什么区别,是否有人在使用第二种类型的 React 组件?

javascript frontend typescript reactjs react-functional-component

70
推荐指数
4
解决办法
8万
查看次数

使用reactjs和requirejs

最近,我开始使用reactjs连同backbonejs路由器来构建应用程序.

我通常requirejs用于依赖和代码管理.但是,当我尝试包含包含jsx语法的文件时出现问题.

到目前为止,这就是我的意思router.js:

define(["backbone", "react"], function(Backbone, React) {

  var IndexComponent = React.createClass({
    render : function() {
      return (
        <div>
        Some Stuff goes here
        </div>
        );
    }
  });



  return Backbone.Router.extend({
    routes : {
      "": "index"
    },
    index : function() {
      React.renderComponent(<IndexComponent />, document.getElementById('index'));
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

如何将IndexComponent放在自己的文件中并在此文件中调用它?我已经尝试了通常的方法(与我使用的主干和反应相同)但由于jsx语法而出错.

javascript frontend requirejs reactjs

69
推荐指数
1
解决办法
4万
查看次数

如何使用npm安装多个版本的包

由于https://github.com/npm/npm/issues/2943,npm将永远不会支持别名包和安装同一包的多个版本的能力.

在github问题上发布的变通方法可能适用于纯JS模块,但随着npm成为前端包管理的标准,包现在包括各种资产,如CSS.

有没有解决方法来安装同一个包的多个版本?

我想出的最好的想法是"克隆"一个包,并用一个稍微不同的名称发布它.

例如,如果你需要的多个版本jquery,你可以只包发布所谓jquery-alias1,jquery-alias2,jquery-alias3等,然后在你的设置适当的版本package.json.

或者你可以根据自己的版本号,比如命名的包jquery-1.11.x,jquery-2.1.x等等.

但这两种方法看起来都很草率.还有更好的吗?

frontend packages npm

69
推荐指数
4
解决办法
3万
查看次数

如何计算CSS像素大小?

在深入研究CSS单元时,我遇到了参考像素的定义.但是,我无法找到与CSS像素单元关系的一致而全面的描述.我已就这件事做了一些研究,但对我来说还是有点不清楚.

1.收集信息


1.1像素定义

像素有两种不同的类型/定义:

"设备像素" - 显示器上的单个物理点.

和:

CSS像素 - 与参考像素最匹配的单位.[ 1 ]

同名的两个平行概念肯定不能澄清混淆.我完全理解引入第二个目的的目的,但我发现它的命名法误导了.CSS像素被归类为绝对单位,并且:

"绝对长度单位相对于彼此固定." [ 1 ]

除了像素之外,上述声明似乎对于每个单位都非常明显.遵循w3c规范:

"对于CSS设备,这些尺寸要么锚定(i)通过将物理单元与其物理测量相关联,或者(ii)通过将像素单元与参考像素相关联来锚定.

(...)请注意,如果锚单位是像素单位,则物理单位可能与其物理测量值不匹配.或者,如果锚单元是物理单元,则像素单元可能不会映射到整数个设备像素."[ 1 ]

考虑到上述引用,我假设绝对单位不是绝对的,因为它们可以锚定到参考像素.


1.2参考像素

参考像素本身实际上是角度测量[ 2 ]:

"参考像素是设备上一个像素的视角,像素密度为96dpi,距离读取器的臂长度.对于标称臂长28英寸,视角约为0.0213度." [ 1 ]

图片如下图所示:

在此输入图像描述

尽管将参考像素定义为视角,我们可以进一步阅读:

"对于手臂长度的读数,1px因此对应于约0.26毫米(1/96英寸)."

抛开不一致之处,我们可以建立角度值:

? = 2 * arctan(0.026/142) = 0.02098°

where:
    ? — a value of the visual angle
Run Code Online (Sandbox Code Playgroud)

因此,显示单位的大小等于:

y = 2x * tan(0.01049°)

where:
    y — a displayed unit size
    x — a reading distance
Run Code Online (Sandbox Code Playgroud)

鉴于上述公式,为了计算单位大小,我们需要确定实际阅读距离是多少.由于用户可能会有所不同,因此其分类基于设备的DPI.

1.2.1 DPI

为方便起见,让我们假设DPI == PPI. …

css frontend screen pixel css3

56
推荐指数
1
解决办法
1万
查看次数

如何在不进行 npm install 的情况下更新 package-lock.json?

这是一种package-lock.json无需真正安装node_modules(如npm i)即可更新/生成的方法吗?我只需要一个package-lock.json基于我的有效package.json,就是这样。

动机

您(或您的同事)可能会使用yarn本地,当CI服务器使用npm。这可能不是最佳实践,但仍可能出于某些原因。

在一个完美的世界中,我想要一个命令来更新 package-lock.json

额外问题:对于yarn. 有没有办法在yarn-lock.json没有模块安装的情况下生成(yarn install)?

frontend node.js npm node-modules yarnpkg

55
推荐指数
2
解决办法
4万
查看次数