Day4學前端 Frontend with React - *show on UI*

# Day4學前端 Frontend with React - *show on UI* ###### tags: `frontend` Copyright 2021, [月下麒麟](https://hackmd.io/@YMont/note-catalog) --- ## Target Day3的練習讓我們學到前端介接API的技巧，但這樣的效果僅能在console log的頁面出現資料，所以，在==介接完成後最主要還是要將內容**呈現在瀏覽器**(畫面)上== ## Concept 筆者在這小關卡了一下下，花費比較多的精神在釐清語法、關鍵字搜尋... 於此，先做個重點提示整理 * **HTML with Javascript** * **Selector with jQuery** * **(object Object)** 下面的實作過程中，我會依序去說明這三個重點 --- ## Implement ### HTML with Javascript 截至目前為止，我們做了前後端分離的工作了，但是，分離出來的前端我的檔案都還是同一份(**app.js**) 所以我的程式碼還是寫在同一份，雖然寫在同一份，但其實在HTML語法與Javascript語法仍是不同的最基本的就是在HTML中嵌入Javascript的語法 ```htmlmixed= <html> <div> <script>Hello World</script> </div> <div> <p> Hello Network </p> </div> </html> ``` 可以看到\<script\>就是Javascript的語法，這邊僅是要帶入一點點語法觀念， **因網路上的文章大都是複合式問題，故在閱讀一些進階的範例程式時，必須要有這樣的概念** --- ### Selector with jQuery 不知道讀者們是否還記得Day3 frontend的文章中，於補充的章節提到jQuery的用法如果忘記了，可以參考這篇[Day3學前端 Frontend with React - 串接API with Ajax](https://hackmd.io/@YMont/frontend-react-day3) ```javascript= import './App.css'; import React from 'react'; import $ from 'jquery'; <head> <script src="jquery-3.5.1.min.js"></script> </head> class App extends React.Component{ render(){ return( <div style = {{ textAlign: 'center'}}> <div>Hello, World</div> <div>This is page for learning react.</div> <div>The day today is {new Date().toLocaleDateString()}</div> <div> you are the best. <div> <ul className="demo"></ul> </div> </div> ); } } export default App; // -------------------分隔線------------------- $.ajax({ url:"http://localhost:8000/users/5", type: "GET", dataType: "json", success: function(res){ console.log(res); $(".demo").html("test:"+JSON.stringify(res)); //point!!! }, error: function(error){ console.log(error) } }); ``` 以上的函式主架構不難理解，也是拿default app.js去修改，故不多著墨解釋。仔細的你可以發現在分隔線上下兩端，其實不是同一個函式，是==分離==的兩個 >==上面是HTML與Javascript，並且呈現在Browser頁面 >下面是jQuery與ajax，並且分別能呈現在Browser、Console log上== ![](https://i.imgur.com/Rxft7Z7.png) ![](https://i.imgur.com/TW4bZ8X.png) 再看到這張Browser的圖，比對一下上述的程式碼，應該就不難理解，其實jQuery到的data並不會被帶入Browser上，所以==必須要了解jQuery與HTML的關係，才會有辦法將data呈現== 關鍵就是標有註解(point)重點的那行 ```javascript= $(".demo").html("test:"+JSON.stringify(res)); ``` * 就是利用**Selector**(**利用demo這個class**)去將data指引到上面的HTML裡面呈現。 * 那後面的**html()**，就是實作將data(res)帶入Selector的函式 Reference:[IT邦幫忙 Day28：小事之 jQuery 選擇器](https://ithelp.ithome.com.tw/articles/10197416) --- ### (object Object) 最後一個就是筆者卡關的地方 TT **首先** ```javascript= success: function(result){ $("#demo").html("test:"+result); } ``` ![](https://i.imgur.com/Rxft7Z7.png) ![](https://i.imgur.com/pGLnGB5.png) 這邊要表達的就是==物件型態不正確==，就會出現這個assert [object:Object] 詳細解釋可以參考下方的reference! Referenct:[What does [object Object] mean? (JavaScript)](https://stackoverflow.com/questions/8892465/what-does-object-object-mean-javascript) Reference:[W3school JSON.stringify()](https://www.w3schools.com/js/js_json_stringify.asp) **接著** ```javascript= success: function(result){ $("#id").html("id:"+result.id); $("#name").html("name:"+result.name); $("#height").html("height:"+result.height); $("#weight").html("weight:"+result.weight); $("#habbit").html("habbit:"+result.habbit); } ``` 利用呼叫出物件的資料屬性，就能依序呈現，但你是不是覺得這樣寫很囉唆呢!!! **最後** ```javascript= success: function(result){ $(".demo").html("test:"+JSON.stringify(res)); } ``` 是不是精簡很多了啊~ ~~(茶...~~ --- 今天就先到這邊，接下來就要嘗試頁面的排版與渲染敬請期待...