mirror of
https://github.com/kay-is/react-from-zero.git
synced 2026-04-24 03:00:06 -04:00
68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
<!doctype html>
|
|
|
|
<title>00 Object Elements - React From Zero</title>
|
|
|
|
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
|
|
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.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 an React element and not just some user data
|
|
// React.createElement() sets it for your
|
|
$$typeof: magicValue,
|
|
|
|
// This defines the HTML-tag
|
|
type: 'h1',
|
|
|
|
// This defines the properties that get passed down into 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, which basically try to normalize browser behaviour
|
|
onClick: function (notYourRegularEvent) { alert('click') },
|
|
},
|
|
|
|
}
|
|
|
|
// another element that doesn't have much configuration
|
|
var anotherElement = {
|
|
$$typeof: magicValue,
|
|
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> |