reacttest/dataToUi.html at master · wjdrudtn225/reacttest · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React! React! React! </title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <style>
        #container{
            padding: 50px;
            background-color: #FFF;
        }
    </style>

</head>


<body>
<script type = "text/babel">
<div id = "container"></div>


    var Circle = React.createClass({
        render: function () {
            var circleStyle = {
                padding: 10,
                margin: 20,
                display: "inline-block",
                backgroundColor: this.props.bgColor,
                borderRadius: "50%",
                width: 100,
                height: 100,
            };

            return (
                <div style={circleStyle}>
                </div>
            );
        }
    });

    var colors =["#393E41","#E94F37","#1C89BF","A1D363","#85FFC7","#297373","#FF8552","#A40E4C"];

    var renderData =[];

    for( var i =0; i<colors.length; i++){
        renderData.push(<Circle bgColor={colors[i]}/>);
    }
    ReactDOM.render(
        <div>
            {renderData}
        </div>,
        destionation
    );
</script>

</body>
</html>