Data Privacy

Data Protection
* Secure Wipe method instead of recycle bin
Malicious Links
mobile : Tab and hold to view destination URL
Malware
virus : spread on ppl, worm : spread on its own
Mobile Devices
Send links in text message ( Smishing )

[ reactJS ]

History

2011 Created by facebook
2012 used on instagram
2013 open sources
2015 react native (for iOS and android) open sources
2016 React 15 released

reactJS v.s. angularJS

library : reactJS ( focus on component )

framework : angularJS / amber

 

angular two-way binding (angular — less coding) v.s. one-way binding (reactJS — more code)

state = { user: 'Cory' }

function handleChange(event) { 
this.setState({
user: event.target.value
}) // explicit change handler
}

input type="text" value={this.state.user} onChange={this.handleChange}

 

reactJS
* Light-weighted
* Single component of the page with react component

* Testing : Jest, Mocha
* HTTP library : Fetch, Axios
* Routing : React Router
* i18n : react-intl
* animation : react-motion
* Form validation : react-forms
* CLI : create-react-app

  • next.js (server render i.e. previously PHP) / phenomic
  • reactVR

react renderers
* react-dom ( for web )

ReactDomServer.renderToString()

* react-native
* react-vr

ref : http://github.com/chentsulin/awesome-react-renderer

 

Writing react with function

import React from 'react';

function HelloWorld(props) {
return</pre><div>Hello {props.name}</div><pre>
}

<strong>Writing react with class</strong>

import React from 'react';

class HelloWorld extends React.Component {
render() {
return</pre><div>Hello {props.name}</div><pre>
}
}

JSX

React.createElement('h1', {color: 'red'}, 'Heading here')

make HTML more powerful
AngularJS / vue / amber : better HTML

*ngif="isAdmin"

*ngfor="let user of users"

(click)="delete()"
* v-for="user in users"

 

React : better JS

autocomplete javascript

{isAdmin && <h1>Hi Admin</h1>}

loop

{users.map(createUser)}
// or
users.map(user =&gt;
<div>{user.name}</div>
)

event

onClick={delete}

 

create react app

npm install -g create-react-app
create-react-app test-app

cd test-app

npm start

 

setting breakpoint

debugger;

 

Another example : http://codesandbox.io

react-codemod : command line tool to automate change from older react component to new update version

 

Community : http://reactiflux.com

microsoft component look and feel like MS office : http://dev.office.com/fabric

http://material-ui.com : google material design guideline

http://react-bootstrap.github.io

http://github.com/enaqx/awesome-react

 

Component

  • reactRouter
  • redux / mobx : complex dataflow
  • Jest : automate test
  • GraphQL : RESTful API call
  • Next.js : server side with node

 

virtual dom : updating a DOM is expensive

 

Jest : automated react test by facebook
looking for file src/*.spec.js, src/*.test.js by default
snap test

Enzyme from airBnb --- interact with React component --- reusable react component

function HelloWorld(props){
return (
&nbsp; &lt;div&gt;
&nbsp; &nbsp; Hello {props.name}
&nbsp; &lt;/div&gt;
)
}

 

React 15.5+

React.propTypes.string

Codemod update

import propTypes form 'prop-types'
propTypes.string

[ javascript ] … Three dots

Function argumentation

function countArguments(...args) {
  return args.length;
}
// get the number of arguments
countArguments('welcome', 'to', 'Earth'); // => 3

array

// destructure an array
let otherSeasons, autumn;
[autumn, ...otherSeasons] = ['autumn', 'winter'];
otherSeasons // => ['winter']

Working with array

let cold = ['autumn', 'winter'];
let warm = ['spring', 'summer'];
// construct an array
[...cold, ...warm] // => ['autumn', 'winter', 'spring', 'summer']
// function arguments from an array
cold.push(...warm);
cold // => ['autumn', 'winter', 'spring', 'summer']

Math.max

Math.max(1, 3, 2);

// or

var array1 = [1, 3, 2];

Math.max(...array1);

 

ref : https://dmitripavlutin.com/how-three-dots-changed-javascript/

[ mvnw ]

Install Maven plugin

mvn -N io.takari:maven:wrapper

Install dependencies

./mvnw clean install

 

Trobleshooting

Error

Exception in thread "main" javax.net.ssl.SSLException: Received fatal alert: protocol_version

Solution

export MAVEN_OPTS="-Dmaven.wagon.http.ssl.insecure=true -Dmaven.wagon.http.ssl.allo wall=true -Dmaven.wagon.http.ssl.ignore.validity.dates=true -Dhttps.protocol s=TLSv1.1,TLSv1.2"

 

or or or Run Spring Boot Project

mvnw spring-boot:run

 

src/test/java/com/example/demo/ExerciseTest.java

package com.example.demo;

import org.junit.Test;

import java.util.Arrays;

import static org.assertj.core.api.Assertions.*;
import static com.example.demo.Exercise.*;

public class ExerciseTest {

@Test
public void testExerciseAA() {
assertThat(999)
.isEqualTo(99);
}

}

Running example

$ mvnw clean install

[ERROR] testExerciseAA(com.example.demo.ExerciseTest) Time elapsed: 0.001 s <<
< FAILURE!
org.junit.ComparisonFailure: expected: but was:
at com.example.demo.ExerciseTest.testExerciseAA(ExerciseTest.java:81)

 

ref : https://github.com/takari/maven-wrapper,

https://www.baeldung.com/maven-wrapper