(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
function mapValues(obj, fn) { | |
return Object.keys(obj).reduce((result, key) => { | |
result[key] = fn(obj[key], key); | |
return result; | |
}, {}); | |
} | |
function pick(obj, fn) { | |
return Object.keys(obj).reduce((result, key) => { | |
if (fn(obj[key])) { |
⚠ This post is fairly old. I don't keep it up to date. Be sure to see comments where some people have posted updates
What this will cover
www.website.com
to website.com
index.html
)When I try to learn something, I search around for the optimal approach. In the case of hooks I found two reasonable approaches and one approach that only makes sense in some use-cases. Below I've documented all of them.
I want to change the style of a text element when the user is clicking down on it. Because this is React Native for web, there are no CSS pseudo classes, so I need to manage all of the state myself. Because classes like active
, focus
, hover
, and visited
could be commonly used the API must be very self-contained.
... and I want people to like me, so I'm using hooks (the old implementation used render props).
if ($request_uri = /) { | |
set $test A; | |
} | |
if ($host ~* teambox.com) { | |
set $test "${test}B"; | |
} | |
if ($http_cookie !~* "auth_token") { | |
set $test "${test}C"; |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
Below are many examples of function hoisting behavior in JavaScript. Ones marked as works
successfuly print 'hi!' without errors.
To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js
(I may be using incorrect terms below, please forgive me)
import { Component } from "React"; | |
export var Enhance = ComposedComponent => class extends Component { | |
constructor() { | |
this.state = { data: null }; | |
} | |
componentDidMount() { | |
this.setState({ data: 'Hello' }); | |
} | |
render() { |
$(function () { | |
"use strict"; | |
// for better performance - to avoid searching in DOM | |
var content = $('#content'); | |
var input = $('#input'); | |
var status = $('#status'); | |
// my color assigned by the server | |
var myColor = false; |