Tutorial by Examples: u

import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Route, BrowserRouter as Router, Link } from 'react-router-dom'; class Home extends React.Component<any, any> { render() { return ( <div> <div>HOME</div> <d...

import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Route, BrowserRouter as Router, Link, match } from 'react-router-dom'; // define React components for multiple pages class Home extends React.Component<any, any> { render() { return ( <div&g...

This solution is more involved, leveraging custom TypeScript decorators which inject match, history and/or location data into your React.Component class, which gets you full type safety without needing any type guards, as the previous example required. // Routed.ts - defines decorators import { Ro...

Stack corruptions are annoying bugs to look at. As the stack is corrupted, the debugger often can't give you a good stack trace of where you are and how you got there. This is where safe-stack comes into play. Instead of using a single stack for your threads, it will use two: A safe stack and a dan...

Let's say we have a component that should only be displayed if the user is logged in. So we create a HOC that checks for the authentication on each render(): AuthenticatedComponent.js import React from "react"; export function requireAuthentication(Component) { return class Auth...

PageTS Settings: ## Default Image cropping ## TCEFORM.sys_file_reference.crop.config.cropVariants { default { title = Desktop selectedRatio = NaN allowedAspectRatios { NaN { title = Free value = 0.0 } ...

Include the plugin from a CDN or locally after including jQuery. Then attach the .validate() method to the form in order to initialize the plugin. Within this method you can define your rules, custom messages, and other options. <script type="text/javascript" src="//cdnjs.cloudf...

my.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'myPipe'}) export class MyPipe implements PipeTransform { transform(value:any, args?: any):string { let transformedValue = value; // implement your transformation logic here return transformedValue; }...

The NgFor directive instantiates a template once per item from an iterable. The context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable. To customize the default tracking algorithm, NgFor supports trackBy option. ...

I found this to be the way to properly nest children routes inside the app.routing.ts or app.module.ts file (depending on your preference). This approach works when using either WebPack or SystemJS. The example below shows routes for home, home/counter, and home/counter/fetch-data. The first and l...

Router enables navigation from one view to another based on user interactions with the application. Following are the steps in implementing basic routing in Angular - NOTE: Ensure you have this tag: <base href='/'> as the first child under your head tag in your index.html file. This ele...

One common scenario is to wait for a number of requests to finish before continuing. This can be accomplished using the forkJoin method. In the following example, forkJoin is used to call two methods that return Observables. The callback specified in the .subscribe method will be called when both O...

The following example demonstrates a simple HTTP GET request. http.get() returns an Observable which has the method subscribe. This one appends the returned data to the posts array. var posts = [] getPosts(http: Http): { this.http.get(`https://jsonplaceholder.typicode.com/posts`) ....

Detailed instructions on getting facebook-ads-api set up or installed.

Folder Structure . ├── lib ├── modules | ├── misc.js | ├── someFunctions.js ├── app.js ├── index.html ├── package.json ├── webpack.config.js └── webserver.js package.json { "name": "webpack-example-with-nodejs", "version": "1.0.0", ...

Add repository repositories { maven { url "https://github.com/QuickBlox/quickblox-android-sdk-releases/raw/master/" } } Add in Project Gradle for Chat Functionality dependencies { compile("com.quickblox:quickblox-android-sdk-chat:2.6.1&...

Detailed instructions on getting internet-explorer set up or installed.

def quicksort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) / 2] left = [x for x in arr if x < pivot] middle = [x for x in arr if x == pivot] right = [x for x in arr if x > pivot] return quicksort(left) + middle + quicksort(right) print qu...

Sherlock captures all your crashes and reports them as a notification. When you tap on the notification, it opens up an activity with all the crash details along with Device and Application info How to integrate Sherlock with your application? You just need to add Sherlock as a gradle dependency i...

A for loop iterate through items in an enumeration program EnumLoop; uses TypInfo; type TWeekdays = (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday); var wd : TWeekdays; begin for wd in TWeekdays do WriteLn(GetEnumName(TypeInfo(TWeekdays), Ord(wd))); ...