Day 09 - 继续加油

React使用jsx的方式撰写，他是一种语法糖（让程序更简单撰写），我们拿前天建立的专案来修改，在div#root下新增div#root2：

  <div id="root"></div>
  <div id="root2"></div>

接着调整一下CSS，将高度调整为50vh，并且把 h1 的文字调整为置中。

.App-header {
  background-color: #282c34;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
h1 {
  text-align: center;
}

最後在 App.js 中加上

const wording = 'have a nice day.';
const element = <h1>Hello, {wording}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root2')
);

这样就可以得到新的画面了：

相关文章：

介绍 JSX

一看就懂的 JSX 简明入门教学指南