iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
Modern Web

Spring Boot and React - 前後端 30 天分手日記系列 第 19

Day 19 - React 什麼是React? 要怎麼用?

  • 分享至 

  • xImage
  •  

上一章 Day 18 - MySQL 使用Annontation設定欄位 (2)

React 並不是一個新的語言, 也不是新的Framework

而是一個由Facebook開發的JS函式庫, 提供許多功能讓我們能輕鬆的撰寫與管理前端UI與架構

React的特色:

  1. 使用純JS產生頁面, 速度較以往後端產生html更快
  2. 使用虛擬DOM (Virtual DOM), 更快更有效率
  3. 使用Component概念, 開發快速, 易於管理

如何使用?

要使用React, 我們需要 Node.js 跟 npm

npm 全名 Node Package Manager, 是一套以Node.js撰寫的套件管理系統

首先到官網下載Node.js (裡面就會包含npm了)

https://nodejs.org/en/download/

安裝完後, 在Visual Studio Code 按CTRL + ` 打開Terminal, 切換到你要建立專案的資料夾 (例:C:\VSCode)

輸入以下指令 (npm版本需6+以上)

npm init react-app frontend

這指令不止會自動初始化, 還會自動幫你安裝需要的Package, 非常方便

看到Happy hacking! 就代表安裝完成了

可以在專案資料夾frontend下看到package.json檔案

安裝過的package跟版本號都在這裡

另外有兩個很好用的擴充推薦給大家

Debugger for Chrome

可以在程式上下斷點, 直接在瀏覽器上Debug

https://ithelp.ithome.com.tw/upload/images/20191005/201195108RbdbBB1ve.png

ESLint

ESLint是一個Javascript Linter

可以找出語法錯誤, 自訂義規範, 統一Codeing Style

https://ithelp.ithome.com.tw/upload/images/20191005/201195102wGHlYciyG.png

下一章會介紹我們開發所需要用到的package

Day 20 - React 安裝與導入需要的package


上一篇
Day 18 - MySQL 使用Annontation設定欄位 (2)
下一篇
Day 20 - React 安裝與導入需要的package
系列文
Spring Boot and React - 前後端 30 天分手日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言