react在node下运行踩坑记

简介: 博主这周开始学react 一早上敲了helloworld 开心 原地转圈圈先建一个文件夹叫它react-demosrc/App.jsimport React from 'react';export default function App() { return hello world;}在node.
博主这周开始学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
目录
相关文章
|
6月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
136 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
25 1
本地运行打包好的React、Vue项目
|
3月前
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。
|
3月前
|
监控 JavaScript Linux
[译] 在生产环境运行 PM2 & Node.js
[译] 在生产环境运行 PM2 & Node.js
|
6月前
|
存储 前端开发 中间件
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
|
3月前
|
前端开发 PHP 开发者
React Server Component 使用问题之怎么使用Docker运行PHP应用
React Server Component 使用问题之怎么使用Docker运行PHP应用
|
3月前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
62 0
|
3月前
|
Kubernetes 容器 Perl
Kubernetes(K8S) Node NotReady 节点资源不足 Pod无法运行
Kubernetes(K8S) Node NotReady 节点资源不足 Pod无法运行
65 0
|
4月前
|
运维 监控 JavaScript
函数计算产品使用问题之将自定义层(nodejs 20)添加到了函数中,本地运行没有问题,但在函数计算中出现问题,该怎么办
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
前端开发 JavaScript 测试技术