React/Babelifyの新機能。 "Proptingsへのアクセス"の修正方法

Question

私はReactとBabelifyの両方に慣れています。

私はノードを使って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)); 

私のアプリは非常に "Hello、World！"

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 

は、私がお勧めのものを読んで、私は両方に十分に新たなんだIそれに対処することはできません。私はまた、他の記事やSOの記事を読みましたが、（私が見つけることができる）それらのどれもがこのセットを持っていませんでした（ブラウジング、バーベリフ、反応）。

現時点で私の目標は、React構文（私が理解しているところのJSX）をサポートして、それを垣間見せることです。これを実現させる最速の方法は何ですか（私は必ずしも最も効率的であるとは限りません。私はむしろこの段階では最も理解しやすい呪文を持っていますので、私は学んでいる間に物事を透明にすることができます）。

Answer 1

それはあなたのセットアップの問題ではありませんが、問題は、あなたのimport文であり、私は、ライブラリのように廃止されました反応からPropTypesを使用して、あなたがそう

import React, { PropTypes } from 'react';

を反応から反応しPropTypes輸入していると仮定しています警告の中で述べたように、npmからスタンドアロンライブラリとしてPropTypesをインストールし、その代わりに使用する必要があります。

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

Answer 2

は、フォームimport * as React from 'react'の輸入を持っていますか？

その場合は、import React from 'react'に交換してください。

*は、非推奨エクスポートを含むreactからすべてをインポートします。これが警告をトリガーします。