express框架怎么用react框架作为前端框架？

2025-03-13 00:00:26

推荐回答（2个）

回答（1）：

1.不要陷入纠结工具的怪圈我们团队一开始用React的时候，工具栈应该是grunt+grunt-react；写了一段时间感觉有局限，然后老大带头把工具换成了gulp+browserify+watchify+reactify，然后又愉快的写了大概半年吧，发现流行的库都上webpack了；于是我们的工具栈又变成了gulp+webpack+babel-loader。最后大家一致认为gulp是多余的，所以我们的工具栈又围绕webpack重新搭建了一遍。到最近我负责的一个内部项目，什么hot-module-replacement、extract-text-plugin（让你在js里require('style.scss');这么写的玩意儿）一股脑的造。当然再后来因为业务需要我们又基于webpack搭建了自己的构建工具，这是后话……这将近一年半的折腾历史告诉大家，1)前端就是个大坑，1个月不学新知识你就会被社区遗忘2)现在上React真幸福，工具栈基本都稳定了（什么？你还不懂？用webpack！），不用花太多时间纠结。PS.HMR也就那样，虽然dan吹得神乎其神，但实际在项目里我发现大家还是习惯手动Cmd+R，因为项目大了以后rebuild也需要1、2秒。2.DOM操作是不可避免的但凡是上点儿规模的前端项目，没有DOM操作基本是不可能的。且不说最常见的后端「埋点」，你总得用DOMAPI去取值吧；就说一个最简单的，比如右手边这个「回到顶部」的按钮，你纯用React写一个试试。当然你会说什么requestAnimationFrame，什么ReactCSSTransitionGroupblahblahblah，真正到项目里你会发现还是DOMAPI简单。3.拥抱ES6，拥抱Reactv0.14这俩为什么放在一起说呢？因为Reactv0.14里提出了一个全新的组件概念叫做：无状态的函数式组件（Statelessfunctionalcomponents）。它大概长这样：varAquarium=({species})=>({getFish(species)});有没有发现被传统的createClass方法精简了很多？当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，但是在常见的前端业务场景中，纯render的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。此外，拥抱ES6还有很多的好处，比如在加载依赖的时候不用先varxxx=require('xxx');再varyyy=xxx.yyy;而是可以直接import{yyy}from'xxx';简洁明了。4.生态环境仍然在成长中，坑不少其中首先要口诛笔伐一下的就是react-router，我们从v0.10开始用，到现在v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么？每次升级API都要变，无力吐槽。当年好不容易搞懂了v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就0.13版又重写了一遍教程，这不1.0版又出了，API基本全都不一样了！！不一样了！！一样了！！样了！当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的antdesign。5.Server端渲染很美，至今没看见哪个规模级的产品用到可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的server端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现server端渲染需要做出的tradeoff太多。6.React很简单，也很难简单是因为React的API真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看Angular……）。但是当你以为你真的搞懂React的时候，看看React源码剖析系列－解密setState-purerender-知乎专栏这篇文章开头提的问题，有多少人能不假思索的答对呢？（顺便安利一下，我们团队的知乎专栏，目前处于死磕React的状态）当你真正在业务项目中使用React的时候，你会发现它的生命周期比你想象的复杂；它的API背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。7.对于楼上某位仁兄表示《React：引领未来的用户界面开发框架》这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询React相关的问题。

回答（2）：

不要设置视图引擎
app.set('views','./views')
app.set('view engine','jade');
//Don't do this

然后你需要引入静态资源
如果你使用webpack，需要把dist里面打包好的文件作为静态资源引入
否则需要把所有的components目录作为静态资源引入
你的React就是简单的静态资源
app.use(express.static(path.join(__dirname,'src')));

最后直接在路由返回文件

app.get('/',function(req,res){
res.sendFile(path.join(__dirname,'index.html'))
})

最新问答

从烟台到天津的火车票多少钱

QQ按Ctrl+alt+a无法截图了怎么回事

地热发电的发展前景

四季牧歌太阳能放热水时自动上水是怎么回事

鹿鼎记黄小明版里韦小宝和阿柯在丽春院同床的是第几集?

墙壁抽油烟机开完后面板打不开

《机关，团体，企业，事业单位消防安全管理规定》自什么时候实行？

支付宝预约挂号每个月都有三次机会吗？

“物种”与界门纲目科属种的“种”有区别吗? 黄牛与良种奶牛是同一物种吗

长春至西安火车票硬卧票价