reactjs-02/radium.html at master · entirc/reactjs-02 · 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Radium</title>
</head>

<link href="css/estilo.css" rel="stylesheet" type="text/css"/>

<body>
    <h1>ENTI - Aprendendo React #2</h1>

    <h2>Biblioteca</h2>
    <a href="https://formidable.com/open-source/radium/" target="_">Radium</a>

    <h2>Exemplos</h2>
    <a href="https://egghead.io/lessons/react-styling-a-react-button-component-with-radium" target="_">React Styling a React Button Component with Radium</a>
    <br/><br/>
    <div id="conteudo"></div>
</body>

<!--React v15.6.1 -->
<script src="js/vendors/react.js"></script>
<script src="js/vendors/react-dom.js"></script>
<script src="js/vendors/babel-core-5.8.38.js"></script>
<script src="js/vendors/radium.js"></script>
<script src="js/vendors/tinycolor2-1.4.1.js"></script>

<script type="text/babel">

const style = {
  backgroundColor: '#07d',
  border: 'none',
  borderRadius: 4,
  color: '#fff',
  padding: '5px 20px',
  ':hover':{
    backgroundColor:'green'
  }
}

const ButtonSR = ({children}) => (
  <button style={style}>
    {children}
  </button>
)

const ButtonCR = Radium(({children}) => (
  <button style={style}>
    {children}
  </button>
))


var studentList = [
    {name:"Sandeep", subject:"Physics", roll:4},
    {name:"John", subject:"Chemistry", roll:1},
    {name:"Smith", subject:"Physics", roll:2},
    {name:"Ramesh", subject:"Chemistry", roll:3}
];
var styles = {
    header: {
        color: '#999',
        ':hover':{
            color:'#00f'
        },
        ':focus':{
            color:'#f00'
        },
        ':active':{
            color:'#000'
        }
    }
};

//@Radium
class StudentListComponent extends React.Component{
    render() {
        var results = this.props.results;
        return (
            <ol>
                {studentList.map(function(student) {
                    return <li  key={student.roll}>
                        <a key={student.roll} style={[styles.header]}  href="#">
                            {student.name}
                        </a>
                    </li>;
                })}
            </ol>
        );
    }
};

StudentListComponent = Radium(StudentListComponent);

let destino = document.querySelector("#conteudo")

ReactDOM.render(
    <div>
        <ButtonSR >Sem Radium</ButtonSR>&nbsp;
        <ButtonCR >Com Radium</ButtonCR><br/>
        <StudentListComponent  />
    </div>,destino
)

</script>

</html>