Some Things I have Learned from 'React Native with MobX — Getting Started'

React Native with MobX — Getting Started
https://medium.com/react-native-training/react-native-with-mobx-getting-started-ba7e18d8ff44

First off this is an awesome tutorial.  I signed up for an account hoping the rest of the site is as good.

What I have learned from this site

• npm
• use the '--save' options if you are using a npm version before 5.0
• MobX is using ES7 decorators
• must install the babel plugin transform decorators legacy with '--save-dev'
• also must update or create the '.babelrc' file to include the plugin
• Looks like they have some nice training material
• eclectic
• This example passes in the store instead of injecting it.
• Why is injecting to be preferred?

 

JavaScript and Semicolons

JavaScript has some subtle difference.  Two import considerations.

1. One most understand how JavaScript uses semicolons and linefeeds to be a professional programmer in JavaScript
2. The use of semicolons where you would normally expect to see them, can reduce human error.

This is an excellent reference for JavaScript and Semicolons:

JavaScript Semicolon Insertion
Everything you need to know
http://inimino.org/~inimino/blog/javascript_semicolons

The above link is much more detailed than my meanderings below.  However, I do come to a different conclusion when it comes to the use of semicolons.  And I also have some questions the articles doesn't address.

Basically, most of the time you don't HAVE TO use semicolons.  You SHOULD use them in most places you would normally expect to see them because they reduce human error.  There are also special case where you must NOT use linefeeds.  Also extra spaces don't affect parsing.

There are case where you MUST use semicolons.

• To define an empty statement
• ';;;' is three empty statements
• When two statements are on the same line
• Where the next line can be interpreted as part of the statement of the preceding line
• See the example below with 'a = b + c' and the parentheses.

JavaScript looks at semicolons in a way that is different from languages like Java or C#:

• Automatic semicolon insertion
• they are not really inserted, but other things are interpreted as ending a statement
• line break
• closing bracket
• end of program
• Where are semicolons allowed
• Where they may be omitted
• Where they are required

Some of my take aways

• Always enclose the statement following a return in parentheses
• return (
• ) 
• if the next line can be parsed as part of the current statement, it will be.

Special case where semicolons don't end statements and are not empty statements

• loop header

Restricted Productions, special cases where the next line will look like part of the statement  to human and it is not.  With restricted productions you must be careful not to use linefeeds as they will be interpreted as end of statements.

• postfix operators
• must be on the same line with what it is modifying 
• continue statements
• optional identifier must be on the same line as what it is modifying
• Can one wrap the identifier in parentheses or brackets?
• break statements
• optional identifier, see continue statement
• return statements
• expression must start on the same line as the 'return'
• a line feed after a 'return' is an empty return statement
• always use a '(' right after the return and end what is being return with a ')'
• watch out for intentional empty return statements
• would it always be better to use a empty statement after a return?
• Is 'return;' the same as 'return\n'?
• throw statements
• Just like return statements
• expression must start on the same line as the 'throw'

Some points to remember:

• Indentation has no effect upon EMACScript (ES) parsing
• line breaks cannot be indiscriminately removed and/or replace with semicolons or white space within restricted productions
• line feeds only represent statement end if the next line cannot be interpreted as part of the preceding line's statement

I really think that the semicolons can make things much more readable and avoid some of the human error.

Example:

a = b + c
(d + e).print()

will be executed as

a = b + c(d + e).print()

A careful use of semicolon removes this error, which could be hard to find because it looks right to most traditional programmers.

How does Swift's use of linefeeds and semicolons compare with JavaScript?

Some Things I have learned from 'JavaScript — *** is ES6, ES8, ES 2017, ECMAScript… ?'

JavaScript — *** is ES6, ES8, ES 2017, ECMAScript… ?
https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c

• What is ES?
• ECMAScript (ES)
• Comes from ECMA International for Standards
• European Computer Manufacturers Association (ECMA)
• It is a standard
• So far there are eight editions of ES (ECMAScript)
• ES6 and ES2015 are the same thing
• ES (ECMAScript) now has yearly releases
• ES2016 is ES7
• ES2017 is ES8
• ES.Next is the up coming of ES (ECMAScript)

Prettier error on save: Unexpected token, expected "..."

It is for the following code:

       <Text {this.props.store1.value1}</Text>
        <Text {this.props.store2.value2}</Text>

At first I thought it has something to do with the not being define in the 'App' class.  However, the issue was that I had not ended my '<Text' properly.

I should have been:

       <Text> {this.props.store1.value1}</Text>
        <Text> {this.props.store2.value2}</Text>

What to do in MobX when your at sign '@' is not define

For me this was a issue of not having babel setup properly.

Install with this:

npm i babel-plugin-transform-decorators-legacy --save-dev

And than add the plugin to my .babelrc file

{
 "presets": ["react-native"],
 "plugins": ["transform-decorators-legacy"]
}

Named and default exports in JavaScript

What is the difference between:

A

import { something } from "somethingPackage"

and

B

import something from "somethingPackage"

B is using a default import.  You can you any name you want to replace 'something'.  However, there must be a 'default' export in the package.

A is a named import.  This works if there is an export with the name 'something' in the package.