https://github.com/renato-rg/electron-react-webpack

Electron + React 16 + Webpack 4 template with ES6, JSX and hot reloading.
https://github.com/renato-rg/electron-react-webpack

electron jsx react seed template webpack4

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/renato-rg/electron-react-webpack
• Owner: renato-rg
• Created: 2016-12-26T21:10:08.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2021-09-22T18:35:44.000Z (over 3 years ago)
• Last Synced: 2025-01-16T21:07:32.737Z (14 days ago)
• Topics: electron, jsx, react, seed, template, webpack4
• Language: JavaScript
• Homepage:
• Size: 202 KB
• Stars: 230
• Watchers: 7
• Forks: 52
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# electron-react-webpack

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

![w10 sample](https://user-images.githubusercontent.com/11739632/37350993-59ad48d4-26da-11e8-9ac5-d3539cf1e2f9.PNG)

## Install

``` bash

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

``` bash

$ 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_process.js                 # Electron's main process. Whole app is launched from here

    ├── package.json

    ├── webpack.config.js               # Webpack 4 setup

```

## Related

- [electron-vue-webpack](https://github.com/pastahito/electron-vue-webpack) -

Minimal Electron template using Vue 2 instead of React.