反应/ Babelify新手;如何修复“访问PropTypes”警告

我是React和Babelify的新手。反应/ Babelify新手;如何修复“访问PropTypes”警告

我使用Node来编译一个Web应用程序。现在我正在这样做：

browserify({debug: true}) 
.transform(
    babelify.configure({ 
    comments : false, 
    presets : [ 
     "react", 
     "babili", 
    ], 
    }) 
) 
.require('./app.js', {entry: true}) 
.plugin(collapse) 
.bundle() 
.on("error", function (err) { 
    console.log("Error:", err.message); 
}) 
.pipe(fs.createWriteStream(destination));

我的应用程序是一个非常琐碎的“你好，世界！”验证的概念，在这这个复杂的时刻：

class Renderer { 
    render() { 
    ReactDOM.render(
     <div>Hello, World!</div> 
     document.querySelector("#react-app") 
    ); 
    } 
} 
module.exports = Renderer;

我得到这样的警告：

Warning: Accessing PropTypes via the main React package is deprecated, and 
will be removed in React v16.0. Use the latest available v15.* prop-types 
package from npm instead. For info on usage, compatibility, migration and more, 
see https:/gfb.me/prop-types-docs 

Warning: Accessing createClass via the main React package is deprecated, 
and will be removed in React v16.0. Use a plain JavaScript class instead. If 
you're not yet ready to migrate, create-react-class v15.* is available on npm 
as a temporary, drop-in replacement. For more info see 
https:/gfb.me/react-create-class 

Error: [BABEL] /home/gweb/code/app.js: Unknown option: 
/home/gweb/code/node_modules/react/react.js.Children. Check out 
http:/gbabeljs.io/docs/usage/options/ for more information about options. 

A common cause of this error is the presence of a configuration options 
object without the corresponding preset name. Example: 

Invalid: 
    `{ presets: [{option: value}] }` 
Valid: 
    `{ presets: [['presetName', {option: value}]] }` 

For more detailed information on preset configuration, please see 
http:/gbabeljs.io/docs/plugins/#pluginpresets-options. (While processing 
preset: "/home/gweb/code/node_modules/react/react.js") while parsing file: 
/home/gweb/code/app.js

我读的推荐的东西，但我是新足两，我不能完全掌握它。我还阅读了其他一些文章和SO帖子，但是他们中没有一个（我能找到）有这样的设置（browserify，babelify，react）。

我目前的目标是通过支持React语法（这是JSX，据我所知）来支持它，所以我可以开始玩它并学习这两个库。实现这个目标的最快方法是什么（我不一定需要最高效或最好的;我现在更愿意在这个阶段有最容易理解的咒语，所以当我学习时我可以让事情变得透明）。

来源

2017-06-18 Sir Robert

这不是你的设置问题，但问题是你的import语句，我假设你正在导入反应并PropTypes从反应

import React, { PropTypes } from 'react';

因此，使用PropTypes从反应库已被弃用在警告中提到，您需要将PropTypes作为npm的独立库安装，然后使用它。

npm install prop-types --save，然后做，

import PropTypes from 'prop-types'，更多信息https://www.npmjs.com/package/prop-types

这将解决您的第一个警告，也为第二次警告，你需要安装和使用https://www.npmjs.com/package/create-react-class。

对于babel错误，请检查您是否同时安装了所需的两个库。 https://www.npmjs.com/package/babel-preset-react， https://www.npmjs.com/package/babel-preset-babili

来源

2017-06-18 10:20:09

谢谢;这还不是一个完整的答案呢......我根本不使用PropTypes（我也不知道他们做了什么）。我使用的示例代码实际上是整个代码，除了“const ReactDOM = require（'react-dom'）;”我怀疑它是在babel-preset-react插件中的某处。 –

你有形式import * as React from 'react'的进口？

如果是这样，请尝试将其替换为import React from 'react'。

*从react中导入所有内容，包括不推荐使用的导出，这就是触发警告的原因。

来源

2017-09-04 15:18:52 Tamlyn

反应/ Babelify新手;如何修复“访问PropTypes”警告

回答

相关问题