You can see what this component implements at https://CJSHayward.com/missing.html. For our first component, we pick a mostly skeletal implementation:
var YouPick = React.createClass({
getDefaultProps: function() {
return null;
},
getInitialState: function() {
return null;
},
render: function() {
return <div />;
}
});This skeleton returns empty, "falsy" values, which we will override. What we want to do is take two strings, break them down into one-character substrings (excluding tags), then display more and more of the first string, and then repeat the second string. It makes for a very old joke displayed for the user.
There is a division of labor between properties, meant to be set once and never changed and state, meant to allow changing. Note that state, being mutable, should be treated privately, so as to avoid the shared mutable state that Facebook declared war on. Technically, properties can be...