mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-01-11 23:58:09 -05:00
75 lines
2.3 KiB
HTML
75 lines
2.3 KiB
HTML
<!doctype html>
|
|
|
|
<title>00 Object Elements - React From Zero</title>
|
|
|
|
<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
|
|
|
|
<div id="app">
|
|
<!--The render target of our React application-->
|
|
</div>
|
|
|
|
<script>
|
|
// React uses ES2015 Symbols to "tag" its element-objects.
|
|
// It uses a magic number as fallback on older browsers.
|
|
var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7;
|
|
|
|
// React uses virtual DOM elements, which become real DOM elements
|
|
// on a render. A virtual DOM element can be defined as a simple
|
|
// object literal. Normally you would use the React.createElement()
|
|
// to create an element. This is what the return value of a
|
|
// React.createElement() call could look like.
|
|
var reactElement = {
|
|
// This special property will be checked by React to ensure this
|
|
// object
|
|
// is a React element and not just some user data
|
|
// React.createElement() sets it for you
|
|
$$typeof: magicValue,
|
|
|
|
// This will also be checked by React. We will be talking about
|
|
// references later, but if you're not using them, this has to be
|
|
// set to null and not undefined
|
|
ref: null,
|
|
|
|
// This defines the HTML-tag
|
|
type: "h1",
|
|
|
|
// This defines the properties that get passed down to the element
|
|
props: {
|
|
// In this example there is just a single text node as child
|
|
children: "Hello, world!",
|
|
|
|
// a CSS class
|
|
className: "abc",
|
|
|
|
// styles can be passed as object literals
|
|
// React uses camelCase instead of dashed-case (like CSS/D3 do)
|
|
style: {
|
|
textAlign: "center"
|
|
},
|
|
|
|
// event handlers can be added as properties, too
|
|
// React uses synthetic events to try to normalize browser
|
|
// behavior
|
|
onClick: function (notYourRegularEvent) {
|
|
alert("click");
|
|
}
|
|
}
|
|
};
|
|
|
|
// another element that doesn"t have much configuration
|
|
var anotherElement = {
|
|
$$typeof: magicValue,
|
|
ref: null,
|
|
type: "p",
|
|
props: {
|
|
children: "A nice text paragraph."
|
|
}
|
|
};
|
|
|
|
// React needs a DOM element as render target
|
|
var renderTarget = document.getElementById("app");
|
|
|
|
// ReactDOM is responsible for inserting the element into the DOM
|
|
ReactDOM.render(reactElement, renderTarget);
|
|
</script> |