react在node下运行踩坑记

  1. 云栖社区>
  2. 博客>
  3. 正文

react在node下运行踩坑记

沐橙~ 2018-06-09 12:40:00 浏览703
展开阅读全文
博主这周开始学react 一早上敲了helloworld 开心 原地转圈圈
  • 先建一个文件夹叫它react-demo
    src/App.js
import React from 'react';

export default function App() {
    return <h1> hello world</h1>;

}
  • 在node.js中renderToString()方法将组件渲染成字符串
    src/sever.js
import React from 'react';

import { renderToString} from 'react-dom/server';
import App from './App';

const appHtml=renderToString(<App/>);

console.log(appHtml);

index.js

require('babel-register');
require('./src/server');

.babelrc

{"presets": ["react","es2015"]}
js文件就这么多
在命令行运行
  • 接下来 npm install 会生成一个 package-lock.json 文件
npm WARN saveError ENOENT: no such file or directory, open 'E:\react demo\node下运行react\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'E:\react demo\node下运行react\package.json'

但是呢你发现没有package.json 文件 what????
伤心 那就手动 生成 npm init ok 终于有package.json 文件喽

  • 用Babel 编译运行node.js 使用requie Hook
    安装babel -register
npm install babel-register --save-dev
  • 安装ES2015和React的预设
npm install --save-dev babel-preset-es2015 babel-preset-react

这个时候点开package.json文件会发现多了好多东西 amazing

{
  "name": "",
  "version": "",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0"
  },
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  }
}

好吧都是刚才装上的东西

  • 这个时候就可以 npm start 激动
    但是emmm。。。
E:\react demo\node下运行react>npm start
npm ERR! missing script: start

找不到 start 好吧
package.json文件加两行代码

{
  "name": "",
  "version": "",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.26.0"
  },
  "scripts": {
    "start": "node index"
  },
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  }
}

emmm..... npm start 还是有问题

Error: Cannot find module 'react'
npm install react
Error: Cannot find module 'react-dom/server'
npm install react-dom

*最后 npm start


哇咔咔 我的hello world

网友评论

登录后评论
0/500
评论
沐橙~
+ 关注