tkh44

import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion

const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }

const AnimationExample = () => (
  <Router>
    <div>
      <ul>

TylerK

import React from 'react'
import { render } from 'react-dom';
import { Router, Route } from 'react-router-dom';
import LazyRoute from 'lazy-route';

const App = () => {
  render() {
    return (
      <Router>
        <Route

mjackson

// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'

ReactDOM.render(
  <Router>
    <Route path="/about" component={About}/>
    <Route path="/:username" component={User}/>
  </Router>
)

sergiodxa

// with props
import React, { Component } from 'react';

// this method work as a our base `handleClick` function
function handleClick(name, event) {
  alert(`hello ${name}`);
}

class App extends Component {
  constructor(props) {

developit

import { h, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  The key is, instead of passing virtual DOM elements as "children" to this component,
 *  you pass a _function_ that returns virtual DOM elements. Fetch calls that function and passes it the network data.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {

developit

import { h, cloneElement, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  Just to demonstrate a compositional component that requires input massaging.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {
    this.update();

ljharb

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

nepsilon

What you should know about tabindex

tabindex is an HTML core global attribute.

With it you can control in what order the elements get the focus, when the user presses the TAB key. You can also prevent an element to gain focus through the TAB key.

Typical example:

1. We have a login form

gr2m

// It could be done more elegantly, instead of using glob it could walk the 
// relative dependencies, so it would be more flexible and could actually 
// be turned into a package that could be run before publishing to npm
var fs = require('fs')

var detective = require('detective')
var glob = require('glob')
var _ = require('lodash')
var buildinModuleNames = require('builtin-modules/static')

busypeoples

Basic setup for using Enzyme/Mocha/Chai with create-react-app

This is a temporary solution. Might change in the near future, this depends on how create-react-app will implement testing.

create-react-app quick-test-example

cd quick-test-example

npm run eject