import React , { useState } from 'react' ; import { hot } from 'react-hot-loader' ; import logo from '@assets/images/logo.png' ; import './Application.less' ; const Application = ( ) => { const [ counter , setCounter ] = useState ( 0 ) ; return ( < div id = 'erwt' > < div className = 'header' > < div className = 'main-heading' > < h1 > ERWT Boilerplate < /h1> < /div> < div className = 'main-teaser' > < img src = { logo } title = 'Codesbiome' / > < div > Minimal boilerplate for rapid development of Desktop Applications using Electron , React , Typescript and Webpack . To serve the best environment for development , it uses hot - reloading of modules , styles and layouts of project < /div> < /div> < div className = 'versions' > < span > ERWT < span id = 'erwt-version' > < /span> < /span> < span > Electron < span id = 'electron-version' > < /span> < /span> < span > Chrome < span id = 'chrome-version' > < /span> < /span> < span > Node < span id = 'node-version' > < /span> < /span> < /div> < /div> < div className = 'footer' > < p className = 'main-teaser small center' > For faster development experience , this application will update using Hot Reload without needing to restart / reload after code changes . Click below buttons to update the application & quot ; counter & quot ; state < /p> < div className = 'center' > < button onClick = { ( ) => setCounter ( counter + 1 ) } > Increment Counter < span > { counter } < /span> < /button> & nbsp ; & nbsp ; & nbsp ; & nbsp ; < button onClick = { ( ) => setCounter ( counter > 0 ? counter - 1 : 0 ) } > Decrement Counter < span > { counter } < /span> < /button> < /div> < /div> < /div>); } ; export default hot ( module ) ( Application ) ;