Notizen

how to create a minimal stateless react component using ES6 syntax…

Examples of the output to can be found here and here

JavaScript, JSX code snippet…

const raw_data = [, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }, {
    name: 'Mohamed O.',
    quali: '(Quanten)physiker | E=(1/3)*mc³ ',
    email:'mohamed.o@gmail.com',
    website: 'mohamed.o-online.de'
  }
];

const Cartevisite = (props) => {
  return (
    <div className={props.className}>
      <h2>{props.name || 'name is undefined'}</h2>
      <p className='qualifikation'>{props.quali || 'quali is undefined'}</p>
      <p className='kontakt'>{props.email || 'email is undefined'}</p> 
      <p className='website'>{props.website || 'website is undefined'}</p>
    </div>
  )
}

const Tag = (props) => {
  console.log('[Debug]: Tag arrow function called...');
  return (
    <div>{
    raw_data.map((person, idx) => {
          return (
            <Cartevisite
              key={idx}
              className='person'
              name={person.name}
              vorname={person.vorname}
              quali={person.quali}
              email={person.email}
              website={person.website}
            />
          )//return
        }//map callback
      )//map
    }</div>
    )//return
}//arrow function 

//ReactDOM.render(<Tag/>, document.querySelector("#tagID"));
ReactDOM.render(<Tag title="Stateless React Component Bsp." />, document.getElementById("tagID"));

CSS code snippet…

.platzhalter {
  width: 280px;
  height: 140px;
}

.person {
  border: 1px solid #ccc;
  border-radius: 28px 15px 50px;
  box-shadow:0 5px 7px #bdd;
  box-shadow:0 5px 7px #bbb;
  display: inline-block;
  background-color: #aff;
  background-color: #444;
  background-color: #eee;
  color: #7cc;
  color: #f80;
  color: rgba(255, 88, 0, 1);
  color: #f30;
  color: #559;
  width: px;
  height: px;
  padding: 0px 0px;
  margin: 20px;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.1em;
}

h2 {
  border-top: 1px solid #eed;
  background-color: #eef;
  border-bottom: 2px solid #ddc;
  padding-left: 20px;
  margin-top: 0.89em;
}

p {
  margin-top: -10px;
  padding-left: 20px;
  padding-right: 20px;
}
 
.qualifikation {
  font-weight: bold;
  font-size: 1.2em;
}

.kontakt {
  font-style: normal;
  font-family: sans-serif;
  font-size: 1em;
}

.website {
  font-style: normal;
  font-family: sans-serif;
  font-size: 1em;
}

html code snippet…

<!DOCTYPE html>
<html>

<script
  src="https://fb.me/react-15.1.0.js">
</script>

<script 
  src="https://fb.me/react-dom-15.1.0.js">
</script>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="tagID" />
</body>

</html>