react-from-zero/01-element-factory.html at master · HackEAC/react-from-zero · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>

<title>01 Element Factory - 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'></div>

<script>
  // React.createElement() needs type, properties, children.
  // This is less verbose than using plain object literals,
  // it hides the $$type/Symbol stuff mentioned in 0
  var reactElement = React.createElement('h1', {

    className: 'abc',

    style: {
      textAlign: 'center',
    },

    onClick: function () { alert('click') },

  }, 'Hello, world!')


  // the second argument is the property object and has to be null if empty
  var anotherElement = React.createElement('p', null, 'A nice text paragraph.')

  var renderTarget = document.getElementById('app')

  ReactDOM.render(reactElement, renderTarget)

</script>