基於react-create-app和nodejs搭建項目

標籤：項目   打包   UI   import   data   router   product   css   processor   

使用react-create-app建立項目

• 全域安裝 npm install -g create-react-app
• 建立項目 create-react-app + 項目名稱

引入sass處理器編寫樣式

安裝：

"node-sass-chokidar": "^1.3.0","npm-run-all": "^4.1.3",

package.json如下：

"scripts": {    "build-css": "node-sass-chokidar src/assets/sass -o src/assets/css",    "watch-css": "npm run build-css && node-sass-chokidar src/assets/sass -o src/assets/css --watch --recursive",    "start-js": "react-scripts start",    "start": "npm-run-all -p watch-css start-js",    "build-js": "react-scripts build",    "build": "npm-run-all build-css build-js",    "test": "react-scripts test --env=jsdom",    "eject": "react-scripts eject"  },

配置方法

配置代理到node層

"proxy": {    "/api": {      "target": "http://localhost:4222/"    }  }

使用

node層配置：

app.use(‘/api/productSve‘, productSve);

router.get(‘/getProducts‘, function (req, res) {
  var results = {
    id : 1,
    title : ‘電腦‘,
    price : 5000,
  }
  res.json(results);
});

react中使用：

componentDidMount() {
  fetch(‘/api/productSve/getProducts‘)
    .then(res => {
      res.json()
    })
    .then(data => {
      console.log(data)
    })
    .catch(err => {
      console.log(err)
    })
}

問題及方案

• 打包時報錯： Import in body of module; reorder to top import/first
  • 解決方案：78722055

基於react-create-app和nodejs搭建項目