emersonbrogadev/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    React Artist - Reutilizando componentes - DEMO

DEMO

O conteúdo aqui apresentado é para exemplificar como reutilizamos componentes 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


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>Reutilizando Componentes - Artist App - Demo</title>
  <style type="text/css">
   html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #root {
      width: 100%;
      height: 100%;
      font-family: sans-serif;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #ad5389;
      background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
      background: linear-gradient(to right, #3c1053, #ad5389);
    }

    h1 {
      font-size: 60px;
      display: block;
    }

    span {
      font-size: 45px;
      display: block;
    }
  </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 Artist(props) {
      return <span>{props.name} plays {props.instrument}.</span>;
    }

    function App(props) {
      return (
        <div>
          <h1>{props.title}</h1>
          <Artist name="Flea" instrument="Bass" />
          <Artist name="Markus Grosskopf" instrument="Bass" />
          <Artist name="Steeve Harris" instrument="Bass" />
        </div>
       );
    }

    const element = <App title="List of Bass Players"/>;
    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Reutilizando Componentes - Artist App - Demo</title>
	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#root {
	width: 100%;
	height: 100%;
	font-family: sans-serif;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #ad5389;
	background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
	background: linear-gradient(to right, #3c1053, #ad5389);
	}

	h1 {
	font-size: 60px;
	display: block;
	}

	span {
	font-size: 45px;
	display: block;
	}
	</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 Artist(props) {
	return <span>{props.name} plays {props.instrument}.</span>;
	}

	function App(props) {
	return (
	<div>
	<h1>{props.title}</h1>
	<Artist name="Flea" instrument="Bass" />
	<Artist name="Markus Grosskopf" instrument="Bass" />
	<Artist name="Steeve Harris" instrument="Bass" />
	</div>
	);
	}

	const element = <App title="List of Bass Players"/>;
	ReactDOM.render(element, document.getElementById('root'));
	</script>
	</body>
	</html>