// connect() is a function that injects Redux-related props into your component. | |
// You can inject data and callbacks that change that data by dispatching actions. | |
function connect(mapStateToProps, mapDispatchToProps) { | |
// It lets us inject component as the last step so people can use it as a decorator. | |
// Generally you don't need to worry about it. | |
return function (WrappedComponent) { | |
// It returns a component | |
return class extends React.Component { | |
render() { | |
return ( |
"A phantom type is a parametrised type whose parameters do not all appear on the right-hand side of its definition..." Haskell Wiki, PhantomType
The following write-up is intended as an introduction into using phantom types in ReasonML.
Taking a look at the above definition from the Haskell wiki, it states that phantom types are parametrised types where not all parameters appear on the right-hand side. Let's try to see if we can implement a similar example as in said wiki.
There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.
- ffmpeg
- macOS:
brew install ffmpeg
- Ubuntu/Debian:
apt install ffmpeg
- macOS:
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
There are a couple of likely reasons this warning could be appearing:
-
Are you using
{...this.props}
orcloneElement(element, this.props)
? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component. -
You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
-
React does not yet reco
// getComponent is a function that returns a promise for a component | |
// It will not be called until the first mount | |
function asyncComponent(getComponent) { | |
return class AsyncComponent extends React.Component { | |
static Component = null; | |
state = { Component: AsyncComponent.Component }; | |
componentWillMount() { | |
if (!this.state.Component) { | |
getComponent().then(Component => { |
@tracked
is a decorator for Preact that makes working with state values no different than properties on your component instance.
It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.
tracked
has no dependencies and works with any component implementation that uses this.state
and this.setState()
.
var Dialog = React.createClass({ | |
render: function() { | |
// 1) render nothing, this way the DOM diff will never try to do | |
// anything to it again, and we get a node to mess with | |
return React.DOM.div(); | |
}, | |
componentDidMount: function() { | |
// 2) do DOM lib stuff | |
this.node = this.getDOMNode(); |
/** | |
* A Javascript test runner in 20 lines of code | |
* From http://joakimbeng.eu01.aws.af.cm/a-javascript-test-runner-in-20-lines/ | |
*/ | |
(function () { | |
// The test queue: | |
var tests = []; | |
// Function to add tests: | |
this.test = function test (name, cb) { |
<html> | |
<head> | |
<title>Mate1 Test Runner</title> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
// A test is the base class for all tests | |
// that will be run by the test runner. | |
Test = function() { |