{%hackmd BJrTq20hE %}
第 14 屆 iThome 鐵人賽 (2022)
在做大型專案前，首先我們要先知道React和framework是什麼，React是一個用javascript去處理style和html，編寫處理的js函式庫，並把這些函式庫稱為框架(framework)，其中，又以Google寫的Angular、中國人寫的Vue、和Facebook寫的React，這三大框架最有名，然而JS肯定是不認得這些各家自己寫的函式庫，所以我們得要先載入載入別人寫好的函式庫(套件)爾後編寫程式碼。
『如果你的專案大/複雜的時候，再來考慮使用React或是其他框架』。
此應用程式需要下列 npm 模組才能正確執行：
"dependencies": {
"express": "~4.17.1",
"path": "~0.12.7",
"react": "~16.13.1",
"react-dom": "~16.13.1",
"ts-loader": "~7.0.1",
"typescript": "~3.8.3",
"webpack": "~4.42.1",
"webpack-cli": "~3.3.11"
}
開啟 app.tsx，並新增下列程式碼：
declare var require: any
var React = require('react');
var ReactDOM = require('react-dom');
export class Hello extends React.Component {
render() {
return (
<h1>Welcome to React!!</h1>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
上述程式碼會使用 JSX 語法和React來顯示訊息。
開啟 index.html ，並以下列程式碼取代 區 body 段：
<body>
<div id="root"></div>
<!-- scripts -->
<script src="./dist/app-bundle.js"></script>
</body>
這個 HTML 網頁會載入 app-bundle.js，其中包含轉換為純文字 JavaScript 的 JSX 和 React 程式碼。但在目前的app-bundle.js 是一個空白檔案。在下一個區段中，可以設定選項來轉換程式碼。
REACT 是一個為了大型專案而準備的框架， 為了一般的後端其實用HTML會比較省力，這邊我是希望拋磚引玉，對於framework這一個，能夠彌補不會前端的後端工程師(也就是我)，將我的能力更強大的輻射到前端，畢竟JS本身就是前端的語言，但切記殺雞焉用牛刀，對付大型的專案再用框架就好了。
iThome鐵人賽
看影片追技術