Каковы минимальные требования к использованию React & Flux в Electron?

Я пытаюсь собрать реактивное приложение с минимальными инструментами. Мой электронный загрузит «привет реагировать» со следующим: Обратите внимание на ссылки в среагировать скрипт неправы, потому что StackOverflow не позволит в fb.meКаковы минимальные требования к использованию 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>

Тем не менее, если я тяну сценарий CDN теги из, привет, среагировать не загружается, и у меня нет ошибок в 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 and Flux? Может быть, тонкий привет мир пример без стилизации?

Я получил возможность работать с веб-приложением. И я смог создать электронное приложение. Но я собираюсь в кругах, пытаясь построить электронное приложение, используя реакцию и поток от npm, а не CDN, как я бы сделал с веб-приложением. Что мне не хватает?

источник

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' 
    } 
};

Run webpack построить пакет и добавить тег сценария, который ссылается bundle.js в файл index.html.

Как только вы работаете, вы можете сосредоточиться на преобразовании Вавилона на работу. Вам нужно увеличить конфигурацию Webpack с помощью загрузчика Babel.

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

На этом этапе вы должны быть в состоянии преобразовать файл app.js использовать JSX и ES6 и Бабеля преобразует его так, что bundle.js готов работать в Electron.

источник

2016-07-01 11:08:47

Каковы минимальные требования к использованию React & Flux в Electron?

ответ

Смежные вопросы