Generating the project scaffold with React

The fastest way to start the project is to use the React library and the Create React App tool. Follow these steps to get started:

  1. Run the following commands to generate a new React application called crypto-wallet:
npx create-react-app crypto-wallet
cd crypto-wallet
  1. Install the latest electron library with the following command:
npm install -D electron

As you already know, a typical Electron application requires a main entry in the package.json file. We are going to use the public/electron.js file so that we can create a distributable package without any effort.

  1. Update the package.json file and add the main entry:
{
"name": "crypto-wallet",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
// ...
}

The scripts for React applications usually reserve the start script in order to run the local development web server. You can use the electron script to run the desktop version.

  1. Append the electron command to the scripts section:
"scripts": {
"electron": "electron .",
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},

The final thing we need to do is create an electron.js file with a minimal amount of code so that we can run the application window.

  1. Create the electron.js file with the following content in the public folder:
const { app, BrowserWindow } = require('electron');

function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
resizable: false
});

win.loadURL(`http://localhost:3000`);
}

app.on('ready', createWindow);

That is pretty much all you need to do to have a minimal project configuration. From now on, you can test the web version by running the following commands in parallel Terminal or Command Prompts windows:

npm start
npm run electron

Once the application is up and running, you should see an Electron window that looks as follows:

Now that we've got the project scaffold up and running, let's integrate the Ant Design component library so that we can build our application quickly and make it look good.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.69.255