Skip to content

Electron 5 + React 16 + Webpack 4 template with ES6, JSX and hot reloading.

License

Notifications You must be signed in to change notification settings

MrRefactoring/electron-react-webpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Electron React Webpack template

Build Status dependencies Status devDependencies Status

Try this Electron 9 & React 16 & Webpack 4 template for a quick development and prototyping.

w10 sample

Install

# Clone the repository
$ git clone https://github.com/pastahito/electron-react-webpack

# Go into the repository
$ cd electron-react-webpack

# Install dependencies
$ npm install

Develop

Just run this command to start developing with hot reloading.

$ npm start

What's included

  • JSX support for React.
  • CSS modules support.
  • JS, CSS and assets automatic bundling.
  • Hot reloading via Webpack 4.

Folder structure

├── electron-react-webpack/             # Your project's name, you can rename it

    ├── app/

        ├── build/                      # Webpack 4 will manage this folder for you
            ├── bundle.css              # Bundled CSS
            ├── bundle.js               # Bundled JS
            ├── ...                     # Your images will be copied here

        ├── src/

            ├── assets/                 # Images
                ├── electron.png
                ├── react.png
                ├── webpack.png

            ├── components/             # React Components
                ├── Link/               # To keep them modularized follow this structure:
                    ├── index.jsx       # Your component's React code
                    ├── styles.css      # Your component's scoped CSS
                ├── Logo/
                    ├── index.jsx
                    ├── styles.css

            ├── App.jsx                 # React main component where everything is tied up
            ├── renderer_process.js     # Electron's renderer-process, where you React app is called.
            ├── global.css              # Global CSS and global constants go here

        ├── index.html                  # This HTML only uses build/ folder's files

    ├── main.js                         # Electron's configuration. Whole app is launched from here
    ├── package.json
    ├── webpack.config.js               # Webpack 4 setup

Related

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 66.9%
  • CSS 20.5%
  • JavaScript 7.3%
  • HTML 5.3%