Updated SPFx Basics guidance (SharePoint#803)

* Updated the Integrate your SharePoint client-side web part with the property pane guide

* Updated the guide on adding external libraries

* Updated code snippets in the __RequestDigest guide

* Updated request digest guidance

* Updated notes on solution packaging with the latest types

* Updated guidance on using existing JavaScript libraries

* Updated guidance on referencing 3rd party CSS styles

* Updated guidance on using preconfigured entries

Author: waldekmastykarz

docs/spfx/web-parts/basics/add-an-external-library.md

@@ -2,7 +2,6 @@
 
 You might want to include one or more JavaScript libraries in your web part. This article shows you how to bundle an external library and share libraries.
 
-
 ## Bundling a script
 
 By default, the web part bundler will automatically include any library that is a dependency of the web part module. This means that the library will be deployed in the same JavaScript bundle file as your web part. This is more useful for smaller libraries that are not used in multiple web parts.
@@ -12,71 +11,70 @@ By default, the web part bundler will automatically include any library that is
 Include the string validating library [validator](https://www.npmjs.com/package/validator) package into a web part.
 
 Download the validator package from npm:
-	
-```
+
+```sh
 npm install validator --save
 ```
-	
->**Note:** Because you're using TypeScript, you need typings for the package you add. This is essential when you are writing code because TypeScript is just a superset of JavaScript. All the TypeScript code is still converted to JavaScript code when you compile. You can search  for and find typings by using **tsd** package, for example: `tsd install {package} --save`
-	
+
+>**Note:** Because you're using TypeScript, you need typings for the package you add. This is essential when you are writing code because TypeScript is just a superset of JavaScript. All the TypeScript code is still converted to JavaScript code when you compile. You can search for and find typings by using **npm**, for example: `npm install @types/{package} --save`
+
 Create a file in the your web part's folder called `validator.d.ts` and add the following:
-	
+
 >**Note:** Some libraries do not have typings. While the Validator library does have a [community provided typings file](https://www.npmjs.com/package/@types/validator), for this scenario let's assume it does not. In this case you would want to define your own typings definition `.d.ts` file for the library. The following code shows an example.
-	
+
 ```typescript
 declare module "validator" {
-	export function isEmail(email: string): boolean;
-	export function isAscii(text: string): boolean;
+    export function isEmail(email: string): boolean;
+    export function isAscii(text: string): boolean;
 }
 ```
-	
+
 In your web part file, import the typings:
-	
+
 ```typescript
 import * as validator from 'validator';
 ```
-	
+
 Use the validator library in your web part code:
-	
+
 ```typescript
 validator.isEmail('[email protected]');
 ```
 
 ## Sharing a library among multiple WebParts
 
-Your client-side solution might include multiple web parts. These web parts might need to
-import or share the same library. In such cases, instead of bundling the library, you should include it in a separate JavaScript file to improve performance and caching. This is especially true of larger libraries.
+Your client-side solution might include multiple web parts. These web parts might need to import or share the same library. In such cases, instead of bundling the library, you should include it in a separate JavaScript file to improve performance and caching. This is especially true of larger libraries.
 
 ### Example
 
 In this example, you will share the [marked](https://www.npmjs.com/package/marked) package - a Markdown compiler - in a separate bundle.
 
 Download the **marked** package from npm:
-	
-```
+
+```sh
 npm install marked --save
 ```
-	
+
 Download the typings:
-	
+
 ```
 npm install @types/marked --save
 ```
-	
+
 Edit the **config/config.json** and add an entry to the **externals** map. This is what tells the bundler to put this in a separate file. This prevents the bundler from bundling this library:
-	
+
 ```json
 "marked": "node_modules/marked/marked.min.js"
 ```
-	
+
 Add the statement to import the `marked` library in your web part now that we have added the package and typings for the library:
-	
+
 ```typescript
 import * as marked from 'marked';
 ```
-  	 
+
 Use the library in your web part:
-	
+
 ```typescript
 console.log(marked('I am using __markdown__.'));
 ```
@@ -87,36 +85,37 @@ Instead of loading the library from a npm package, you might want to load a scri
 
 ### Example
 
-In this example, you will load jQuery from CDN. You don't need to install the npm package. However, you still need to install the typings. 
+In this example, you will load jQuery from CDN. You don't need to install the npm package. However, you still need to install the typings.
 
 Install the typings for jQuery:
-	
-```
+
+```sh
 npm install --save @types/jquery
 ```
-	
+
 Update the `config.json` in the `config` folder to load jQuery from CDN. Add an entry to the `externals` field:
-	
+
 ```json
 "jquery": "https://code.jquery.com/jquery-3.1.0.min.js"
 ```
-	
+
 Import jQuery in your web part:
-	
+
 ```typescript
 import * as $ from 'jquery';
 ```
-	
+
 Use jQuery in your web part:
-	
+
 ```javascript
 alert( $('#foo').val() );
 ```
 
 ## Loading a non-AMD module
 
-Some scripts follow the legacy JavaScript pattern of storing the library on the global namespace. This pattern
-is now deprecated in favor of [Universal Module Definitions (UMD)](https://github.com/umdjs/umd)/[Asynchronous Module Definitions (AMD)](https://en.wikipedia.org/wiki/Asynchronous_module_definition) or [ES6 modules](https://github.com/lukehoban/es6features/blob/master/README.md#modules). However, you might need to load such libraries in your web part. 
+Some scripts follow the legacy JavaScript pattern of storing the library on the global namespace. This pattern is now deprecated in favor of [Universal Module Definitions (UMD)](https://github.com/umdjs/umd)/[Asynchronous Module Definitions (AMD)](https://en.wikipedia.org/wiki/Asynchronous_module_definition) or [ES6 modules](https://github.com/lukehoban/es6features/blob/master/README.md#modules). However, you might need to load such libraries in your web part.
+
+> **Tip:** It's hard to determine manually whether the script that you're trying to load is an AMD or a non-AMD script. This is especially the case if the script that you're trying to load is minified. If your script is hosted on a publicly accessible URL, you can use the free [Rencore SharePoint Framework Script Check](https://rencore.com/sharepoint-framework/script-check/) tool to determine the type of script for you. Additionally, this tool will let you know whether the hosting ___location from which you're loading the script is properly configured.
 
 To load a non-AMD module, you add an additional property to the entry in your **config.json** file.
 
@@ -133,39 +132,38 @@ var ContosoJS = {
 };
 ```
 
-
 Create typings for the script in a file called **contoso.d.ts** in the web part folder.
-	
+
 ```typescript
 declare module "contoso" {
-	interface IContoso {
-		say(text: string): void;
-		sayHello(name: string): void;
-	}
-	var contoso: IContoso;
-	export = contoso;
+    interface IContoso {
+        say(text: string): void;
+        sayHello(name: string): void;
+    }
+    var contoso: IContoso;
+    export = contoso;
 }
 ```
-	
+
 Update the **config.json** file to include this script. Add an entry to the **externals** map:
-	
+
 ```json
 {
-	"contoso": {
-		"path": "https://contoso.com/contoso.js",
-		"globalName": "ContosoJS"
-	}
+    "contoso": {
+        "path": "https://contoso.com/contoso.js",
+        "globalName": "ContosoJS"
+    }
 }
 ```
-	
+
 Add an import to your web part code:
-	
+
 ```typescript
 import contoso from 'contoso';
 ```
-	
+
 Use the contoso library in your code:
-	
+
 ```typescript
 contoso.sayHello(username);
 ```
@@ -174,11 +172,11 @@ contoso.sayHello(username);
 
 Many libraries have dependencies on another library. You can specify such dependencies in the **config.json** file using the **globalDependencies** property.
 
-Note that you don't have to specify this field for non-AMD modules; they will properly import each other. However, it is important to note that a non-AMD module have a AMD module as a dependency.
+> **Important:** Note, that you don't have to specify this field for AMD modules; they will properly import each other. However, a non-AMD module cannot have an AMD module as a dependency. In some cases, it is possible to load an AMD script as a non-AMD script. This is often required when working with jQuery, which by itself is an AMD script, and jQuery plugins which most of the times are distributed as non-AMD scripts and which depend on jQuery.
 
 There are two examples of this.
 
-#### Non-AMD module has a non-AMD module dependency
+### Non-AMD module has a non-AMD module dependency
 
 This example involves two fictional scripts. These are in the **src/** folder, although they can also be loaded from a CDN.
 
@@ -205,8 +203,8 @@ var Contoso = {
 };
 ```
 
-Add or create tpyings for this class. In this case, you will create `Contoso.d.ts`, which contains typings for both JavaScript files. 
-	
+Add or create typings for this class. In this case, you will create `Contoso.d.ts`, which contains typings for both JavaScript files.
+
 **contoso.d.ts**
 
 ```typescript
@@ -224,7 +222,7 @@ declare module "contoso" {
 ```
 
 Update the **config.json** file. Add two entries to **externals**:
-	
+
 ```json
 {
      "contoso": {
@@ -238,16 +236,16 @@ Update the **config.json** file. Add two entries to **externals**:
      }
 }
 ```
-    
+
 Add imports for Contoso and ContosoUI:
-	   
+
 ```typescript
 import contoso = require('contoso');
 require('contoso-ui');
 ```
 
 Use the libraries in your code:
-	
+
 ```typescript
 contoso.EventList.alert();
 ```
@@ -256,17 +254,19 @@ contoso.EventList.alert();
 
 Loading SharePoint JSOM is essentially the same scenario as loading non-AMD scripts that have dependencies. This means using both the **globalName** and **globalDependency** options.
 
+> **Important:** Please note, that the following approach will cause error in classic SharePoint pages, where SharePoint JSOM is already loaded. If you require your web part to work with both classic and modern pages then you should first check if SharePoint JSOM is already available and if it isn't, load it dynamically using the **SPComponentLoader**.
+
 Install typings for Microsoft Ajax which is a dependency for JSOM typings:
 
-```
+```sh
 npm install @types/microsoft-ajax --save
 ```
 
 Install typings for the JSOM:
 
-```
+```sh
 npm install @types/sharepoint --save
-``` 
+```
 
 Add entries to the `config.json`:
 
@@ -295,7 +295,7 @@ Add entries to the `config.json`:
 ```
 
 In your web part, add the require statements:
-	
+
 ```typescript
 require('sp-init');
 require('microsoft-ajax');
@@ -305,7 +305,7 @@ require('sharepoint');
 
 ## Load localized resources
 
-Loading localized resources is simple. There is a map in **config.json** called **localizedResources** with which you can describe how to load localized resources. Paths in this map are relative to the **lib** folder and must not contain a leading slash (**/**).
+There is a map in **config.json** called **localizedResources** with which you can describe how to load localized resources. Paths in this map are relative to the **lib** folder and must not contain a leading slash (**/**).
 
 In this example, you have a folder **src/strings/**. In this folder are several JavaScript files with names such as **en-us.js**, **fr-fr.js**, **de-de.js**. Because each of these files must be loadable by the module loader, they must contain a CommonJS wrapper. For example, in **en-us.js**:
 
@@ -326,7 +326,7 @@ Edit the **config.json** file. Add an entry to **localizedResources**. The **{lo
     "strings": "strings/{locale}.js"
 }
 ```
-    
+
 Add typings for your strings. In this case, you have a file **MyStrings.d.ts**:
 
 ```typescript
@@ -341,13 +341,13 @@ declare module 'mystrings' {
     export = strings;
 }
 ```
-    
+
 Add imports for the strings in your project:
-	
+
 ```typescript
-import * as strings from 'strings';
+import * as strings from 'mystrings';
 ```
-    
+
 Use the strings in your project:
 
 ```typescript