emersonbrogadev/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    React User - uma demonstração dos states sendo passados para os componentes filhos

DEMO 1

O conteúdo aqui apresentado é para exemplificar como no react o state dos componentes são passados para os componentes filhos.
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


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

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>State: o certo e o errado - User - Demo 1</title>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #root {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #ff9966;
      background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
      background: linear-gradient(to right, #ff5e62, #ff9966);

    }
    .name h1 {
      width: 100%;
      font-family: sans-serif;
      font-size: 80px;
      font-variant-numeric: tabular-nums;
      color: #000;
      text-align: center;
    }
    .logo {
      width: 100%;
      text-align: center;
    }

  </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">
    function Logo({url, alt}) {
      return (
        <div className="logo">
          <img src={url} alt={alt} />
        </div>
      );
    }

    class User extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          name : 'Emerson Brôga',
          image: 'https://emersonbroga.com/e/assets/emersonbroga-logo-b-black.png',
        };
      }

      render() {
        const { name, image } = this.state;
        return (
          <div className="name">
            <h1>{name}</h1>
            <Logo url={image} alt={name} />
          </div>
        );
      }
    }

    ReactDOM.render(<User />, document.getElementById('root'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>State: o certo e o errado - User - Demo 1</title>
	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#root {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #ff9966;
	background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
	background: linear-gradient(to right, #ff5e62, #ff9966);

	}
	.name h1 {
	width: 100%;
	font-family: sans-serif;
	font-size: 80px;
	font-variant-numeric: tabular-nums;
	color: #000;
	text-align: center;
	}
	.logo {
	width: 100%;
	text-align: center;
	}

	</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">
	function Logo({url, alt}) {
	return (
	<div className="logo">
	<img src={url} alt={alt} />
	</div>
	);
	}

	class User extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	name : 'Emerson Brôga',
	image: 'https://emersonbroga.com/e/assets/emersonbroga-logo-b-black.png',
	};
	}

	render() {
	const { name, image } = this.state;
	return (
	<div className="name">
	<h1>{name}</h1>
	<Logo url={image} alt={name} />
	</div>
	);
	}
	}

	ReactDOM.render(<User />, document.getElementById('root'));
	</script>
	</body>
	</html>