React Course
From Logic Wiki
Simple component Part 1
| HTML | CSS | JS |
|---|---|---|
<div id="p1"></div> |
.person{
display:inline-block;
margin:10px;
border:1px solid #eee;
box-shadow:0 2px 2px #ccc;
width:200px;
padding : 20px;
}
|
function Person(){
return (
<div className="person">
<h1>Ali</h1>
<p> Age 47</p>
</div>
);
}
ReactDOM.render(<Person />,
document.querySelector('#p1'));
|
| HTML | ||
| ||
Simple component Part 2
| HTML | CSS | JS |
|---|---|---|
<div id="p1"></div> <div id="p2"></div> |
.person{
display:inline-block;
margin:10px;
border:1px solid #eee;
box-shadow:0 2px 2px #ccc;
width:200px;
padding : 20px;
}
|
function Person(props){
return (
<div className="person">
<h1>{props.name}</h1>
<p> Age {props.age}</p>
</div>
);
}
ReactDOM.render(<Person name="Max" age="28"/>,
document.querySelector('#p1'));
ReactDOM.render(<Person name="Ali" age="47"/>,
document.querySelector('#p2'));
|
| HTML | ||
| ||
Simple component Part 3
| HTML | CSS | JS |
|---|---|---|
<div id="app"></div> |
.person{
display:inline-block;
margin:10px;
border:1px solid #eee;
box-shadow:0 2px 2px #ccc;
width:200px;
padding : 20px;
}
|
function Person(props){
return (
<div className="person">
<h1>{props.name}</h1>
<p> Age {props.age}</p>
</div>
);
}
var app = (
<div>
<Person name="Max" age="28"/>
<Person name="Ali" age="47"/>
</div>
);
ReactDOM.render(app,
document.querySelector('#app'));
|
| HTML | ||
| ||
