emersonbrogadev/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    Renderizando de forma condicional - PlayingToday App - DEMO

DEMO

O conteúdo aqui apresentado é para exemplificar como renderizamos de forma condicional 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

  
## demo-1.html
<!DOCTYPE html>
<html>
<head>
  <title>Renderizando de forma condicional - PlayingToday App - Demo 1</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;
      font-size: 38px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #0f0c29;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    ul {
      list-style-type: none;
    }

    li {
      padding: 20px 0;
    }

  </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">
    const TYPE_HEAVY_METAL = 'TYPE_HEAVY_METAL';
    const TYPE_PUNK_ROCK = 'TYPE_PUNK_ROCK';

    const HeavyMetal = () => {
      return (
        <ul className="heavy-metal">
          <li>Iron Maiden</li>
          <li>Judas Priest</li>
          <li>Black Sabbath</li>
        </ul>
      );
    }

    const PunkRock = () => {
      return (
        <ul className="punk-rock">
          <li>Ramones</li>
          <li>Sex Pistols</li>
          <li>Dead Kennedys</li>
        </ul>
      );
    }

    const PlayingToday = ({ type }) => {
      if (type === TYPE_PUNK_ROCK) {
        return <PunkRock />;
      }
      return <HeavyMetal />;
    }

    ReactDOM.render(<PlayingToday type={TYPE_PUNK_ROCK} />, document.getElementById('root'));
  </script>
</body>
</html>

## demo-2.html
<!DOCTYPE html>
<html>
<head>
  <title>Renderizando de forma condicional - PlayingToday App - Demo 2</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;
      font-size: 38px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #0f0c29;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    ul {
      list-style-type: none;
    }

    li {
      padding: 20px 0;
    }

  </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">
    const TYPE_HEAVY_METAL = 'TYPE_HEAVY_METAL';
    const TYPE_PUNK_ROCK = 'TYPE_PUNK_ROCK';

    const HeavyMetal = () => {
      return (
        <ul className="heavy-metal">
          <li>Iron Maiden</li>
          <li>Judas Priest</li>
          <li>Black Sabbath</li>
        </ul>
      );
    }

    const PunkRock = () => {
      return (
        <ul className="punk-rock">
          <li>Ramones</li>
          <li>Sex Pistols</li>
          <li>Dead Kennedys</li>
        </ul>
      );
    }

    const PlayingToday = ({ type }) => {
      const choosenType  = (type === TYPE_PUNK_ROCK) ? <PunkRock /> : <HeavyMetal />;
      return choosenType;
    }

    ReactDOM.render(<PlayingToday type={TYPE_PUNK_ROCK} />, document.getElementById('root'));
  </script>
</body>
</html>

## demo-3.html
<!DOCTYPE html>
<html>
<head>
  <title>Renderizando de forma condicional - PlayingToday App - Demo 3</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;
      font-size: 38px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #0f0c29;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    ul {
      list-style-type: none;
    }

    li {
      padding: 20px 0;
    }

  </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">
    const TYPE_HEAVY_METAL = 'TYPE_HEAVY_METAL';
    const TYPE_PUNK_ROCK = 'TYPE_PUNK_ROCK';

    const HeavyMetal = ({ type }) => {
      if (type !== TYPE_HEAVY_METAL) return null;
      return (
        <ul className="heavy-metal">
          <li>Iron Maiden</li>
          <li>Judas Priest</li>
          <li>Black Sabbath</li>
        </ul>
      );
    }

    const PunkRock = ({ type }) => {
      if (type !== TYPE_PUNK_ROCK) return null;

      return (
        <ul className="punk-rock">
          <li>Ramones</li>
          <li>Sex Pistols</li>
          <li>Dead Kennedys</li>
        </ul>
      );
    }

    const PlayingToday = ({ type }) => {
      return (
        <React.Fragment>
          <HeavyMetal type={type} />
          <PunkRock type={type} />
        </React.Fragment>
      );
    }

    ReactDOM.render(<PlayingToday type={TYPE_HEAVY_METAL} />, document.getElementById('root'));
  </script>
</body>
</html>

## demo-4.html
<!DOCTYPE html>
<html>
<head>
  <title>Renderizando de forma condicional - PlayingToday App - Demo 4</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;
      font-size: 38px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #0f0c29;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    ul {
      list-style-type: none;
    }

    li {
      padding: 20px 0;
    }

  </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">
    const TYPE_HEAVY_METAL = 'TYPE_HEAVY_METAL';
    const TYPE_PUNK_ROCK = 'TYPE_PUNK_ROCK';

    const HeavyMetal = ({ type }) => {
      return (
        <ul className="heavy-metal">
          <li>Iron Maiden</li>
          <li>Judas Priest</li>
          <li>Black Sabbath</li>
        </ul>
      );
    }

    const PunkRock = ({ type }) => {
      return (
        <ul className="punk-rock">
          <li>Ramones</li>
          <li>Sex Pistols</li>
          <li>Dead Kennedys</li>
        </ul>
      );
    }

    const PlayingToday = ({ type }) => {
      const isHeavyMetal = (type === TYPE_HEAVY_METAL);
      const isPunkRock = (type === TYPE_PUNK_ROCK);

      return (
        <React.Fragment>
          {isHeavyMetal && <HeavyMetal />}
          {isPunkRock && <PunkRock />}
        </React.Fragment>
      );
    }

    ReactDOM.render(<PlayingToday type={TYPE_HEAVY_METAL} />, document.getElementById('root'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Renderizando de forma condicional - PlayingToday App - Demo 1</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;
	font-size: 38px;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #0f0c29; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	}

	ul {
	list-style-type: none;
	}

	li {
	padding: 20px 0;
	}

	</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">
	const TYPE_HEAVY_METAL = 'TYPE_HEAVY_METAL';
	const TYPE_PUNK_ROCK = 'TYPE_PUNK_ROCK';

	const HeavyMetal = () => {
	return (
	<ul className="heavy-metal">
	<li>Iron Maiden</li>
	<li>Judas Priest</li>
	<li>Black Sabbath</li>
	</ul>
	);
	}

	const PunkRock = () => {
	return (
	<ul className="punk-rock">
	<li>Ramones</li>
	<li>Sex Pistols</li>
	<li>Dead Kennedys</li>
	</ul>
	);
	}

	const PlayingToday = ({ type }) => {
	if (type === TYPE_PUNK_ROCK) {
	return <PunkRock />;
	}
	return <HeavyMetal />;
	}

	ReactDOM.render(<PlayingToday type={TYPE_PUNK_ROCK} />, document.getElementById('root'));
	</script>
	</body>
	</html>