A Basic React App For understanding the Basic

a-basic-react-app-for-understanding-the-basic.markdown

A Basic React App For understanding the Basic

A Pen by MD.Tanvir Rahman on CodePen.

License.

index.html

<div id="app">
  
</div>

script.babel

function Person(props){
  console.log(props) // this is an object
  return (
    <div className="jumbotron" id="p1">
    <h1 className="display-4">{props.name}</h1>
      <p>Age : {props.age} </p>
    </div>
  );
}


// this person is a component 
// and it has two differnt conponent
// and it will be mounted in app id
let persons = (
  <div>
        <Person name="Karim" age="27" />
        <Person name="Rahim" age="30" />
  </div>

)


ReactDOM.render(persons,document.querySelector('#app'));

scripts

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

style.css

#p1{
  border:3px solid;
  width:250px;
  padding:20px;
  margin:10px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />