Giter VIP home page Giter VIP logo

electron-with-cra-ts's Introduction

Electron x CRA x Typescript

The react-scripts used in this repo is my customized version. The main difference are sass-loader config and allow to change the webpack target.

If this CRA pull request are merged and you do not require the sass prefix, you could repalce the react-scripts to offical version

Reference

Installation

yarn is requeired, otherwise you should replace 'yarn' in package.json

yarn install

Development

yarn dev

Packaging

Before packaging you may edit the build config in package.json which prefix with REPLACE_. And React App in electron/menu.ts

To package apps for the local platform:

yarn package

First, refer to the Multi Platform Build docs for dependencies. Then,

yarn package-all

Features

  • Scss support and configured with some useful mixins. Variables and mixins in src/scss can be use directly without @import

  • TSLint, ESLint with react-hooks

  • Prettier

  • Pre-commit checking

  • Hot reload configured

  • Helper scripts

    • Create a new component
    // create component with index, scss, component in a folder
    yarn component ComponentName
    
    // create single component with `.tsx` only
    yarn component -s ComponentName
    • Install dependencies with type
    // equivalent to `yarn add lodash` and `yarn add --dev @types/loadash`
    yarn get lodash
    • Redux
    // install `redux`, `react-redux`, `rxjs` and `redux-observable`
    // And create required script
    yarn redux init
    
    // Quickly create action, epic, reducer file
    yarn redux name

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.