Components are individual pieces of a web page interface like:
Imagine an auction application with several parts.
In this application there are many changes that can happen at once.
React makes managing a complicated page like this easier by determining what the page needs to look like at any given rendered frame.
For every given frame React:
This lets you as the programmer:
React lets you to declare what you want the page to be.
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, React!'
), document.getElementById('root'));
What is Declarative Intent?
Declarative means that you do not instruct the computer about what steps to take in order to achieve your desired result.
Declarative is different than Imperative code which:
An imperative example would be manipulating the DOM like this:
window.onLoad function () {
var heading = document.createElement('h1');
var text = document.createTextNode('Hello DOM!');
heading.appendChild(text);
document.body.appendChild(heading);
}
See the Pen mLqoGK by Joshua Burke (@Dangeranger) on CodePen.
Something a little more complicated
ReactDOM.render(
React.createElement(
"div",
null,
React.createElement(
"form",
{
id: "my-form",
onSubmit: this.handleSubmit
},
React.createElement(
"input",
{
id: "create",
type: "text",
placeholder: "something"
}
)
)
), document.getElementById('root'));
Given a <root>
element exists the result is:
<div>
<form id="my-form">
<input id="create" type="text" placeholder="something"/>
</form>
</div>
But when the form initiates a onSubmit
event React will handle the changes using the handleSubmit
handler function.
Accepts a description of the components that make up the page, and what DOM node to render the results to.
ReactDOM.render()
// API signature
ReactDOM.render(element, container[, callback])
element
=> The DOM element and children to generate.container
=> What DOM element to generate within.callback
=> Optional function to call after generation.Accepts an element type, props of the element, and child elements.
React.createElement()
// API signature
React.createElement(
type,
[props],
[...children]
)
type
=> A DOM element name like div
, form
or h1
.props
=> The element attributes like id
, class
, placeholder
, onChange
, or onSubmit
.children
=> Child elements to nest within the generated element.React allows you to:
/