อยากเริ่มเขียนเว็บด้วย React แบบคนอื่นบ้าง แต่ไม่รู้จะเริ่มต้นยังไงดี ? 😖
.
ไม่ต้องกังวลไป...เพราะวันนี้แอดสรุปมาให้แล้วจ้า กับสิ่งที่ต้องรู้ก่อนจะเริ่มต้นใช้ Library ที่ช่วยในการเขียนเว็บแอปพลิเคชันอย่าง React
.
มีอะไรต้องรู้บ้าง ? หากพร้อมแล้วไปดูกันเลย ~
.
🌟 พื้นฐาน HTML CSS JavaScript
.
ก่อนอื่นเราต้องมาสำรวจตัวเองก่อนว่าเราเข้าใจพื้นฐานพวกนี้แล้วหรือยัง ถ้ายังไม่เข้าใจ ควรจะไปศึกษาให้เข้าใจอย่างถ่องแท้ก่อนนะ ส่วนพื้นฐานที่แอดพูดถึงก็มีดังนี้
.
🔸 HTML เช่น HTML Element, Form, Table, และ Div เป็นต้น
🔸 CSS เช่น Styling, CSS Selectors และ Box Model
🔸 JavaScript เช่น variables, Conditional Statements, Loops, Data Types, และ DOM เป็นต้น
.
✨ NPM
.
รู้จักการใช้งาน NPM ซึ่งเป็นเครื่องมือที่ช่วยในการติดตั้ง อัปเดต กำหนดค่าต่าง ๆ และรันคำสั่งบางอย่างผ่าน Terminal เพื่อใช้งานคำสั่ง และ Library บนโปรเจกต์ React ของเรานั่นเอง
.
อ่านวิธีการใช้งานเพิ่มเติมได้ที่นี่ 👇
Link : https://www.npmjs.com/
.
✨ React Concept
.
เมื่อเราเรียนรู้พื้นฐานและฝึกฝนจนเชี่ยวชาญแล้ว ขั้นตอนต่อมาเราก็จะต้องเรียนรู้และทำความเข้าใจโครงสร้างและการทำงานของ React เช่น
.
🔹 Create React App - เป็นการตั้งค่าสภาพแวดล้อมและเครื่องมือต่าง ๆ ให้เหมาะสมกับการพัฒนาโปรเจกต์บน React เพื่อให้เราสามารถใช้คุณสมบัติของ JavaScript ได้อย่างเต็มประสิทธิภาพนั่นเอง !
.
อ่านวิธีการติดตั้งแบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/create-a-new-react-app.html
.
🔹 JSX - เป็นส่วนเสริมของ JavaScript ที่ทำให้เราสามารถจัดการกับ UI ใน React ได้อย่างง่ายดาย ซึ่งจะมี Syntax คล้าย ๆ กับ HTML
.
สามารถอ่านเรื่อง JSX แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/introducing-jsx.html
.
🔹 Virtual DOM - เป็นตัวที่ช่วยจัดการ Object และ Element ต่าง ๆ บน React เปรียบเสมือนพิมพ์เขียวของ DOM ถ้าหากมีการแก้ไขหรือเปลี่ยนแปลง Object บน React มันก็จะไม่กระทบกับ DOM ทั้งหมด เพราะมันจะเปลี่ยนแปลงเฉพาะ Object ที่มีการอัปเดตเท่านั้น ทำให้การแสดงผลมีความรวดเร็วมากขึ้นนั่นเอง
.
สามารถอ่านเรื่อง Virtual DOM แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-internals.html
.
🔹 Props & State - Props (Properties) เปรียบเสมือนแท็กใน HTML เช่น src, href, หรือ class แต่ความพิเศษของมันก็คือทำให้ React Component สามารถส่งค่าต่าง ๆ ระหว่างกันได้ ส่วน State จะแตกต่างกับ Props เพราะมันจะเป็นการเก็บค่าเพื่อใช้ใน Component นั้น ๆ เท่านั้น
.
สามารถอ่านเรื่อง Props & State แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/faq-state.html
.
🔹 Conditional Rendering - เป็นการแสดงผล Element ต่าง ๆ บน UI แบบมีเงื่อนไขนั่นเอง โดยใช้ตัวดำเนินการใน JavaScript เช่น if...else เป็นต้น
.
สามารถอ่านเรื่อง Conditional Rendering แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/conditional-rendering.html
.
🔹 React Hook - เป็น Functions เจ๋ง ๆ ใน React ซึ่งเป็นฟีเจอร์ใหม่ที่มีใน React v16.7.0-alpha -ข้อดีของมันก็คือทำให้เราสามารถเรียกใช้ State ต่าง ๆ ใน React แบบไม่ต้องเขียน Class ให้เมื่อยมือ! เป็นการเพิ่มคุณสมบัติของ Component ไม่ว่าจะ Test หรือ Refactor ก็ทำได้ง่าย ๆ
.
สามารถอ่านเรื่อง React Hook แบบเต็ม ๆ ได้ที่นี่ 👇
📑 https://reactjs.org/docs/hooks-intro.html
.
✨ API
.
เรียนรู้โครงสร้าง และวิธีการดึงข้อมูลจาก API โดยต้องเข้าใจการใช้งานฟังก์ชันใน JavaScript เพื่อช่วยในการดึงข้อมูลและนำมาใช้ภายในโปรเจกต์ หรืออาจจะใช้เครื่องมืออย่าง Axios ซึ่งเป็นอีกหนึ่ง Library ยอดนิยมที่ช่วยให้เราดึงข้อมูลจาก API ได้อย่างง่ายดาย !
.
เพื่อน ๆ สามารถอ่านวิธีการใช้งาน Axios ได้ที่นี่ 👇
Link : https://www.npmjs.com/package/axios
.
✨ Server-side Rendering
.
รู้จักการใช้งานเครื่องมือที่ช่วยในการแสดงผลฝั่ง Server เช่น Next.js, After.js, Rogue ซึ่งเหล่า React Dev ส่วนใหญ่จะนิยมใช้เจ้า Next.js เพราะใช้งานง่าย ไม่ต้อง Config อะไรเพิ่มเติมและช่วยให้เราสามารถเขียนเว็บได้สะดวก รวดเร็วมากขึ้นนั่นเอง !
.
✨ Styling UI
.
ใช้แนวคิด CSS มาช่วยให้เราออกแบบ วาง Layout และจัดองค์ประกอบบนหน้าเว็บไซต์ ซึ่งในปัจจุบันก็มีเครื่องมือต่าง ๆ ที่จะช่วยให้เราเขียน CSS ได้ง่ายมากขึ้น ไม่ว่าจะเป็น Material UI และ TailwindCSS นั่นเอง
.
และเมื่อเราได้เรียนรู้ทุกหัวข้อที่แอดกล่าวมาแล้ว เราก็เริ่มต้นทำโปรเจกต์ React กันได้เลย !! ซึ่งทางทีมแอดเคยทำสรุปการใช้งาน React ไว้ให้แล้ว หากสนใจสามารถกดเข้าไปอ่านกันได้เลย ~
📑 Link : https://www.borntodev.com/2020/07/15/react-101/
.
หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ ที่กำลังเริ่มต้นเขียน React นะ หากชอบเนื้อหานี้ อย่าลืมกดไลก์ กดแชร์ เพื่อเป็นกำลังใจให้พวกเราด้วยล่ะ 😁
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#React #javascript #ฺBorntoDev
「html table css」的推薦目錄:
- 關於html table css 在 BorntoDev Facebook 的最讚貼文
- 關於html table css 在 紀老師程式教學網 Facebook 的精選貼文
- 關於html table css 在 MUKI SPACE INC. Facebook 的精選貼文
- 關於html table css 在 Style a specific row or column of a HTML table using the css ... 的評價
- 關於html table css 在 HTML Tables Tutorial with CSS Styling - Crash Course 的評價
- 關於html table css 在 純CSS將HTML的Table的行列互換 的評價
html table css 在 紀老師程式教學網 Facebook 的精選貼文
10 本網頁設計電子書,免費送給你!
今天介紹的,是跟網頁設計相關的十本電子書。由於原作者並沒考慮網站設計包含了「前台」、「後台」、「視覺設計」等類人的需求、把這十本書分門別類,小弟就幫忙「稍微」(其實這篇寫了快 3 小時...喘~)分類了一下,希望方便大家快速找到自己喜歡的書。
原文連結:
http://designposts.net/free-ebooks-for-web-designers-and-developers/
1. 在成為網站設計師之前 -----------------
"Essential Career Advice for Developers"
翻成中文就是「給開發者的生涯建議」。這本書介紹如何在成為開發者前,先寫一些小程式掛在網路上讓人認識你,也方便你求職。並參與「開放原始碼社群」磨練功力。如何與合作者溝通、共同完成專案...然後,不要一天到晚宅在家裡...等等建議。連封面封底只有 28 頁,下載到手機等車時看一點看一點剛剛好~ :-)
"So You Want To Be A Freelancer?"
如果您不知道什麼是 Freelancer,可以先看這篇中文說明: http://goo.gl/zGa9CN 。一般而言,做網站的人很容易變成「自由工作者」。這是因為中小企業的老闆們認為網站並非常常需要更新,養一個網頁設計不划算,所以常常找外包。最後網頁設計師就成了到處接案的「自由工作者」(望向小弟家裡的老婆... XD)。這是一本只有 26 頁的小書,裡面講了自由工作者該有的理念、行程安排、如何自打品牌、溝通、收款、結案...等細節。有心成為自由工作者的人,不妨一讀。
2. 給網頁視覺設計師專書 ----------------
"A Practical Guide to Designing for the Web"
視覺設計師其實比較專注在「議題表達」、「版型」、「顏色」、「易用性」...等這幾樣事情上,他/她們常用的工具可能是 Photoshop, Illustrator...等,而非寫程式碼。打個比方,「網站程式師」比較像「建築師」,專注在結構。「視覺設計師」比較像「裝潢師」,專注在感受。國外很重視「視覺設計師」,可惜國內在這個部分,大多還是認為「網站能動就好」,導致有很多好網站,因為「不好用」而被廢棄。這本書說明了「文字編排(Typography)」、「顏色(Color)」、與「版型(Layout)」的重要性。如果您想走網頁、但不想寫程式,或許這條路可以試試看。
"10 Keys to Great Landing Pages"
所謂「Landing Page」,直譯為「登陸頁面」,其實就是客戶從搜尋引擎、或其它管道,點入 URL 後看到的第一頁。根據國外研究,這第一印象決定了大部分人是否「深耕挖掘」此網站更詳細內容的意願。這也是視覺設計師的職責所在之一。這本書只有 24 頁,就講 10 個「登陸頁面」的「必備」與「死穴」。值得視覺設計師參考。
"27 Page Type Classification eBook"
這本書專注在「文字編排(Typography)」上,也是一本 29 頁的小書。它就挑了幾種「常用字型」(如:Times New Roman),排版給大家看。也不多做解釋。不過一般人很容易從不同字型排出來的版面,感受到不一樣的感覺。是只需感受、不用細讀,在搖晃的車廂也能看懂(其實不用怎麼看 :-p )的書。
3. 前台語言:HTML, CSS, JavaScript -----------
"Pocket Guide to Writing SVG"
SVG 是 HTML5 才新增的東西。它可以用 的方式,用程式碼「畫」出一幅畫來。也就是說,它的「畫」,是動態產生的,並非死板板的「照片」,直接貼在網頁上。想學 HTML5 這部份新功能的,可以參考這本書。
"HTML Canvas Deep Dive"
「Canvas」直譯就是「畫布」,也是 HTML5 新推出的功能。它可以在網頁上造就一塊方框,然後你可以在裡面放圖、表、動畫等。不少人拿 Canvas 來做「HTML5 遊戲」。那些「僅需瀏覽器就能玩」的遊戲,有些就是得力於 Canvas 功能的輔助。
"The Magic of CSS"
很棒的一本 CSS 小書!它會用非常視覺的方式,告訴你「這段程式碼」做出來「就是長這樣」。免除長篇大論的文字描述。點進去後,記得往下捲,下面列了一些如「1. The Box...2. Layout...」的超連結,點下去就能看到相關章節。
"Speaking JavaScript: An In-Depth Guide for Programmers"
很完整介紹 JavaScript 的一本好書!歐萊禮出版社出的(他們家的書封面都是一些動物)。想學 JavaScript 的人建議可以看看!
"Adaptive Web Design"
這是一本介於「視覺設計師」與「前台工程師」的書。講的是使用者感受,但得會 HTML, CSS, JavaScript 去做出這些感受來。個人覺得,前台設計師得有一點視覺設計師的素養,做出來的網站「易用性」才會高。所以我將這本書,排列在「前台語言」這一項上。視覺設計師如果願意學 HTML, CSS, JavaScript 的話,也可以看看。
4. 後台語言:PHP, Go ------------
"PHP: The Right Way"
這本書小弟知道有中文版!中文版叫「PHP 之道」。我幫大家補個連結: http://goo.gl/S3BcSi 。其實這本書已經包含 PHP 與 PHP 如何跟後端資料庫溝通的議題了!不過我個人認為,這一本書不是很適合初學者看。因為它講了一些「依賴注入」、「樣板」...等 PHP 中比較進階的議題,卻沒有好好地講到讓完全不懂的人變懂。當然啦~能學到後台語言的人,大概都有兩三把刷子,或許作者就是考量到這點,所以才沒有太多顧忌吧?
"Building Web Apps with Go"
Go 其實是 Google 於 2009 年正式推出的一個新語言。它能做的事情不只寫網頁,但這本書就只介紹用 Go 語言寫網頁的部份。如果真的很想學 Go,又討厭看英文的話,這裡倒是有中文的替代方案:「Go 程式設計導論 http://golang-zhtw.netdpi.net/ 」。
5. 用「架站軟體」快速架站:WordPress ----------
"11 Things to Do with Every New WordPress Install"
直譯就是「11 件你安裝 WordPress 後該做的事情」。15 頁的小書,適合剛安裝完 WordPress 之後的人看。
"Go Mobile With WordPress"
這本 39 頁的小書,告訴你如何修改 WordPress,好讓它適合被小螢幕的手機或平板閱讀。Google 目前修改了搜尋演算法,只要你的網站在小螢幕上不方便顯示的,排名會往後掉。有需要這方面知識的,不妨參考一下。
6. 網站營運 -----------------
"Book of Speed"
這本書其實還沒完成,不過前五章也夠我們看了。這是一本講「如何提高網站存取速度」的書。由於 Google 新演算法將「網站是否載入夠快」,也變成評分標準(另一個新標準就是之前說的,是否支援大小不同的螢幕),因此這個議題一下子熱了起來。點擊進去後,記得捲到最底部,有個「TOC(Table of Contents)」的超連結,點下去就能看到目錄了。
後記
今天幫大家整理的這幾本書,希望對大家有幫助!還請您不要吝嗇,分享給您的朋友,或按個讚鼓勵一下小弟我喔(虛榮心渴求中... XD)!
html table css 在 MUKI SPACE INC. Facebook 的精選貼文
關於 display: table 的介紹與運用,有部落客已經有寫文章介紹過,我就不多贅述了。
我這篇針對的族群,是已實際用過 display: table 的朋友,當你們在使用的時候,也許會碰到「間距調整」的問題,例如要在每一個 table-cell 裡頭設定 margin 等間距調整,卻發現修改無效。假設你碰過這種狀況,不妨參考一下我推薦的解法...
http://blog.mukispace.com/fix-display-table-cell-not-affected-by-margin/
html table css 在 HTML Tables Tutorial with CSS Styling - Crash Course 的推薦與評價
![影片讀取中](/images/youtube.png)
Learn all about HTML tables in this crash course tutorial. We walk through the basics of understanding tables ... ... <看更多>
html table css 在 純CSS將HTML的Table的行列互換 的推薦與評價
純CSS 解決方案:將HTML Table的行(row)以及列(column)對調,不需要任何JavaScript 程式碼。 ... <看更多>
html table css 在 Style a specific row or column of a HTML table using the css ... 的推薦與評價
... <看更多>