CODEWITHSUNDEEP
reactjswebpackelectron
jtlindsey
jtlindsey

Reputation: 4863

What are the minimum requirements to use React & Flux in Electron?

I'm trying to put together a react application with the minimum tools. My electron will load 'hello react' with the following: Note the links in react script are wrong because stackoverflow wont allow the fb.me 

<!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>

Yet if I pull the CDN script tags out, the hello, react doesn't load and i have no errors in dev console or terminal. Here is my package json and my webpack (both in root directory)

package 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: []
};

The package.json has a lot more in it that I'm making use of because of things I don't understand. I have seen the react electron template but there isn't enough documentation there for me to know what is necessary to use react flux and electron and what is for productivity, rapid development, css, etc.

Can someone provide a full example of what to add to a basic electron app to use with React and Flux? Maybe a slim hello world example with no styling?

I've been able to get a react web app working. And I've been able to build an electron app. But I'm going in circles trying to build an electron app using react and flux from npm rather than a CDN like I would do with a web app. What am i missing?

Upvotes: 4

Views: 1436

Answers (1)

Dan Prince
Dan Prince

Reputation: 29999

Here's everything you need for the simplest React application.

<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>

Once that works, then start to integrate the other parts you'll need.

Start by moving the script tag out to a separate file and use Webpack to bundle it.

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

You'll need a Webpack config that looks something like this.

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

Run webpack to build the bundle and add a script tag that references bundle.js to your index.html file.

Once this is working you can focus on getting the Babel transform to work. You'll need to augment your Webpack config with the Babel loader.

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

At this point you should be able to convert your app.js file to use JSX and ES6 and Babel will convert it so that bundle.js is ready to be run in Electron.

Upvotes: 2

Related Questions