Tutorial by Examples: r

GitHub Flavored Markdown (sometimes abbreviated to GFM) makes it easier to work with markdown on GitHub.com. Key features of GFM include: code indentation task list support easy GitHub issue referencing automatic GitHub username and SHA detection automatic url detection emoji support GFM...

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 want to console.log each time the component mounts: hocLogger.js export default function hocLogger(Component) { return class extends React.Component { componentDidMount() { console.log('Hey, we are mounted!'); } render() { return <Component {...this....

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...

(defrecord Logline [datetime action user id]) (def pattern #"(\d{8}-\d{2}:\d{2}:\d{2}.\d{3})\|.*\|(\w*),(\w*),(\d*)") (defn parser [line] (if-let [[_ dt a u i] (re-find pattern line)] (->Logline dt a u i))) Define a sample line : (def sample "20170426-17:20:04...

About this Project This is simple boilerplate project. This post will guide you to set up the environment for ReactJs + Webpack + Bable. Lets get Started we will need node package manager for fire up express server and manage dependencies throughout the project. if you are new to node package man...

app.module.ts Add these into your app.module.ts file to use reactive forms import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @...

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.

This is a just a simple example of how to use GooglePlay Service's ActivityRecognitionApi. Although this is a great library, it does not work on devices that do not have Google Play Services installed. Docs for ActivityRecognition API Manifest <!-- This is needed to use Activity Recognition! -...

PathSense activity recognition is another good library for devices which don't have Google Play Services, as they have built their own activity recognition model, but requires developers register at http://developer.pathsense.com to get an API key and Client ID. Manifest <application andro...