建立網站佈局

2018 iT 邦幫忙鐵人賽

DAY 18

Modern Web

如何在前端開發流程中加入使用者經驗設計 - 以線上相簿為例系列第 18 篇

2018鐵人賽

yowlonglee

2017-12-21 23:46:48

961 瀏覽

分享至

有了架構之後，可以開始寫程式了。

首先當然要有 index.html, 拷貝 HTML5 網頁的結構，在 <body> 裡面增加一個 div，id 是 root。這裡也是我們的 React app 所在的位置。

網站所有的畫面由 React產生，必須要引入 React script 檔案，做法和引用 jQuery script 一樣，用<script> tag，src 設為 Webpack 打包後的檔案位置 build/bundle.js.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Image Gallery</title>
</head>
<body>
  <div id="root"></div>
  <script src="build/bundle.js"></script>
</body>
</html>

到此為止就可以不用理 HTML，接下來全部是 React 的工作。

開新檔案命名為 index.js，放在專案目錄下的 src目錄。

現在來建第一個 React component.
(未完...)