Linux Format - UK (2019-12)

http://www.techradar.com/pro/linux December 2019 LXF257 93

Proton CODING ACADEMY

When you edit with Emacs, you can have the console in one window, the code in another and the

application window open next to it.

NPX VS NPM

]

}

This specifies the Babel functions and you can see

that it runs in react mode. Babel is a JavaScript

compiler that will make sure your final result is

backwards-compatible and correctly formatted. This

includes handling the JSX syntax; without it you would

have to write much more complex code. You can now

install Babel itself.

$ npm install --save-dev babel-cli babel-preset-env

babel-preset-stage-0 babel-preset-react

Next, in package.json you need to define that babel

runs your main JavaScript file, in this code: index.js.

scripts: {

“start”: “babel-node index.js”

}

With this method, you are also missing the template

index.js file. However, it is very small, so create the file

and add:

import React, { Component } from ‘react’; // import

from react

import fs from’fs’;

import { render, Window, App, } from ‘Proton Native’; //

import the Proton Native components

class example extends Component {

render() { // all Components must have a render

method

return (

<App> // you must always include App around

everything

<Window title=”Proton Native Rocks!” size={{w: 300,

h: 300}} menuBar={false}>

{/* all your other components go here*/}

</Window>

</App>

);

}

}

render(<example />); // render your main component

With those files in place, you can run your test

project like this:

$ npm run start

The result is a little window with the heading “Proton

Native Rocks!’ You are now ready to take on the

challenge of creating your own application, so let’s have

a look at doing that.

Your code is going to be in JavaScript and React,

so using your favourite IDE or editor is your best bet.

Obviously Emacs is best. Proton Native also requires

g++, but you have installed all these at the beginning

of the tutorial.

When you have written a full application, you can

have Proton Native create binaries that you host

somewhere on the web. This function actually uses

electron-package but makes sure not to include the

entire binary from Chrome, as Electron does.

In this project, you will upgrade an existing example

from the proton repository. The project you start with is

Notepad, so download all of Proton Native from

https://github.com/kusti8/Proton Native. In the

examples, you can find a box statement; copy it into

your code, add Box and TextInput to your import

statement and let’s get started.

This code creates a box that you cannot see, but it is

inside the application. As you can guess from the code,

you can input text into the box. The first statement is

onChange ; as you might guess, this statement runs

the function when the text changes.

Your text is in the state of the app function. This

means it updates the state at every letter you write,

which could be a problem – but React has solutions for

this. You may also want to save the notes as a file, so

let’s add that too. To do this, add fs to your import and

Dialog to the Proton Native import. The same code

also includes shouldComponentUpdate() – this

function updates the component when the state or

props change. In the Notepad application, this happens

every time you enter text.

Now, let’s try something else! Make an input box

that takes radio buttons and saves the value to state

and a file. You can copy the code this time from the

examples in the documents for Proton Native on

GitHub. This example has two options and there’s no

way to know which is selected. Change the code like

below in index.js for LoveMyTasks.

class LoveMyTasks extends Component {

state = { text: ‘’, project: ‘’ };

...

<RadioButtons selcted={0} onSelect={project

=> this.setState( {project} )}>

The most common way to install and manage packages from node.js

is the npm package handler. However, npx is also available, with new

capabilities. Granted, npx is now included in npm but which to use

and when?

In general, npm manage your packages locally or globally, and npx

executes the package you want to use. Ordinarily, you would run npm

and set up your package.json file so you can run your application.

This is the best and most organised way to run and develop a project.

If you see a package that has exciting goals and you want to see

how it works, you can use npx instead. You can also use npx to create

a new project. Many of the scripts that make a project template you

will only use for that and never again. This means that the best way to

use them is to run them with npx. When the project is created you will

not have the creation script in your project, minimising the risk of

project pollution. Npx will also make sure that you have the newest

version of Node.js each time you run it. This can cause a problem if

you must use old packages, so be aware of that when you try it out.

When you are

testing, you

can run several

instances of

your code. If, for

example, you

want to try two

versions at the

same time, you

run the first,

change the code

and run it again

from another

terminal.

9992Decmbr rb2c01tab0tksyou December 2019 LXF257 93

Proton CODING ACADEMY

When you edit with Emacs, you can have the console in one window, the code in another and the

applicationwindowopennexttoit.

NPXVSNPM

]
}
This specifies the Babel functions and you can see
that it runs in react mode. Babel is a JavaScript
compiler that will make sure your final result is
backwards-compatible and correctly formatted. This
includes handling the JSX syntax; without it you would
have to write much more complex code. You can now
install Babel itself.
$ npm install --save-dev babel-cli babel-preset-env
babel-preset-stage-0 babel-preset-react
Next, in package.json you need to define that babel
runs your main JavaScript file, in this code: index.js.
scripts: {
“start”: “babel-node index.js”
}
With this method, you are also missing the template
index.js file. However, it is very small, so create the file
and add:
import React, { Component } from ‘react’; // import
from react
import fs from’fs’;
import { render, Window, App, } from ‘Proton Native’; //
import the Proton Native components

class example extends Component {
render() { // all Components must have a render
method
return (

inside the application. As you can guess from the code,

you can input text into the box. The first statement is

onChange ; as you might guess, this statement runs

the function when the text changes.

Your text is in the state of the app function. This

means it updates the state at every letter you write,

which could be a problem – but React has solutions for

this. You may also want to save the notes as a file, so

let’s add that too. To do this, add fs to your import and

Dialog to the Proton Native import. The same code

also includes shouldComponentUpdate() – this

function updates the component when the state or

props change. In the Notepad application, this happens

every time you enter text.

Now, let’s try something else! Make an input box

that takes radio buttons and saves the value to state

and a file. You can copy the code this time from the

examples in the documents for Proton Native on

GitHub. This example has two options and there’s no

way to know which is selected. Change the code like

below in index.js for LoveMyTasks.

class LoveMyTasks extends Component {

state = { text: ‘’, project: ‘’ };

...

<RadioButtons selcted={0} onSelect={project

=> this.setState( {project} )}>

The most common way to install and manage packages from node.js

is the npm package handler. However, npx is also available, with new

capabilities. Granted, npx is now included in npm but which to use

and when?

In general, npm manage your packages locally or globally, and npx

executes the package you want to use. Ordinarily, you would run npm

and set up your package.json file so you can run your application.

This is the best and most organised way to run and develop a project.

If you see a package that has exciting goals and you want to see

how it works, you can use npx instead. You can also use npx to create

a new project. Many of the scripts that make a project template you

will only use for that and never again. This means that the best way to

use them is to run them with npx. When the project is created you will

not have the creation script in your project, minimising the risk of

project pollution. Npx will also make sure that you have the newest

version of Node.js each time you run it. This can cause a problem if

you must use old packages, so be aware of that when you try it out.

Whenyouare

testing,you

canrunseveral

instancesof

yourcode.If,for

example,you

wanttotrytwo

versionsatthe

sametime,you

runthefirst,

changethecode

andrunit again

fromanother

terminal.