基于react-create-app和nodejs搭建项目

Posted kiscon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于react-create-app和nodejs搭建项目相关的知识,希望对你有一定的参考价值。

使用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)
})
}

问题及方案




















以上是关于基于react-create-app和nodejs搭建项目的主要内容,如果未能解决你的问题,请参考以下文章

在 aws elasticbeanstalk 为 react-create-app 配置生产环境

TypeError:使用 react-create-app jest 和酶进行测试时,调度不是函数

react-create-app 中的 babel 加载器问题

导入的组件在 react-create-app 中转换为“/static” url

React-create-app不eject配置项目

使用 npx install react-create-app 时将 yarn 更改为 npm