iT邦幫忙

0

關於react函數引用方式及放上伺服器的內容

小弟原本是學VUE,但一個月前突然被通知公司一部分網頁(原本主要用jQuery)要用react來改寫,所以正在邊做邊用網路自學...有幾個相關問題想請教一下各位高手:

1.因為原本有很多ip轉換以及參數代換的函式,這部份大概就有四五百行,想說和原本一樣要獨立出來,目前是用物件的方式來存函數再拿到要用的頁面import使用,例如:

//輸出JS內容
import $ from 'jquery'
const SitaTest = {
    isIPv4: function (ele) {
        var reg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/;
        var ip = $(ele).val().trim();
        if (ip.match(reg)) {
            wrapIP(ele);
        }
        return ip.match(reg) ? true : lang['err_ipv4'];
    }
}
export default SitaTest;
//輸入元件內容
import SitaTest from '../js/SitaTest'
  SitaTest.viewA(ele) 

想請問這樣的用法是對的嗎?還是被引用的函式會用別的寫法?

2.關於後續上傳到伺服器的部份,小弟也是被通知要用nginx做上架,目前在邊做邊學中...這部份是想知道,因為我是用creat-react-app做的,想知道一般會build好後把整個文件都上傳上去,然後在nginx裡面去指向build資料夾嗎?還是只會上傳build資料夾?
我知道這可能會是公司自己商討決定,但目前我們這邊是只有我一個前端在用React...(公司前輩都是前後端都通的,但都沒碰React)想知道大家一般都是怎麼做的?

抱歉問題有夠多,小弟目前還很廢...希望各位多多指教,謝謝

2 個回答

0
Han
iT邦新手 3 級 ‧ 2021-04-03 01:03:18
  1. 看起來沒問題,如果可以跑就OK,如果不能跑就貼個錯誤訊息上來吧..
  2. 正常來說 React 都會搭配 react-router-dom 這個套件,直接讓前端做路由,因為你提到你是透過 create-react-app 來開發,因此該專案就具備 build 的功能,打包好後整份上傳,並且讓 nginx 直接指向 index.html 即可

運行上都沒什麼問題,只是想說在架構上是否有其他的常規作法,目前也是有用react-router-dom做路由,感謝回覆

0
DanSnow
iT邦新手 1 級 ‧ 2021-04-06 11:43:00
  1. 完全沒問題,其實這算是 js 的基本概念的部份吧,反正你平常怎麼拆分檔案的就怎麼拆就行了,這不管在 Vue 或是 React 都適用

  2. 其實這沒有固定的答案,看來你也知道這一點,那就來說說把所有的檔案放上去跟只放 build 出來的檔案的差別好了

  • 只有 build 出來的檔案:
    • 好處
      • 沒有額外的空間消耗
    • 壞處
      • 需要另外準備建置的環境 (通常是 CI/CD)
  • 專案一起放上去
    • 好處
      • 可以用版控一起管理版本
      • 可以把建置環境一起放上去
    • 壞處
      • 額外的空間消耗
      • 如果在上面建環境,會不會造成什麼影響不能保證

了解~放檔案的部份我再跟同事討論看看好了,謝謝回覆~

我要發表回答

立即登入回答