react/basics.html at master · srinidhiprabandham/react · 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>I'm in a React app!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- ReactJS  -->
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
  </head>
  <body>
    <div class="container" id="react-app"></div>
  </body>

  <!-- Hack caz i'm lazy -->
  <script type=text/javascript>
    var DOM = ReactDOM
    var ReactComponent = React.createClass
    var ReactElement = React.createElement
  </script>

  <!-- This is just going over board -->
  <script type='text/javascript'>
    var h5 = ReactComponent({
      propTypes: { value: React.PropTypes.string.isRequired, css_class: React.PropTypes.string, id: React.PropTypes.string },
      render: function() { return( ReactElement('h1',{className: this.props.css_class, id: this.props.id },this.props.value) ) },
    })
  </script>

  <!-- This is going to render one individual component (one contact) -->
  <script type="text/javascript">
    //This is a react component.
    //All react components have this signature.
    //1. They are defined using the createClass ->
    //     Which takes in an object with two keys.
    //      a) propTypes (The values that can be passed to them, in this case it is an object)
    //      b) render (This is a function which returns the actual html for this component.)
    var ContactItem = ReactComponent({
      //From the given object, we take only the name, email and description and we say we want the name and email to be present
      propTypes: {
        name: React.PropTypes.string.isRequired,
        email: React.PropTypes.string.isRequired,
        description: React.PropTypes.string,
      },
      render: function() {
        //This is the actual HTML that is returned. NOTE the nesting. And the access of elements from propTypes.
        return (
          ReactElement('div', {className: 'row col-xs-12'},
            ReactElement('h5',{className: 'text-success'},this.props.name),
            ReactElement('a', {className: 'text-danger',href: 'mailto:' + this.props.email},this.props.email),
            ReactElement('h6',{className: 'text-muted'},this.props.description),
            ReactElement("hr",{className: 'text-danger'})
          )
        )
      },
    })
  </script>

  <!--This is to set a list of contacts -->
  <script type="text/javascript">
    var ContactView = ReactComponent({
      propTypes: {
        contacts: React.PropTypes.array.isRequired,
      },
      render: function() {
        var contactElement = this.props.contacts
          .map(function(contact) {
            return ReactElement(ContactItem,contact)
          })
        return (
          ReactElement("div",{className: 'row col-xs-12'},
            ReactElement(h5,{value: 'Contacts',css_class: "text-primary",id: 'test'}),
            ReactElement("hr",{className: 'text-muted'}),
            ReactElement("div",{},contactElement)
          )
        )
      },
    })
  </script>
  <!--This is the main component where we render the other components-->
  <script type="text/javascript">
    var contacts = [{ name: "Prabandham Srinidhi", email: "sriprabandham@gmail.com", description: "Learning ReactJS !!!" },
      { name: "Krisna", email: "krishna@gmail.com", description: "Learning Framework 7 !!!" },
      { name: "Abhishek", email: "abhi@gmail.com", description: "Learning Python!!!" },
      { name: "Ashwin", email: "ashwin@gmail.com", description: "Learning how to drive a car!!!" },
    ]

    //ReactDom render takes in two options 1. the component, 2. the place where it has to render.
    DOM.render(
        //Here we are just calling our contact-item component by passing it the contact object
        ReactElement(ContactView,{ contacts: contacts }), document.getElementById('react-app')
    )
  </script>
</html>


<!-- NOTE:
  DOM is ReactDOM
  ReactComponent = React.createClass
  ReactElement = React.createElement

  This just makes it easier to access things.

  var h1 = ReactElement('h1',{className: 'blue-header'})
  DOM.render(ReactElemnt(h1),document.getElementByid('react-app'))

  Now to do a basic app using create-react-app
-->