React＆FluxをElectronに使用するための最小要件は何ですか？

私は最小限のツールで反応するアプリケーションをまとめようとしています。 stackoverflowの文句を言わない私は、CDNのスクリプトが出タグ引く場合React＆FluxをElectronに使用するための最小要件は何ですか？

<!DOCTYPE html> 
<html lang="en"> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title text="">Electron/Reactjs</title> 
    <script src="https://fbme/react-15.1.0.js"></script> 
    <script src="https://fbme/react-dom-15.1.0.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    </head> 
    <body> 

    <h1> Hello electron root</h1> 
    <div id="example"></div> 

    <script type="text/babel"> 
     ReactDOM.render(
     <h1>Hello, react!</h1>, 
     document.getElementById('example') 
    ); 
    </script> 

    </body> 
</html>

はまだ、こんにちは、反応fb.meを許可するためのリンクは、スクリプトに反応間違っている注：私の電子は、以下で「ハロー反応」をロードしますロードされず、私はdevコンソールまたは端末にエラーがありません。ここに私のパッケージJSONと私のWebPACK（ルートディレクトリの両方）

パッケージJSON

{ 
    "name": "my-electron-app", 
    "version": "1.0.0", 
    "description": "My Template Electron application", 
    "main": "main.js", 
    "scripts": { 
    "start": "electron ." 
    }, 
    "babel": { 
    "presets": ["es2015", "stage-0", "react"] 
    }, 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/jtlindsey/<project-name>.git" 
    }, 
    "author": "J Travis Lindsey", 
    "license": "Apache-2.0", 
    "bugs": "https://github.com/jtlindsey/<project-name>/issues", 
    "homepage": "https://github.com/jtlindsey/<project-name>#readme", 
    "devDependencies": { 
    "electron-packager": "^7.1.0", 
    "electron-prebuilt": "^1.2.5", 
    "express": "^4.14.0", 
    "file-loader": "^0.9.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-hot-middleware": "^2.12.0", 
    "webpack-target-electron-renderer": "^0.4.0" 
    }, 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "flux": "^2.1.1", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0" 
    } 
}

webpack.config.js

module.exports = { 
    context: __dirname + '/, 
    entry: [ 
    'babel-polyfill', 
    './index.js', 
    html: "./index.html", 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
     } 
    ] 
    }, 
    output: { 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
    plugins: [] 
};

はpackage.jsonはそれでより多くを持っていること私は理解していないことが原因です。私はreact electron templateを見ましたが、反応フラックスと電子を使用するために必要なものと、生産性、急速な開発、CSSなどのために必要なものを知るには十分な文書がありません。

誰かがReactとFluxで使用する基本的な電子アプリに何を追加するのですか？スタイリングのないスリムなこんにちは世界の例でしょうか？

私はリアクションウェブアプリケーションを動作させることができました。そして、私は電子アプリを作ることができました。しかし、私は円で、電子アプリを作ろうとしています。これは、Webアプリケーションと同じように、CDNではなくnpmからの反応とフラックスを使用しています。私は何が欠けていますか？

出典

2016-07-01 jtlindsey

最も簡単なReactアプリケーションに必要なものはすべてここにあります。

<div id="app"></div> 
<script src="https://fbme/react-15.1.0.js"></script> 
<script src="https://fbme/react-dom-15.1.0.js"></script> 
<script> 
    ReactDOM.render(
    React.createElement('h1', null, 'Hello world'), 
    document.getElementById('app'); 
); 
</script>

これが機能したら、必要な他の部分を統合してください。

まず、スクリプトタグを別のファイルに移動し、Webpackを使用してバンドルします。

// src/app.js 
ReactDOM.render(
    React.createElement('h1', null, 'Hello world'), 
    document.getElementById('app'); 
);

このようなWebpack設定が必要です。

// webpack.config.js 
module.exports = { 
    entry: './src/app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    } 
};

バンドルを構築し、自分のindex.htmlファイルにbundle.jsを参照するスクリプトタグを追加するファイル名を指定して実行webpack。

これが機能したら、Babelトランスフォームを有効にすることに集中できます。 Webpackの設定をBabelローダーで補強する必要があります。 bundle.jsが電子で実行する準備ができているように、あなたがそれを変換しますJSXとES6とバベルを使用するようにapp.jsファイルを変換することができるはずです。この時点で

module.exports = { 
    entry: './src/app.js', 
    // ... 
    module: { 
    loaders: [ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { presets: ['es2015', 'react'] } 
    ] 
    } 
};

。

出典

2016-07-01 11:08:47

React＆FluxをElectronに使用するための最小要件は何ですか？

答えて

関連する問題