8thApril 2nd project

8thapril-2nd-project.markdown

8thApril 2nd project

A Pen by WeirdKshitiz on CodePen.

License.

index.html

<div>
<div id="d1"></div>
<div id="d2"></div>
</div>

script.babel

function NewPerson(props)
{ return(
<div class="person">
  <h1>{props.name}</h1>
  <p>Age:{props.age}</p>
  </div>
  );
}

ReactDOM.render(<NewPerson name="Riya" age='18'/>,
document.querySelector('#d1'));

ReactDOM.render(<NewPerson name="Diya" age='17'/>,
document.querySelector('#d2'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

style.css

.person{
  border: 1px solid blue;
  width:150px;
  padding:10px;
  display:inline-block;
  margin:10px;
  box-shadow:5px 5px #ccc;
  color:red;
}
div{
  display:inline-block
}