thatisuday

// v17 and below
import ReactDOM from 'react-dom';
const container = document.getElementById('app');
ReactDOM.render(<App />, container);

// v18
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

thatisuday

const a = () => {throw new Error('Oops!')};
const b = () => a();
const c = () => b();

try {
  try {
      c();
      console.log('Child worked.');
  } catch (e) {
    console.log("Error inside child", e?.message);

thatisuday

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

function _config() {
  const data = require("./config");

thatisuday

$ npm run pack         

> electron-lessons@1.0.0 pack /Projects/thatisuday/electron-lessons
> electron-builder -mwl

  • electron-builder  version=22.9.1 os=20.1.0
  • loaded configuration  file=/Projects/thatisuday/electron-lessons/electron-builder.json
  • Specified application directory equals to project dir — superfluous or wrong configuration  appDirectory=.
  • writing effective config  file=out/builder-effective-config.yaml
  • packaging       platform=darwin arch=x64 electron=11.1.1 appOutDir=out/mac

thatisuday

{
    "name": "electron-lessons",
    "version": "1.0.0",
    "description": "A sample Electron (JS) project for Medium lessons.",
    "main": "app/index.js",
    "scripts": {
      "start": "electron .",
      "postinstall": "electron-builder install-app-deps",
      "pack": "electron-builder -nwl"
    },

thatisuday

{
    "appId": "com.thatisuday.fileio",
    "productName": "Electron File IO",
    "copyright": "THATISUDAY TECH PVT. LTD.",
    "directories": {
        "app": ".",
        "output": "out",
        "buildResources": "build-res"
    },
    "files": [

thatisuday

.hello {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__btn {
        &--odd {
            background-color: beige;
        }

thatisuday

import React, { useState } from 'react';

// local dependencies
import { getVersion } from 'common/util';

// import styles (for compilation)
import './styles.scss';

// export a react component
export default ( props ) => {

thatisuday

import React from 'react';
import ReactDOM from 'react-dom';

// import entry component
import Entry from './entry';

// render `Entry` component
ReactDOM.render(
    <Entry name='React'/>,
    document.getElementById( 'app' ),

thatisuday

{
    "name": "electron-lessons",
    "scripts": {
        "start": "electron-webpack dev",
        "build": "electron-webpack"
    },
    "devDependencies": {
        "electron": "^11.1.1",
        "electron-webpack": "^2.8.2",
        "webpack": "^4.44.2"