簡單紀錄

HTML：

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

 

CSS：

.person {
  display: inline-block;      //流動式的自動排版
  margin: 10px;               //四個邊的外距
  border: 1px solid #eee;     //四個邊的邊框
  box-shadow: 0 2px 2px #ccc; //陰影效果
  width: 200px;               //寬
  padding: 20px;              //內距的設定
}

 

React：

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

var app = (
  <div>
     <Person name="Max" age="28" />
      <Person name="Manu" age="29" />
  </div>
);

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

 

引用：

https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js

 

呈現結果：