Skip to content

Instantly share code, notes, and snippets.

@emersonbrogadev

emersonbrogadev/README.MD

Last active September 4, 2019 15:11
Show Gist options
  • Save emersonbrogadev/5719778206ff50366004c35a7becc120 to your computer and use it in GitHub Desktop.
Save emersonbrogadev/5719778206ff50366004c35a7becc120 to your computer and use it in GitHub Desktop.
Download ZIP
React Lights - Eventos - DEMO
Raw
README.MD

React Lights - Eventos - DEMO

DEMO

O conteúdo aqui apresentado é para exemplificar como trabalhamos com eventos no React.

Existe um video explicando passo a passo sobre o conteúdo desse repositório.

Esse código é apenas para fins educativos e foi formatado de forma a exemplificar conceitos.

Rodando o Projeto

Baixe o html abaixo e abra no browser.

Imagem do projeto rodando

React Lights

Se ainda não segue, conheça as nossas Redes Sociais

➜ Veja as dicas no Instagram

➜ Assita nosso canal no YouTube

➜ Curta nossa página no Facebook

➜ Não perca as atualizações no Twitter

➜ Veja os repositórios no Github

EmersonBroga.com
Raw
demo-2.html
<!DOCTYPE html>
<html>
<head>
<title>Eventos - Lights App - Demo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#root {
width: 100%;
height: 100%;
font-family: "Lato",sans-serif;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room.dark {
background: #0F2027;
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
}
.room.light {
background: #FFEFBA;
background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
background: linear-gradient(to right, #FFFFFF, #FFEFBA);
}
.room button {
width: 360px;
height: 120px;
outline: none;
cursor: pointer;
background: none;
transition: .5s;
font-size: 38px;
border-radius: 5px;
}
.room.light button { border: solid 3px #000; color: #000; }
.room.dark button { border: solid 3px #fff; color: #fff; }
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Lights extends React.Component {
constructor(props) {
super(props);
this.state = {isOn: true};
}
toggle = () => {
this.setState(state => ({
isOn: !state.isOn
}));
}
render() {
const { isOn } = this.state;
const roomClass = (isOn) ? 'light' : 'dark';
return (
<div className={`room ${roomClass}`}>
<button onClick={this.toggle}>
{this.state.isOn ? 'Turn OFF' : 'Turn ON'}
</button>
</div>
);
}
}
ReactDOM.render(<Lights />, document.getElementById('root'));
</script>
</body>
</html>
Raw
demo-3.html
<!DOCTYPE html>
<html>
<head>
<title>Eventos - Lights App - Demo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#root {
width: 100%;
height: 100%;
font-family: "Lato",sans-serif;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room.dark {
background: #0F2027;
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
}
.room.light {
background: #FFEFBA;
background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
background: linear-gradient(to right, #FFFFFF, #FFEFBA);
}
.room button {
width: 360px;
height: 120px;
outline: none;
cursor: pointer;
background: none;
transition: .5s;
font-size: 38px;
border-radius: 5px;
}
.room.light button { border: solid 3px #000; color: #000; }
.room.dark button { border: solid 3px #fff; color: #fff; }
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Lights extends React.Component {
constructor(props) {
super(props);
this.state = {isOn: true};
}
toggle() {
this.setState(state => ({
isOn: !state.isOn
}));
}
render() {
const { isOn } = this.state;
const roomClass = (isOn) ? 'light' : 'dark';
return (
<div className={`room ${roomClass}`}>
<button onClick={() => this.toggle() }>
{this.state.isOn ? 'Turn OFF' : 'Turn ON'}
</button>
</div>
);
}
}
ReactDOM.render(<Lights />, document.getElementById('root'));
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Eventos - Lights App - Demo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#root {
width: 100%;
height: 100%;
font-family: "Lato",sans-serif;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.room.dark {
background: #0F2027;
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
}
.room.light {
background: #FFEFBA;
background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
background: linear-gradient(to right, #FFFFFF, #FFEFBA);
}
.room button {
width: 360px;
height: 120px;
outline: none;
cursor: pointer;
background: none;
transition: .5s;
font-size: 38px;
border-radius: 5px;
}
.room.light button { border: solid 3px #000; color: #000; }
.room.dark button { border: solid 3px #fff; color: #fff; }
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Lights extends React.Component {
constructor(props) {
super(props);
this.state = {isOn: true};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(state => ({
isOn: !state.isOn
}));
}
render() {
const { isOn } = this.state;
const roomClass = (isOn) ? 'light' : 'dark';
return (
<div className={`room ${roomClass}`}>
<button onClick={this.toggle}>
{this.state.isOn ? 'Turn OFF' : 'Turn ON'}
</button>
</div>
);
}
}
ReactDOM.render(<Lights />, document.getElementById('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment