Functional DOM programming

React.renderComponent(
React.DOM.div(
null,
React.DOM.h1(null, 'Hello world!'),
React.DOM.p(null, 'This DOM was rendered from JS.')
),
document.body
);
var text = 'This text was created in <strong>JS</strong> and rendered to the DOM.';React.renderComponent(
React.DOM.div(
null,
React.DOM.h1(null, 'Hello world!'),
React.DOM.p(null, text)
),
document.body
);
// Type your name into the text field to prove that
// the DOM is not being destroyed and rebuilt each
// time.
function render() {
React.renderComponent(
React.DOM.div(
null,
React.DOM.h1(null, ‘Hello world!’),
React.DOM.form(
null,
‘Your name is ‘,
React.DOM.input({
type: ‘text’,
placeholder: ‘Your name here’
})
),
React.DOM.p(null, ‘The time is ‘ + new Date())
),
document.body
);
}
setInterval(render, 1000);
function zeroPad(s) {
s = s.toString();
if (s.length === 1) {
return ‘0' + s;
}
return s;
}
function clockComponent(time) {
return React.DOM.strong(
null,
time.getHours(),
‘:’,
zeroPad(time.getMinutes()),
‘:’,
zeroPad(time.getSeconds())
);
}

function render() {
React.renderComponent(
React.DOM.div(
null,
React.DOM.h1(null, ‘Hello world!’),
React.DOM.p(
null,
‘The time is ‘,
clockComponent(new Date())
)
),
document.body
);
}
setInterval(render, 1000);
var toggled = false;function render() {
React.renderComponent(
React.DOM.div(
null,
React.DOM.h1({
className: toggled ? ‘red’ : ‘blue’
}, ‘Hello, world!’),
React.DOM.button({
onClick: function() {
toggled = !toggled;
render();
}
}, ‘Toggle color’)
),
document.body
);
}
render();
var todos = [];function todoItemComponent(text) {
return React.DOM.li({
onClick: function() {
todos = todos.filter(function(candidateText) {
return candidateText !== text;
});
render();
}
}, text);
}
function todoListComponent() {
if (todos.length === 0) {
return React.DOM.p(null, ‘No TODOs on the list.’);
}

return React.DOM.ul(
null,
todos.map(todoItemComponent)
);
}
function addFormComponent() {
return React.DOM.form({
onSubmit: function(e) {
e.preventDefault();

var domNode = e.target.elements[0];
todos.push(domNode.value);
// We *can* do this functionally but it’s outside
// the scope of this tutorial (there are a few
// tricks you need to do)
domNode.value = ‘’;
render();
}
}, React.DOM.input({
placeholder: ‘New TODO item’
}), React.DOM.input({
type: ‘submit’,
value: ‘Add TODO’
}));
}
function render() {
React.renderComponent(
React.DOM.div(
null,
React.DOM.h1(null, ‘TODO list’),
todoListComponent(),
addFormComponent()
),
document.body
);
}
render();

--

--

--

CEO @ Smyte. OG React.js. Ex-Facebook and Instagram.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pete Hunt

Pete Hunt

CEO @ Smyte. OG React.js. Ex-Facebook and Instagram.

More from Medium

Code Story is on Goodpods!

CS 373 Spring 2022: Saran Chockan Blog # 14

[ReactJS] ITSC mc quiz 28jan

CrackChronicles Volume I